/* ================================================================
   Eshine Jewelry —— local custom styles
   The original style.css / common.js stay untouched; this file provides:
     1) customer review cards: fix name overflow on narrow screens
     2) mobile navigation: fixed top header + fixed bottom tab bar + slide-up category sheet
        (the original fixed black top bar and hamburger drawer are disabled)
   All rules are scoped to html.lm-mobile or the review cards, so the desktop layout is unaffected.
   ================================================================ */

/* ================================================================
   1) customer reviews: fix name overflow
   Cause: .customers_righttxt is a flex item without min-width:0, so the
        intrinsic width of the name overflows the card (4px at a 320px viewport, worse with longer names).
   ================================================================ */
.customers_righttxt { min-width: 0; }
.customers_item_title { overflow-wrap: anywhere; word-break: break-word; }

@media only screen and (max-width: 950px) {
    .customers_item { padding: 22px; }
    .customers_leftimg { max-width: 100px; }
    .customers_righttxt { flex: 1 1 auto; min-width: 0; padding-left: 16px; }
    .customers_item_title { font-size: 22px; line-height: 1.25; }
    .customers_item_futitle { font-size: 16px; }
    .customers_item_desc { font-size: 15px; }
}

@media only screen and (max-width: 400px) {
    .customers_item { padding: 16px; }
    .customers_leftimg { max-width: 74px; }
    .customers_righttxt { padding-left: 12px; }
    .customers_item_title { font-size: 19px; }
    .customers_item_futitle { font-size: 14px; }
}

/* ================================================================
   2) mobile navigation: fixed bars top and bottom
   ================================================================ */
.lm-bottomnav,
.lm-topactions,
.lm-sheet,
.lm-sheet-mask { display: none; }

/* The original fixed black top bar (with its hamburger drawer) is disabled on mobile */
html.lm-mobile .mobile-head-items { display: none !important; }

/* ---------- 2.1 Fixed top header ---------- */
html.lm-mobile .web_head,
html.lm-mobile .web_head.index_web_head {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    height: 56px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    box-shadow: 0 1px 10px rgba(0, 0, 0, .07);
    z-index: 1200;
}

html.lm-mobile .web_head .head_top { height: 56px; padding: 0 !important; }

html.lm-mobile .web_head .head_layout,
html.lm-mobile .web_head .head_contact,
html.lm-mobile .web_head .head-search { display: none !important; }

html.lm-mobile .web_head .logo,
html.lm-mobile .web_head.index_web_head .logo {
    position: static !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: 56px;
    /* Reserve room on the right for WhatsApp / phone so the logo stays clear */
    padding: 0 104px !important;
    margin: 0 !important;
    text-align: center;
    transform: none !important;
    -webkit-transform: none !important;
}

html.lm-mobile .web_head .logo img,
html.lm-mobile .web_head.index_web_head .logo img {
    width: auto !important;
    max-height: 34px !important;
}

/* Top-right shortcuts */
html.lm-mobile .lm-topactions {
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 56px;
    padding: 0 10px;
    z-index: 1210;
}

html.lm-mobile .lm-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #f5f5f5;
    color: #010101;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

html.lm-mobile .lm-action:first-child { background: #eaf9f0; color: #1faa55; }
html.lm-mobile .lm-action svg { width: 21px; height: 21px; }
html.lm-mobile .lm-action:active { transform: scale(.94); }

/* Offset the page for the fixed header */
html.lm-mobile body { padding-top: 56px; }

/* ---------- 2.2 Fixed bottom tab bar ---------- */
html.lm-mobile .lm-bottomnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: stretch;
    box-sizing: content-box;
    height: 58px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #fff;
    border-top: 1px solid #ececec;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
    z-index: 1200;
}

html.lm-mobile .lm-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    color: #8a8a8a;
    font: 400 11px/1 "Nunito-Regular", Arial, Helvetica, sans-serif;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

html.lm-mobile .lm-tab .lm-ico { display: block; width: 22px; height: 22px; }
html.lm-mobile .lm-tab .lm-ico svg { display: block; width: 100%; height: 100%; }
html.lm-mobile .lm-tab .lm-lb { letter-spacing: .2px; white-space: nowrap; }
html.lm-mobile .lm-tab:active { background: #fafafa; }
html.lm-mobile .lm-tab[aria-expanded="true"] { color: #a8892a; }

html.lm-mobile body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }

/* Lift the back-to-top button above the tab bar */
html.lm-mobile .gotop { bottom: 74px !important; }

/* ---------- 2.3 Slide-up category sheet ---------- */
html.lm-mobile .lm-sheet-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 1290;
}

html.lm-mobile .lm-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    max-height: 78vh;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .22);
    /* Do not hide with visibility: the links inside carry transition:all, so an
       inherited visibility change is transitioned too and can render incorrectly.
       Hide it by moving it off-screen, transparent and non-interactive instead. */
    opacity: 0;
    pointer-events: none;
    transform: translateY(102%);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1), opacity .22s ease;
    z-index: 1300;
}

html.lm-mobile body.lm-sheet-open .lm-sheet-mask {
    opacity: 1;
    pointer-events: auto;
}

html.lm-mobile body.lm-sheet-open .lm-sheet {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

html.lm-mobile .lm-sheet-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 54px;
    padding: 0 10px 0 18px;
    border-bottom: 1px solid #f0f0f0;
    font: 600 16px/1 "Nunito-Bold", Arial, Helvetica, sans-serif;
    color: #010101;
}

html.lm-mobile .lm-sheet-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f6f6f6;
    color: #666;
    cursor: pointer;
}

html.lm-mobile .lm-sheet-close svg { width: 16px; height: 16px; }

html.lm-mobile .lm-sheet-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}

html.lm-mobile .lm-sheet-body::after {
    content: '';
    display: block;
    height: 26px;
}

/* ---------- 2.4 Navigation list inside the sheet ---------- */
html.lm-mobile .lm-sheet-nav .head_nav {
    position: static !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

html.lm-mobile .lm-sheet-nav .head_nav > li {
    position: static !important;
    float: none !important;
    display: block;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #f2f2f2;
    background: none !important;
}

html.lm-mobile .lm-sheet-nav .head_nav > li > a {
    position: relative;
    display: block;
    height: auto !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 15px 52px 15px 18px !important;
    font: 400 16px/1.4 "Nunito-Regular", Arial, Helvetica, sans-serif;
    color: #010101 !important;
    text-decoration: none;
}

html.lm-mobile .lm-sheet-nav .head_nav > li > a:hover,
html.lm-mobile .lm-sheet-nav .head_nav > li.current-menu-item > a { color: #a8892a !important; }

/* Expand arrow: its own tap target; tapping the label still navigates
   The original <b> is a box + plus (::before a line, ::after rotated 90deg); both are overridden with a chevron here */
html.lm-mobile .lm-sheet-nav .head_nav li.has-child > a > b {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    display: block !important;
    width: 52px !important;
    height: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-left: 1px solid #f2f2f2 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    line-height: normal !important;
    transform: none !important;
}

html.lm-mobile .lm-sheet-nav .head_nav li.has-child > a > b::before {
    content: none !important;
    display: none !important;
}

html.lm-mobile .lm-sheet-nav .head_nav li.has-child > a > b::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    margin: -6px 0 0 -4px !important;
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    border-right: 2px solid #9a9a9a !important;
    border-bottom: 2px solid #9a9a9a !important;
    transform: rotate(45deg) !important;
    -webkit-transform: rotate(45deg) !important;
    transition: transform .25s ease !important;
}

html.lm-mobile .lm-sheet-nav .head_nav li.open > a > b::after {
    transform: rotate(-135deg) !important;
    -webkit-transform: rotate(-135deg) !important;
}

/* Submenus collapsed by default */
html.lm-mobile .lm-sheet-nav .head_nav li.has-child > ul.sub-menu {
    position: static !important;
    display: none !important;
    opacity: 1 !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #fafafa;
}

html.lm-mobile .lm-sheet-nav .head_nav li.open > ul.sub-menu { display: block !important; }

html.lm-mobile .lm-sheet-nav .head_nav .sub-menu li {
    float: none !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid #f0f0f0;
}

html.lm-mobile .lm-sheet-nav .head_nav .sub-menu a {
    display: block;
    height: auto !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 12px 52px 12px 32px !important;
    font: 400 14px/1.4 "Nunito-Regular", Arial, Helvetica, sans-serif;
    color: #5a5a5a !important;
    text-decoration: none;
}

html.lm-mobile .lm-sheet-nav .head_nav .sub-menu .sub-menu a {
    padding-left: 48px !important;
    color: #7a7a7a !important;
}

html.lm-mobile .lm-sheet-nav .head_nav .sub-menu a:hover { color: #a8892a !important; }
html.lm-mobile .lm-sheet-nav .head_nav .sub-menu li.has-child > a > b { width: 52px !important; }

/* Very narrow screens */
@media only screen and (max-width: 360px) {
    html.lm-mobile .web_head .logo { padding: 0 92px !important; }
    html.lm-mobile .lm-action { width: 34px; height: 34px; }
    html.lm-mobile .lm-topactions { gap: 5px; padding: 0 8px; }
}

/* 首页主标题（SEO H1）：可见但不喧宾夺主 */
.index_main_title{max-width:1200px;margin:26px auto 6px;padding:0 15px;text-align:center;
  font-size:26px;line-height:1.4;font-weight:600;color:#c8a165;letter-spacing:.3px;}
@media (max-width:768px){.index_main_title{font-size:18px;margin:16px auto 4px;}}

/* ================================================================
   LOGO 尺寸：与官网一致
   官网 logo 为 231x93（比例 2.484）；我们的横版 logo 比例 3.279，
   若只靠 max-height 会显示过宽。这里统一限制显示宽高，保持完整不变形。
   ================================================================ */
.web_head .logo img,
.web_head.index_web_head .logo img {
    width: auto;
    max-width: 231px;
    max-height: 93px;
}
.fixed-nav-active .head_layout .logo img {
    max-width: 200px;
    max-height: 70px;
}
footer.web_footer .footer_logo img {
    width: auto;
    max-width: 231px;
    max-height: 93px;
}
/* （已移除 Beaver Builder 容器样式的本地覆盖：
    官网 style.css + 每页 layout.css 已完整定义 .fl-rich-text / .fl-heading /
    .fl-photo-content 的盒模型与间距。任何本地覆盖都会改变官网原有的排版，
    故此处不再添加 .fl-* 规则。）*/

/* ================================================================
   内页横幅（pagebn-01/02/03）标题隐藏
   横幅设计本身已含文字，官网也会把 .pagnation_title 设为透明，
   这里保持一致，避免标题压在设计元素上。
   ================================================================ */
.sys_sub_head .pagnation_title {
    color: rgba(0, 0, 0, 0) !important;
}

/* ================================================================
   Products 下拉菜单（Mega Menu）改版
   问题：原样式 .head_nav li.fd_nav > ul 宽度 800px，按 3 列设计，
         现在有 4 个分组（Category / Product Range / Material / Styles），
         第 4 组被挤到第二行，排版错乱。
   方案：加宽到 1180px，改为 4 列 CSS Grid，统一间距与对齐，
         并限制每列条目过多时的显示（超出换列）。
   ================================================================ */

/* 下拉面板：4 列网格 */
.nav_wrap { position: relative; }
.head_nav li.fd_nav > ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px 28px;
    width: 1420px;
    left: -250px;
    transform: scaleY(0);
    transform-origin: top left;
    padding: 26px 32px 30px;
    box-sizing: border-box;
    justify-content: initial;
    flex-wrap: nowrap;
    border-top: 2px solid #a8892a;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
}
.head_nav li.fd_nav.menu_show > ul,
.head_nav li.fd_nav:hover > ul {
    transform: scaleY(1);
}

/* 每个分组列 */
.head_nav .fd_nav > ul > li {
    width: auto;
    padding-left: 0;
    align-self: start;
}

/* 分组标题（Category / Product Range / Material / Styles） */
.head_nav .fd_nav > ul > li > a {
    position: relative;
    margin-bottom: 14px;
    padding: 0 0 0 16px;
    font-family: 'Nunito-Bold', 'Roboto-Regular', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #010101;
    white-space: nowrap;
    cursor: pointer;
}
/* 标题前的橙色方块 */
.head_nav .fd_nav > ul > li > a b {
    position: absolute;
    top: 50%;
    left: 0;
    right: auto;
    margin-top: -5px;
    width: 10px;
    height: 10px;
    background: #ff780f;
    border: none;
    border-radius: 0;
}
.head_nav .fd_nav > ul > li > a b:before,
.head_nav .fd_nav > ul > li > a b:after {
    display: none;
}

/* 子项列表 */
.head_nav .fd_nav > ul > li > ul {
    position: relative;
    left: 0;
    top: auto;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    transform: none;
}
.head_nav .fd_nav > ul > li > ul li {
    padding: 3px 0;
    line-height: 1.6;
}
.head_nav .fd_nav > ul > li > ul li a {
    padding-left: 16px;
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    text-transform: capitalize;
    white-space: nowrap;
    transition: color .2s, padding-left .2s;
}
.head_nav .fd_nav > ul > li > ul li a:hover {
    padding-left: 22px;
    color: #a8892a;
}

/* Styles 分组条目多（16 条）时，自动分两栏显示 */
.head_nav .fd_nav > ul > li:last-child > ul {
    column-count: 2;
    column-gap: 22px;
}
.head_nav .fd_nav > ul > li:last-child > ul li {
    break-inside: avoid;
}

/* 小屏：改回单列堆叠，避免溢出 */
@media only screen and (max-width: 1400px) {
    .nav_wrap { position: relative; }
.head_nav li.fd_nav > ul {
        width: 96vw;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px 18px;
        padding: 18px 20px 22px;
    }
    .head_nav .fd_nav > ul > li:last-child > ul {
        column-count: 1;
    }
}

/* ================================================================
   视频弹窗（本地 MP4，居中播放）
   背景：官网用 fancybox + media helper 播 YouTube；我们改为本地 MP4，
         fancybox 无 media 插件且不支持本地视频，故自建轻量弹窗。
   ================================================================ */
.lm-video-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}
.lm-video-modal.is-open { display: flex; }

/* 遮罩 */
.lm-video-modal__mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .78);
    cursor: pointer;
}

/* 播放窗口：居中，16:9 宽高比，限制最大尺寸 */
.lm-video-modal__box {
    position: relative;
    z-index: 1;
    width: min(78vw, 1280px);
    aspect-ratio: 16 / 9;
    max-height: 86vh;
    background: #000;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
}
/* 高屏时按高度反推宽度，保证不超出视口 */
@media (min-aspect-ratio: 16/9) {
    .lm-video-modal__box {
        width: min(78vw, 1280px, calc(86vh * 16 / 9));
    }
}
.lm-video-modal__box video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

/* 关闭按钮 */
.lm-video-modal__close {
    position: absolute;
    top: -44px;
    right: 0;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    font-size: 26px;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background .2s;
}
.lm-video-modal__close:hover { background: #a8892a; }

/* 播放按钮：保持 .right a 原有绝对定位，仅保证可点与光标 */
div.index_why_choose .right a.lm-video-trigger { cursor: pointer; }
div.index_why_choose .right a.lm-video-trigger img { transition: transform .3s; }
div.index_why_choose .right a.lm-video-trigger:hover img { transform: scale(.85); }

/* 小屏 */
@media only screen and (max-width: 768px) {
    .lm-video-modal { padding: 12px; }
    .lm-video-modal__box { width: 96vw; }
    .lm-video-modal__close { top: -38px; width: 30px; height: 30px; line-height: 30px; font-size: 22px; }
}

/* ================================================================
   分页条（.page_bar）防溢出
   原样式的 .page_bar 固定 height:33px，页码多时会换行溢出；
   这里改为自适应高度 + 不换行 + 居中，并统一省略号样式。
   ================================================================ */
.page_bar {
    height: auto;
    min-height: 33px;
    margin: 50px 0 30px;
    text-align: center;
    line-height: 1.8;
}
.page_bar .pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1;
}
.page_bar .pages > a,
.page_bar .pages > span {
    margin: 0;
    min-width: 33px;
    height: 33px;
    line-height: 31px;
    padding: 0 8px;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid #ccc;
    color: #333;
    background: #fff;
    border-radius: 2px;
    font-size: 14px;
    transition: all .2s;
}
.page_bar .pages > a:hover,
.page_bar .pages > a.current {
    border-color: #a8892a;
    background: #a8892a;
    color: #fff;
}
.page_bar .pages > span.pager_gap {
    border: none;
    background: none;
    min-width: auto;
    padding: 0 2px;
    color: #999;
}
.page_bar .pages > span.current2 {
    border: none;
    background: none;
    min-width: auto;
    margin-left: 8px;
    color: #666;
    white-space: nowrap;
}
@media only screen and (max-width: 768px) {
    .page_bar { margin: 24px 0 16px; }
    .page_bar .pages { gap: 5px; }
    .page_bar .pages > a,
    .page_bar .pages > span {
        min-width: 28px;
        height: 28px;
        line-height: 26px;
        font-size: 12px;
        padding: 0 6px;
    }
}


/* ================================================================
   首页轮播紧贴导航栏（消除 13px 留白）
   实测：导航灰底结束于 y=161，轮播图顶边 y=175，中间 13px 纯白。
   处理：给 .web_head 加 margin-bottom 负值把轮播上提。
         实测 -13px 剩 8px、-18px 剩 3px、-21px 归零（0px）。
         试过缩短 .head_layout 高度、给 .slider_banner 加负边距，均无效。
   ================================================================ */
.web_head,
.web_head.index_web_head {
    margin-bottom: -21px;
}
/* 顺带消除行内元素基线造成的额外空隙 */
.slider_banner,
.slider_banner .swiper-wrapper,
.slider_banner .swiper-slide {
    font-size: 0;
    line-height: 0;
}
.slider_banner .swiper-slide img,
.slider_banner .swiper-slide a {
    display: block;
    vertical-align: top;
}
/* 轮播内的分页与按钮恢复可读字号 */
.slider_banner .swiper-pagination,
.slider_banner .banner_btns {
    font-size: 14px;
    line-height: 1;
}

/* ================================================================
   首页「Why Choose us」文字被截断修复
   问题：style.css 里有
     div.index_why_choose div.left p { -webkit-line-clamp:5; overflow:hidden; display:-webkit-box }
   我们替换的品牌文案比原站长，第 5 段会被裁掉，
   连带下面的按钮和图标被挤出可视区。
   修复：取消行数截断，让文字完整显示；布局由右侧图片高度决定。
   ================================================================ */
div.index_why_choose div.layout.flex_row div.left p {
    -webkit-line-clamp: none !important;
    line-clamp: none !important;
    overflow: visible !important;
    display: block !important;
    -webkit-box-orient: initial !important;
}

/* 左侧内容与右侧视频图顶部对齐 */
div.index_why_choose div.layout.flex_row {
    align-items: flex-start;
}

/* 右侧视频图：宽度撑满、高度自适应，播放按钮居中 */
div.index_why_choose div.layout.flex_row div.right {
    position: relative;
    line-height: 0;
}

div.index_why_choose div.layout.flex_row div.right > img {
    display: block;
    width: 100%;
    height: auto;
}

/* ================================================================
   播放按钮精确居中修复
   问题：style.css 的媒体查询里用 right:20% / 45% / 36% 定位，
   不同断点数值不同，导致按钮明显偏右（截图可见）。
   修复：改用 left:50% + translateX(-50%) 精确水平居中，
   并显式覆盖各断点的 right 值。
   ================================================================ */
div.index_why_choose div.layout.flex_row div.right {
    position: relative !important;
}

div.index_why_choose .right a,
div.index_why_choose .right a.lm-video-trigger,
div.index_why_choose .right a.fancybox-media {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 180px !important;
    height: 180px !important;
    cursor: pointer;
    line-height: 0;
}

div.index_why_choose .right a img {
    display: block;
    width: 100% !important;
    height: auto !important;
    transition: transform .3s ease;
}

/* hover：只缩放图片，不影响居中变换 */
div.index_why_choose .right a:hover img {
    transform: scale(.85);
}

/* 各断点等比缩小，保持居中 */
@media screen and (max-width: 1560px) {
    div.index_why_choose .right a,
    div.index_why_choose .right a.lm-video-trigger {
        width: 120px !important;
        height: 120px !important;
    }
}
@media screen and (max-width: 768px) {
    div.index_why_choose .right a,
    div.index_why_choose .right a.lm-video-trigger {
        width: 90px !important;
        height: 90px !important;
    }
}
@media screen and (max-width: 640px) {
    div.index_why_choose .right a,
    div.index_why_choose .right a.lm-video-trigger {
        width: 60px !important;
        height: 60px !important;
    }
}

/* ==========================================================================
   HOLYCOME 自有设计系统 v2.0
   --------------------------------------------------------------------------
   目的：建立与源站（Nunito/Roboto + 橙色 #A8892A + 冷灰字）完全不同的
         视觉识别，形成独立品牌的排版语言。
   要点：
     1. 标题统一使用 Lora 衬线体（源站为 Nunito-Bold 无衬线）
     2. 正文/标题色改为暖调深墨色（源站为 #333333 冷灰）
     3. 强调色统一为品牌金 #A8892A（源站为橙 #A8892A）
   ========================================================================== */

/* ---------- 1. Lora 衬线体声明（自有字体文件） ---------- */
@font-face {
    font-family: 'Lora';
    src: url('../fonts/Lora-400.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lora';
    src: url('../fonts/Lora-700.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---------- 2. 品牌色变量 ---------- */
:root {
    --hc-gold: #A8892A;
    --hc-gold-dark: #8C701F;
    --hc-gold-light: #C9AE5A;
    --hc-ink: #2E2A24;
    --hc-ink-soft: #5A544A;
    --hc-cream: #FBF8F1;
}

/* ---------- 3. 标题：改用 Lora 衬线体 ---------- */
.index_title,
h2.index_title,
.index_title_bar .good_title,
.goods-may-like .index_title_bar .good_title,
.sys_sub_head .pagnation_title,
.side-tit-bar .side-tit,
.footer_title,
h2.footer_title,
.customers_item_title,
.item-title,
.index_span,
.index_craft .index_hd .index_span,
.index_hd .index_title,
.faqs_item h3,
.blog-article h1,
.blog-article h2,
.blog-article h3 {
    font-family: 'Lora', Georgia, 'Times New Roman', serif !important;
    font-weight: 700 !important;
    letter-spacing: .2px;
}

/* 内页大标题用常规字重，更雅致 */
.sys_sub_head .pagnation_title {
    font-weight: 400 !important;
}

/* 章节标题统一深墨色（原为冷灰/棕褐） */
.index_title,
h2.index_title,
.index_hd .index_title,
.index_craft .index_hd .index_span {
    color: var(--hc-ink) !important;
}

/* 小标题（Why Choose us / News 等模块名） */
.index_craft div.layout.flex_row div.right div.index_hd span.index_span {
    color: var(--hc-gold) !important;
    font-family: 'Lora', Georgia, serif !important;
    font-style: italic;
}

/* ---------- 4. 正文与通用文字：暖调深墨色 ---------- */
body,
.web_main,
.web_main p {
    color: var(--hc-ink-soft);
}

/* 源站的冷灰正文改为暖灰 */
div.index_why_choose div.layout.flex_row div.left p,
div.index_product div.layout.flex_row div.left p,
div.index_craft div.layout.flex_row div.right div.index_bd p,
div.index_service div.layout.flex_row div.left p,
.index_quality_desc,
.customers_item_desc,
.item-detail,
.footer_contact ul li span,
.footer_contact ul li a span {
    color: var(--hc-ink-soft) !important;
}

/* ---------- 5. 品牌金替代源站棕褐点缀色 ---------- */
div.index_craft div.layout.flex_row div.right div.index_hd span.index_span,
.index_span {
    color: var(--hc-gold) !important;
}

/* ---------- 6. 标题下方的品牌金色装饰线 ---------- */
.index_hd .index_title,
.index_title_bar .good_title {
    position: relative;
    display: inline-block;
}

.index_hd .index_title::after,
h2.index_title::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    margin: 18px auto 0;
    background: var(--hc-gold);
}

/* 左对齐的标题，装饰线靠左 */
div.index_product div.layout.flex_row div.left h2.index_title::after,
div.index_why_choose div.layout.flex_row div.left .index_title::after,
div.index_craft div.layout.flex_row div.right h2.index_title::after,
div.index_service div.layout.flex_row div.left h2.index_title::after {
    margin-left: 0;
}

/* ---------- 7. 品牌金按钮（比源站橙色更沉稳） ---------- */
a.index_btn,
.index_btn a,
.inquiry_btn,
.search-btn,
.head-search .search-btn {
    /* ⚠ 必须用 background-color，不能用 background 简写：
       简写会把 background-image 重置为 none —— 搜索按钮的白色放大镜
       （style.css 里 .head-search form .search-btn 的 search_btn.png）
       会被整条抹掉，看起来就是「按钮没有图标了」。 */
    background-color: var(--hc-gold) !important;
    border-color: var(--hc-gold) !important;
}

a.index_btn:hover,
.index_btn a:hover,
.inquiry_btn:hover {
    background-color: var(--hc-gold-dark) !important;
    border-color: var(--hc-gold-dark) !important;
    color: #fff !important;
}

/* ---------- 8. 米白底色，替代源站纯白/冷灰底 ---------- */
div.index_why_choose,
div.index_certificate,
div.index_quality {
    background: var(--hc-cream) !important;
}

/* ---------- 9. 页脚：深墨色 + 金色标题 ---------- */
footer.web_footer {
    background: var(--hc-ink) !important;
}

footer.web_footer div.footer_top div.layout.flex_row div.footer_item h2.footer_title,
footer.web_footer .footer_title {
    color: var(--hc-gold-light) !important;
}

/* ---------- 10. 导航悬停/当前项：品牌金 ---------- */
.head_nav li a:hover,
.head_nav li.current-menu-item > a,
.head_nav li.menu_show > a {
    color: var(--hc-gold) !important;
}

/* ---------- 11. 分页当前页：品牌金 ---------- */
.page_bar .pages a.on,
.page_bar .pages span.current,
.page_bar .pages a:hover {
    background: var(--hc-gold) !important;
    border-color: var(--hc-gold) !important;
}

/* ================================================================
   新闻/文章页样式（照搬官网 .aside / .blog_list 结构，补齐缺失的细节）
   官网 style.css 只定义了部分规则，这里补齐侧栏、卡片、文章正文、
   相关文章、CTA 的样式，让 /news/ 和 /news/<slug>/ 排版完整。
   ================================================================ */

/* ---------- 布局：左侧栏 + 右主区 ----------
   注意：style.css 里 .aside 是 float:left/250px、.main 是 float:right/calc(100%-350px)，
   两者会互相干扰。这里改用 table-cell 布局，稳定不受浮动影响。 */
.page_main > .layout {
    display: table;
    table-layout: fixed;
    /* 100% + max-width：视口宽时两侧留白均等，不会偏左 */
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    border-spacing: 0;
}
.page_main .aside {
    display: table-cell;
    float: none;
    width: 260px;
    min-width: 260px;
    padding-right: 76px;
    vertical-align: top;
    box-sizing: border-box;
}
.page_main .main {
    display: table-cell;
    float: none;
    width: auto;
    vertical-align: top;
    box-sizing: border-box;
    padding-bottom: 0;
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ---------- 侧栏 ---------- */
.page_main .aside + .aside { margin-top: 0; }
.side-widget {
    margin-bottom: 30px;
    background: #fff;
    border: 1px solid #eee;
}
.side-tit-bar {
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    background: #fafafa;
}
.side-tit {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #010101;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.side-cate { margin: 0; padding: 8px 0; list-style: none; }
.side-cate > li { border-bottom: 1px dashed #f0f0f0; }
.side-cate > li:last-child { border-bottom: none; }
.side-cate > li > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    font-size: 14px;
    line-height: 1.5;
    color: #555;
    text-decoration: none;
    transition: all .2s;
}
.side-cate > li > a:hover,
.side-cate > li.current-menu-parent > a {
    color: #a8892a;
    background: #f9f6ec;
}
.side-cate > li > a em { font-style: normal; font-size: 12px; color: #999; }
.side-cate > li.current-menu-parent > a em { color: #a8892a; }

/* 侧栏热销产品 */
.side-pro { margin: 0; padding: 12px 16px; list-style: none; }
.side-pro > li { border-bottom: 1px dashed #f0f0f0; }
.side-pro > li:last-child { border-bottom: none; }
.side-pro > li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    font-size: 13px;
    line-height: 1.5;
    color: #555;
    text-decoration: none;
    transition: color .2s;
}
.side-pro > li > a:hover { color: #a8892a; }
.side-pro img {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 1px solid #eee;
}

/* ---------- 列表页头部 ---------- */
.blog_head { margin-bottom: 24px; }
.blog_head .page_title { margin: 0 0 8px; }
.blog_desc {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #777;
}

/* 分类筛选条 */
.blog_filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 26px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}
.filter_btn {
    display: inline-block;
    padding: 7px 15px;
    font-size: 13px;
    line-height: 1.4;
    color: #555;
    background: #f7f7f7;
    border: 1px solid #eee;
    border-radius: 3px;
    text-decoration: none;
    transition: all .2s;
}
.filter_btn:hover { color: #a8892a; border-color: #a8892a; background: #fff; }
.filter_btn.active {
    color: #fff;
    background: #a8892a;
    border-color: #a8892a;
}

/* ---------- 文章卡片列表 ---------- */
.blog_list > ul { margin: 0; padding: 0; list-style: none; }
.blog_list .blog-item {
    padding: 0 0 26px;
    margin-bottom: 26px;
    border-bottom: 1px solid #f0f0f0;
}
.blog_list .blog-item:last-child { border-bottom: none; margin-bottom: 0; }
.blog_list .item-wrap {
    display: flex;
    gap: 24px;
    margin: 0;
    align-items: flex-start;
}
.blog_list .item-img {
    flex: 0 0 290px;
    display: block;
    overflow: hidden;
    line-height: 0;
}
.blog_list .item-img .blog-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.blog_list .item-wrap:hover .blog-img { transform: scale(1.05); }
.blog_list .item-info { flex: 1 1 auto; min-width: 0; }
.blog_list .item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 12px;
}
.blog_list .item-cat {
    display: inline-block;
    padding: 3px 10px;
    color: #a8892a;
    background: #f7f2e2;
    border-radius: 2px;
    text-decoration: none;
    font-weight: 600;
}
.blog_list .item-cat:hover { background: #a8892a; color: #fff; }
.blog_list .item-date { color: #999; }
.blog_list .item-title {
    margin: 0 0 10px;
    font-size: 19px;
    line-height: 1.45;
    font-weight: 700;
}
.blog_list .item-title a { color: #010101; text-decoration: none; transition: color .2s; }
.blog_list .item-title a:hover { color: #a8892a; }
.blog_list .item-detail {
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.75;
    color: #777;
}
.blog_list .item-more {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #a8892a;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.blog_list .item-more:hover { text-decoration: underline; }
.blog-empty { padding: 40px 0; text-align: center; color: #999; font-size: 15px; }

/* ---------- 文章详情 ---------- */
.article_head { margin-bottom: 26px; }
.article_cat {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #a8892a;
    background: #f7f2e2;
    border-radius: 2px;
    text-decoration: none;
}
.article_cat:hover { background: #a8892a; color: #fff; }
.main .page_title {
    margin: 0 0 12px;
    font-size: 30px;
    line-height: 1.35;
    font-weight: 700;
    color: #010101;
}
.article_meta { font-size: 13px; color: #999; }
.article_meta .meta_sep { margin: 0 8px; color: #ddd; }

/* 正文排版 */
.blog-article {
    font-size: 15px;
    line-height: 1.85;
    color: #444;
    word-wrap: break-word;
}
.blog-article p { margin: 0 0 1.2em; }
.blog-article h2 {
    margin: 1.8em 0 .7em;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 700;
    color: #010101;
}
.blog-article h3 {
    margin: 1.5em 0 .6em;
    font-size: 18px;
    font-weight: 700;
    color: #010101;
}
.blog-article ul,
.blog-article ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.blog-article li { margin-bottom: .5em; }
.blog-article strong { color: #010101; }
.blog-article a { color: #a8892a; }
.blog-article img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.2em 0;
}
.blog-article table {
    width: 100% !important;
    margin: 1.4em 0;
    border-collapse: collapse;
    font-size: 14px;
}
.blog-article table th,
.blog-article table td {
    border: 1px solid #e5e5e5 !important;
    padding: 10px 12px !important;
    text-align: left;
    vertical-align: top;
}
.blog-article table th { background: #fafafa; font-weight: 700; color: #010101; }
.blog-article blockquote {
    margin: 1.4em 0;
    padding: 14px 20px;
    border-left: 4px solid #a8892a;
    background: #fafafa;
    color: #555;
}
/* 正文内的 fl-rich-text 包裹 */
.blog-article .fl-rich-text { all: unset; display: block; }

/* 文章底部：分享 + 返回 */
.article_foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin: 34px 0 0;
    padding-top: 22px;
    border-top: 1px solid #eee;
}
.article_share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.share_label { font-size: 13px; color: #999; margin-right: 4px; }
.share_btn {
    display: inline-block;
    padding: 6px 13px;
    font-size: 12px;
    color: #666;
    background: #f7f7f7;
    border: 1px solid #eee;
    border-radius: 2px;
    text-decoration: none;
    transition: all .2s;
}
.share_btn:hover { color: #fff; background: #a8892a; border-color: #a8892a; }
.article_back { font-size: 13px; font-weight: 600; color: #a8892a; text-decoration: none; }
.article_back:hover { text-decoration: underline; }

/* 相关文章 */
.article_related { margin-top: 44px; }
.related_title {
    margin: 0 0 20px;
    padding-bottom: 12px;
    font-size: 20px;
    font-weight: 700;
    color: #010101;
    border-bottom: 2px solid #a8892a;
    display: inline-block;
}
.related_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.related_list > li > a { display: block; text-decoration: none; }
.related_list img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    margin-bottom: 12px;
    transition: transform .5s ease;
}
.related_list > li > a:hover img { transform: scale(1.04); }
.related_list h3 {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 600;
    color: #333;
    transition: color .2s;
}
.related_list > li > a:hover h3 { color: #a8892a; }

/* 文章底部询盘 CTA */
.article_cta {
    margin-top: 44px;
    padding: 34px 36px;
    background: #f7f4ea;
    border-left: 4px solid #a8892a;
}
.article_cta h2 { margin: 0 0 10px; font-size: 21px; font-weight: 700; color: #010101; }
.article_cta p { margin: 0 0 20px; font-size: 15px; line-height: 1.8; color: #666; }
.article_cta .index_btn { margin-left: 0; }

/* ---------- 响应式 ---------- */
@media only screen and (max-width: 1100px) {
    /* 布局是 table/table-cell，移动端必须改回 block 才能纵向堆叠 */
    .page_main > .layout,
    .page_main .aside,
    .page_main .main {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .page_main .aside {
        padding-right: 0;
        margin-bottom: 30px;
    }
    .side-cate > li > a,
    .side-pro > li > a { white-space: normal; }
    .side-cate > li > a { justify-content: flex-start; }
    .related_list { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 768px) {
    .blog_list .item-wrap { flex-direction: column; gap: 16px; }
    .blog_list .item-img { flex: 1 1 auto; width: 100%; }
    .blog_list .item-img .blog-img { height: 210px; }
    .main .page_title { font-size: 23px; }
    .related_list { grid-template-columns: 1fr; }
    .related_list img { height: 200px; }
    .article_cta { padding: 24px 22px; }
    .article_foot { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   页脚文字可读性修复
   问题：页脚背景改为深墨色（品牌设计系统），但原文颜色仍是 #453526 深棕，
         压在深色底上几乎无法辨认。
   方案：正文浅米色、标题品牌金、版权行纯白，保证 AA 对比度。
   ========================================================================== */

/* 联系信息（电话/邮箱/地址） */
footer.web_footer div.footer_top div.layout.flex_row div.footer_item.footer_contact ul li span,
footer.web_footer div.footer_top div.layout.flex_row div.footer_item.footer_contact ul li a span,
footer.web_footer div.footer_top div.layout.flex_row div.footer_item.footer_contact ul li a {
    color: #EDE6D6 !important;
}

/* 快捷链接 */
footer.web_footer div.footer_top div.layout.flex_row div.footer_item.footer_nav ul li a {
    color: #EDE6D6 !important;
}

footer.web_footer div.footer_top div.layout.flex_row div.footer_item.footer_nav ul li a:hover {
    color: var(--hc-gold-light) !important;
}

/* 询盘说明文字 */
footer.web_footer div.footer_top div.layout.flex_row div.footer_item.footer_inquiry p {
    color: #EDE6D6 !important;
}

/* 二维码旁的说明（Scan to chat on WeChat） */
footer.web_footer div.footer_top div.layout.flex_row div.footer_item.footer_erweima p {
    color: #EDE6D6 !important;
}

/* 标题统一品牌金 */
footer.web_footer div.footer_top div.layout.flex_row div.footer_item.footer_contact h2.footer_title,
footer.web_footer div.footer_top div.layout.flex_row div.footer_item.footer_nav h2.footer_title,
footer.web_footer div.footer_top div.layout.flex_row div.footer_item.footer_inquiry h2.footer_title {
    color: var(--hc-gold-light) !important;
}

/* 版权行：纯白，去掉原站的 0.75 透明度 */
footer.web_footer div.footer_bottom div.layout div.copyright,
footer.web_footer div.footer_bottom div.layout div.copyright a,
footer.web_footer .copyright,
footer.web_footer .copyright a {
    color: #FFFFFF !important;
    opacity: 1 !important;
}

/* 页脚底部链接 */
footer.web_footer div.footer_bottom div.layout div.copyright a:hover {
    color: #FFF3D0 !important;
    text-decoration: underline;
}

/* 询盘按钮：改为金色描边样式，白字清晰 */
footer.web_footer div.footer_top div.layout.flex_row div.footer_item.footer_inquiry a.inquiry_btn {
    color: #FFFFFF !important;
    background: var(--hc-gold) !important;
    border-color: var(--hc-gold) !important;
}

footer.web_footer div.footer_top div.layout.flex_row div.footer_item.footer_inquiry a.inquiry_btn:hover {
    background: transparent !important;
    color: var(--hc-gold-light) !important;
    border-color: var(--hc-gold-light) !important;
}

/* 页脚整体兜底：任何漏网文字都用浅色 */
footer.web_footer,
footer.web_footer a,
footer.web_footer span,
footer.web_footer li,
footer.web_footer p {
    color: #EDE6D6;
}

footer.web_footer h2.footer_title,
footer.web_footer h3.footer_title {
    color: var(--hc-gold-light) !important;
}

/* 二维码图片加白色底衬，避免深底上发灰 */
footer.web_footer div.footer_top div.layout.flex_row div.footer_item.footer_erweima img {
    background: #FFFFFF;
    padding: 8px;
    border-radius: 6px;
}

/* ================================================================
   News 导航下拉（8 个文章分类）
   News 菜单项带了 fd_nav 类（与 Products 相同），会被 Products 的
   4 列 mega menu 样式套用。这里只针对「href=/news/ 的那个 fd_nav」
   覆盖成单列下拉，不影响 Products。
   ================================================================ */
.head_nav > li.fd_nav:has(> a[href="/news/"]) > ul {
    display: block;
    grid-template-columns: none;
    width: 320px;
    left: -60px;
    padding: 14px 0;
    border-top: 2px solid #a8892a;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
}
/* :has 兼容性兜底：靠 JS 给 News 的 li 加 .nav-news 类 */
.head_nav > li.fd_nav.nav-news > ul {
    display: block !important;
    width: 320px !important;
    left: -60px !important;
    padding: 14px 0 !important;
}
.head_nav > li.fd_nav.nav-news > ul > li,
.head_nav > li.fd_nav:has(> a[href="/news/"]) > ul > li {
    width: 100%;
    padding: 0;
    margin: 0;
}
.head_nav > li.fd_nav.nav-news > ul > li > a,
.head_nav > li.fd_nav:has(> a[href="/news/"]) > ul > li > a {
    display: block;
    padding: 9px 22px;
    margin: 0;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: #444;
    text-transform: none;
    white-space: normal;
    transition: all .2s;
}
.head_nav > li.fd_nav.nav-news > ul > li > a:hover,
.head_nav > li.fd_nav:has(> a[href="/news/"]) > ul > li > a:hover {
    color: #a8892a;
    background: #f9f6ec;
    padding-left: 28px;
}
/* News 下拉不显示橙色方块标题装饰 */
.head_nav > li.fd_nav.nav-news > ul > li > a b,
.head_nav > li.fd_nav.nav-news > ul > li > ul > li > a b,
.head_nav > li.fd_nav:has(> a[href="/news/"]) > ul > li > a b {
    display: none !important;
}

/* ==========================================================================
   回顶按钮修复
   问题：common.js 动态注入 <span class="gotop">，但 style.css 里有一条
         .gotop { display: none !important; }  把它永久隐藏，按钮从不出现。
   方案：用更高优先级恢复显示，仅在滚动后由 JS 加上的 .active 类生效时才显示。
        同时适配品牌金配色与移动端位置。
   ========================================================================== */

/* 恢复显示（覆盖 style.css 的 display:none） */
body > span.gotop,
html body .gotop {
    display: block !important;
}

/* 未激活时仍隐藏 */
body > span.gotop:not(.active) {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 激活时显示：金色圆形按钮，居中且不干扰内容 */
body > span.gotop.active {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: url('../../uploads/go_top.svg') center center / 100% 100% no-repeat !important;
    display: block !important;
}

/* 位置与尺寸：避开右侧在线客服条；矢量图，任意尺寸都锐利 */
.gotop {
    right: 26px !important;
    bottom: 30px !important;
    width: 88px !important;
    height: 88px !important;
    line-height: 88px !important;
    z-index: 990 !important;
    border-radius: 50%;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

/* 按钮内文字（"Back to top"）：金色底色上保持白色，字号适配按钮 */
body > span.gotop.active em,
body > span.gotop em {
    font-size: 11px !important;
    line-height: 1.15 !important;
    color: #FFFFFF !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* 悬停：轻微上浮 + 提亮 */
body > span.gotop.active:hover {
    filter: brightness(1.12);
}

/* 移动端：抬到底部标签栏之上 */
html.lm-mobile body > span.gotop.active {
    right: 16px !important;
    bottom: 76px !important;
    width: 62px !important;
    height: 62px !important;
}

/* 小屏进一步缩小 */
@media only screen and (max-width: 480px) {
    body > span.gotop.active {
        right: 12px !important;
        bottom: 72px !important;
        width: 54px !important;
        height: 54px !important;
    }
}
/* ================================================================
   内页横幅图片高度约束
   style.css 里 .head_bn_item img 是空规则，没有高度限制；
   当封面是 900x900 方图时会撑得很高。这里统一压到标准内页横幅比例。
   ================================================================ */
.sys_sub_head .head_bn_item {
    position: relative;
    overflow: hidden;
    line-height: 0;
    font-size: 0;
}
.sys_sub_head .head_bn_item img {
    display: block;
    width: 100%;
    height: 455px;
    object-fit: cover;
    object-position: center;
}
@media only screen and (max-width: 1100px) {
    .sys_sub_head .head_bn_item img { height: 320px; }
}
@media only screen and (max-width: 768px) {
    .sys_sub_head .head_bn_item img { height: 200px; }
}

/* 回顶按钮：隐藏 JS 注入的 "TOP" 文字（改为纯图标按钮，避免文字压住箭头） */
body > span.gotop em,
body > span.gotop.active em {
    display: none !important;
    font-size: 0 !important;
    opacity: 0 !important;
}

/* 按钮内不显示任何文字 */
body > span.gotop {
    color: transparent !important;
    font-size: 0 !important;
    text-indent: -9999px;
    line-height: 0 !important;
}

/* 保持圆形与背景图完整显示 */
body > span.gotop.active {
    background-size: 100% 100% !important;
    border-radius: 50% !important;
}
/* 文章正文特色图（封面图放到正文开头，不再当横幅） */
.blog-article .article_thumb {
    display: block;
    width: 100%;
    max-width: 720px;
    height: auto;
    max-height: 460px;
    object-fit: cover;
    margin: 0 0 26px;
    border-radius: 3px;
}
/* 侧栏 widget 之间留间距 */
.page_main .aside .side-widget + .side-widget { margin-top: 30px; }

/* ==========================================================================
   文章页排版重构（可读性优化）
   --------------------------------------------------------------------------
   问题：
     1) 正文列宽 ≈1200px，15px 字号下每行 110+ 字符，远超舒适阅读区间
        （60–80 字符），导致「挤在一起」、读起来累。
     2) 行高 1.85 / 段距 1.2em 对长文偏紧；标题层级留白不足。
     3) 该区域样式是在品牌改色之后新增的，仍残留橙色（源站主题色）。
   方案：正文限宽到约 82 字符（700px），整体加大留白、强化标题层级，
         并统一为品牌金配色。
   ========================================================================== */

/* ---------- 2.1 正文列限宽：提升可读性的关键 ---------- */
.blog-article,
.article_foot,
.article_cta {
    max-width: 700px;
}

/* 在主内容区内居中：左右留白均衡，不与侧栏贴在一起 */
.blog-article {
    margin-left: auto;
    margin-right: auto;
}

.article_head,
.article_related,
.article_foot,
.article_cta {
    margin-left: auto;
    margin-right: auto;
}

/* 文章头（分类 / 标题 / 元信息）同样限宽，保持左对齐一致 */
.article_head,
.article_related {
    max-width: 820px;
}

/* ---------- 2.2 正文行距与段距：长文更透气 ---------- */
.blog-article {
    font-size: 17px;
    line-height: 2.0;
    color: #3F3A33;
}

.blog-article p {
    margin: 0 0 1.7em;
}

/* 首段稍大一点，做阅读引导 */
.blog-article > p:first-of-type {
    font-size: 18.5px;
    line-height: 1.95;
    color: #2E2A24;
}

/* 段落之间不要贴太近；行内 <br> 换行也给一点呼吸 */
.blog-article p br {
    line-height: 2.0;
}

/* ---------- 2.3 标题层级：加大留白 + 品牌金装饰 ---------- */
.blog-article h2 {
    margin: 2.6em 0 1em;
    font-size: 26px;
    line-height: 1.35;
    color: #2E2A24;
    position: relative;
    padding-bottom: .5em;
}

.blog-article h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 52px;
    height: 3px;
    background: var(--hc-gold, #a8892a);
}

.blog-article h3 {
    margin: 2.1em 0 .8em;
    font-size: 20px;
    line-height: 1.45;
    color: #2E2A24;
}

/* 第一个标题不要顶到顶部 */
.blog-article > h2:first-child,
.blog-article > h3:first-child {
    margin-top: 0;
}

/* ---------- 2.4 列表：改善缩进与行距 ---------- */
.blog-article ul,
.blog-article ol {
    margin: 0 0 1.7em;
    padding-left: 1.5em;
}

.blog-article li {
    margin-bottom: .75em;
    line-height: 1.95;
}

.blog-article li:last-child {
    margin-bottom: 0;
}

/* ---------- 2.5 引用块：更有分量 ---------- */
.blog-article blockquote {
    margin: 2em 0;
    padding: 20px 26px;
    border-left: 4px solid var(--hc-gold, #a8892a);
    background: #FAF8F2;
    color: #4A443B;
    font-size: 17px;
    line-height: 1.9;
}

.blog-article blockquote p:last-child {
    margin-bottom: 0;
}

/* ---------- 2.6 图片：与文字留出间距 ---------- */
.blog-article img {
    margin: 2em 0;
    border-radius: 3px;
}

.blog-article .article_thumb {
    max-width: 100%;
    max-height: 440px;
    margin: 0 0 34px;
    border-radius: 3px;
}

/* ---------- 2.7 表格：更清晰的间距 ---------- */
.blog-article table {
    margin: 2em 0;
    font-size: 15px;
}

.blog-article table th,
.blog-article table td {
    padding: 12px 14px !important;
    line-height: 1.65;
}

/* ---------- 2.8 文章头：留白与层级 ---------- */
.article_head {
    margin-bottom: 34px;
    padding-bottom: 24px;
    border-bottom: 1px solid #EFEAE0;
}

.article_cat {
    padding: 5px 13px;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 2px;
}

.article_meta {
    margin-top: 14px;
    font-size: 13.5px;
    color: #948C7E;
}

/* ---------- 2.9 底部区域：与正文拉开距离 ---------- */
.article_foot {
    margin-top: 48px;
    padding-top: 26px;
}

.article_related {
    margin-top: 60px;
}

.article_cta {
    margin-top: 60px;
    padding: 40px 42px;
    border-left: 4px solid var(--hc-gold, #a8892a);
}

.article_cta h2 {
    margin: 0 0 14px;
    font-size: 24px;
}

.article_cta p {
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 1.85;
    max-width: 640px;
}

/* ---------- 2.10 列表页卡片：同步放松间距 ---------- */
.blog_list .item-detail {
    line-height: 1.85;
}

.blog_list .blog-item {
    padding-bottom: 32px;
    margin-bottom: 32px;
}

/* ---------- 2.11 窄屏适配 ---------- */
@media only screen and (max-width: 1024px) {
    .blog-article,
    .article_head,
    .article_foot,
    .article_related,
    .article_cta {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .blog-article {
        font-size: 16px;
        line-height: 1.95;
    }
    .blog-article h2 {
        font-size: 22px;
        margin: 2.2em 0 .85em;
    }
    .blog-article h3 {
        font-size: 18px;
        margin: 1.8em 0 .7em;
    }
}

@media only screen and (max-width: 640px) {
    .blog-article {
        font-size: 15.5px;
        line-height: 1.9;
    }
    .blog-article > p:first-of-type {
        font-size: 16.5px;
    }
    .article_cta {
        padding: 26px 22px;
    }
}

/* ================================================================
   移动端全局留白修正
   style.css 里 .path_bar .layout { width: auto } 没有左右内边距，
   面包屑文字会贴到屏幕左边缘被截断。
   同时保证内页主体在窄屏有统一留白。
   ================================================================ */
@media only screen and (max-width: 1100px) {
    /* .path_bar .layout 是 width:auto（收缩到内容宽度），
       内边距必须加在 ul 上；用 !important 确保覆盖原站规则。 */
    .path_bar,
    .path_bar .layout {
        width: auto !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    .path_bar ul,
    ul.layout {
        width: auto !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        padding-left: 26px !important;
        padding-right: 20px !important;
        box-sizing: border-box;
    }
    .path_bar li:first-child { padding-left: 0 !important; }
}
@media only screen and (max-width: 768px) {
    .path_bar ul,
    ul.layout {
        padding-left: 20px !important;
        padding-right: 16px !important;
    }
    .path_bar li,
    .path_bar li a { font-size: 13px; line-height: 34px; }
    /* 内页主体留白 */
    .page_main > .layout { width: 100%; padding-left: 20px; padding-right: 20px; }
    .page_main .main > *:last-child { margin-bottom: 0; }
}

/* ==========================================================================
   新闻 / 文章页布局重做
   --------------------------------------------------------------------------
   问题：
     1) .page_main > .layout 用 width:96%（视口宽时容器偏左），max-width 1510px
        过宽，而正文列限宽 700px 居中后右侧留出近 400px 空白，页面显得「空」。
     2) 侧栏标题被 style.css 的 .side-tit-bar .side-tit 规则套用橙色方块
        （padding-left: 35px + 深色底），"ARTICLE CATEGORIES" 被裁掉。
     3) 列表卡片宽度未撑满主区，右侧空白更明显。
   ========================================================================== */

/* ---------- 2.1 侧栏标题：象牙底 + 左侧品牌金条 ---------- */
.page_main .side-tit-bar {
    padding: 0 !important;
    background: transparent !important;
    border-bottom: none !important;
}

.page_main .side-tit-bar .side-tit,
.page_main .side-tit {
    position: static !important;
    height: auto !important;
    line-height: 1.4 !important;
    padding: 14px 16px 14px 18px !important;
    background: #FAF8F2 !important;
    color: #2E2A24 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase;
    border-left: 4px solid var(--hc-gold, #a8892a) !important;
    border-radius: 2px;
    overflow: visible !important;
    white-space: normal !important;
    box-sizing: border-box;
    width: 100%;
    display: block;
}

/* 侧栏 widget 容器 */
.page_main .side-widget {
    margin-bottom: 28px;
}

/* 分类列表：更舒展的行高 */
.page_main .aside .side-cate > li > a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px !important;
    font-size: 14.5px !important;
    line-height: 1.45 !important;
}

.page_main .aside .side-cate > li > a em {
    flex: 0 0 auto;
    font-style: normal;
    font-size: 12.5px;
    opacity: .65;
}

/* ---------- 2.2 列表卡片：撑满主区宽度 ---------- */
.page_main .main {
    padding-bottom: 40px;
}

.blog_list,
.blog_list > ul,
.blog_list .blog-item,
.blog_list .item-wrap {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

/* 提升卡片可读性：图片固定、文字自适应 */
.blog_list .item-img {
    flex: 0 0 300px !important;
}

.blog_list .item-img .blog-img {
    height: 208px !important;
    border-radius: 3px;
}

.blog_list .item-title {
    font-size: 21px !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
}

.blog_list .item-detail {
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #6E675C !important;
    margin-bottom: 16px !important;
}

/* 分类筛选条与标题 */
.blog_head {
    margin-bottom: 28px;
}

.blog_head .page_title,
.main .page_title {
    font-size: 32px !important;
    line-height: 1.25 !important;
    margin: 0 0 12px !important;
    letter-spacing: -.01em;
}

.blog_desc {
    font-size: 15.5px !important;
    line-height: 1.75 !important;
    color: #6E675C !important;
    max-width: 760px;
}

.blog_filter {
    gap: 10px;
    margin-bottom: 30px;
    padding-bottom: 24px;
}

.filter_btn {
    padding: 8px 16px !important;
    font-size: 13.5px !important;
    border-radius: 2px;
}

/* ---------- 2.3 文章详情：正文 700px 居中 ---------- */
.blog-article,
.article_foot,
.article_cta {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.article_head,
.article_related {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- 2.4 中等屏：单列，取消侧栏 ---------- */
@media only screen and (max-width: 1100px) {
    .page_main > .layout {
        display: block !important;
        max-width: 100%;
        padding: 0 20px;
    }
    .page_main .aside,
    .page_main .main {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 0 !important;
    }
    .page_main .aside {
        margin-bottom: 34px;
    }
    .page_main .aside .side-cate {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .page_main .aside .side-cate > li > a {
        border: 1px solid #E8E2D6;
        background: #fff;
        border-radius: 2px;
        padding: 8px 14px !important;
    }
    .blog-article,
    .article_head,
    .article_foot,
    .article_related,
    .article_cta {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .blog_list .item-img {
        flex: 0 0 260px !important;
    }
}

/* ---------- 2.5 小屏：卡片改纵向 ---------- */
@media only screen and (max-width: 700px) {
    .page_main > .layout {
        padding: 0 16px;
    }
    .blog_list .item-wrap {
        flex-direction: column !important;
        gap: 14px !important;
    }
    .blog_list .item-img {
        flex: 1 1 auto !important;
        width: 100% !important;
    }
    .blog_list .item-img .blog-img {
        height: 200px !important;
    }
    .blog_list .item-title {
        font-size: 18px !important;
    }
    .main .page_title,
    .blog_head .page_title {
        font-size: 25px !important;
    }
}

/* ==========================================================================
   新闻 / 文章页布局 v3（断言式，压过 style.css 的 .layout width:95% 等）
   --------------------------------------------------------------------------
   根因：style.css 里存在多条 `.layout { width: 90%/95% }` 以及
         `.main { width: calc(100% - 280px) }` / `.aside { float:left; width:250px }`，
         它们与本地 table/table-cell 布局互相干扰，导致容器宽度被压缩、
         主区右侧留出大片空白。
   做法：对本页布局的所有关键尺寸加 !important，明确接管。
   ========================================================================== */

/* ---------- A. 容器：固定最大宽度，水平居中 ---------- */
.page_main > .layout {
    display: table !important;
    table-layout: fixed !important;
    width: 100% !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
    border-spacing: 0 !important;
    position: relative !important;
}

/* ---------- B. 侧栏：固定宽度，取消浮动 ---------- */
.page_main .aside,
.page_main > .layout > aside.aside {
    display: table-cell !important;
    float: none !important;
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    padding: 0 48px 0 0 !important;
    margin: 0 !important;
    vertical-align: top !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

/* ---------- C. 主区：占满剩余宽度，取消浮动与 calc ---------- */
.page_main .main,
.page_main > .layout > .main {
    display: table-cell !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 0 40px 0 !important;
    margin: 0 !important;
    vertical-align: top !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ---------- D. 列表：撑满主区 ---------- */
.page_main .main .blog_list,
.page_main .main .blog_list > ul,
.page_main .main .blog_list .blog-item,
.page_main .main .blog_list .item-wrap,
.page_main .main .blog_head,
.page_main .main .blog_filter {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* ---------- E. 卡片：图片固定，文字自适应 ---------- */
.page_main .main .blog_list .item-wrap {
    display: flex !important;
    gap: 26px !important;
    align-items: flex-start !important;
}

.page_main .main .blog_list .item-img {
    flex: 0 0 340px !important;
    width: 340px !important;
}

.page_main .main .blog_list .item-img .blog-img {
    width: 100% !important;
    height: 224px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 3px;
}

.page_main .main .blog_list .item-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* ---------- F. 响应式 ---------- */
@media only screen and (max-width: 1100px) {
    .page_main > .layout {
        display: block !important;
        max-width: 100% !important;
        padding: 0 20px !important;
    }
    .page_main .aside,
    .page_main > .layout > aside.aside {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 0 34px 0 !important;
    }
    .page_main .main,
    .page_main > .layout > .main {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 0 30px 0 !important;
    }
    .page_main .aside .side-cate {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .page_main .aside .side-cate > li > a {
        border: 1px solid #E8E2D6 !important;
        background: #fff !important;
        border-radius: 2px !important;
        padding: 8px 14px !important;
    }
    .blog-article,
    .article_head,
    .article_related,
    .article_foot,
    .article_cta {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media only screen and (max-width: 700px) {
    .page_main > .layout {
        padding: 0 16px !important;
    }
    .page_main .main .blog_list .item-wrap {
        flex-direction: column !important;
        gap: 14px !important;
    }
    .page_main .main .blog_list .item-img {
        flex: 1 1 auto !important;
        width: 100% !important;
    }
    .page_main .main .blog_list .item-img .blog-img {
        height: 200px !important;
    }
}

/* ==========================================================================
   新闻 / 文章页布局 v4 微调
   --------------------------------------------------------------------------
   v3 后容器 1180px 在宽屏（≥1600px）上左右留白偏大，观感「空」。
   v4：容器放宽到 1440px，侧栏右间距收紧，卡片图片加大，
       使列表页内容横向铺满，正文页仍保持 700px 阅读宽度。
   ========================================================================== */

/* 列表页主区：让卡片真正占满 */
.page_main .main .blog_list .item-wrap {
    gap: 30px !important;
}

/* 正文页（含 .blog-article 的页面）：主区收窄并居中，阅读舒适 */
.page_main .main:has(.blog-article) {
    max-width: 860px !important;
    margin: 0 auto !important;
}

/* 列表页标题区与筛选条 */
.page_main .main .blog_head .page_title {
    font-size: 34px !important;
    letter-spacing: -.015em !important;
}

.page_main .main .blog_desc {
    max-width: 820px !important;
}

/* 卡片更松弛 */
.page_main .main .blog_list .blog-item {
    padding-bottom: 34px !important;
    margin-bottom: 34px !important;
}

.page_main .main .blog_list .item-title {
    font-size: 22px !important;
    margin-bottom: 13px !important;
}

.page_main .main .blog_list .item-detail {
    font-size: 15.5px !important;
    line-height: 1.85 !important;
    color: #6E675C !important;
}

/* 分页条居中且留白 */
.page_main .main .page_bar {
    margin-top: 36px !important;
    text-align: center;
}

/* 相关文章卡片 */
.article_related .related_list > li > a h3 {
    font-size: 17px !important;
    line-height: 1.5 !important;
}

/* ==========================================================================
   新闻页布局 v5 —— 精准修复（CDP 实测后确定根因）
   --------------------------------------------------------------------------
   CDP 实测结果（视口 1569px）：
     布局容器 1440px，侧栏 250px，主区仅 571px（应为 1142px）
     缩略图 200px，文字区 321px —— 卡片被压扁

   根因（style.css，未加媒体查询，桌面端直接生效）：
     .blog-item .item-img {
         float: left;            ← 浮动破坏本地 flex 布局
         max-width: 200px;       ← 缩略图被限死在 200px
         padding: 5px;
         border: 1px solid #eee;
     }
     .blog-item .item-info .item-detail {
         display: -webkit-box; max-height: 9em; -webkit-line-clamp: 6;   ← 摘要被截 6 行
     }
   做法：以「.blog-item」为前缀提高特异性 + !important，彻底接管卡片布局。
   ========================================================================== */

/* ---------- A. 卡片：强制 flex，取消浮动 ---------- */
.page_main .main .blog_list .blog-item {
    padding: 0 0 34px !important;
    margin-bottom: 34px !important;
    overflow: visible !important;
    width: 100% !important;
}

.page_main .main .blog_list .blog-item .item-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 30px !important;
    width: 100% !important;
    margin: 0 !important;
}

/* ---------- B. 缩略图：取消 float / max-width:200px / border / padding ---------- */
.page_main .main .blog_list .blog-item .item-img {
    float: none !important;
    display: block !important;
    position: static !important;
    flex: 0 0 340px !important;
    width: 340px !important;
    max-width: 340px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
    line-height: 0 !important;
    box-sizing: border-box !important;
    border-radius: 3px;
}

.page_main .main .blog_list .blog-item .item-img .blog-img,
.page_main .main .blog_list .blog-item .item-img img {
    position: static !important;
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 230px !important;
    object-fit: cover !important;
    border: 0 !important;
    border-radius: 3px;
}

/* ---------- C. 文字区：占满剩余宽度，摘要不截断 ---------- */
.page_main .main .blog_list .blog-item .item-info {
    float: none !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    position: static !important;
}

.page_main .main .blog_list .blog-item .item-info .item-detail {
    display: block !important;
    -webkit-line-clamp: none !important;
    line-clamp: none !important;
    -webkit-box-orient: initial !important;
    max-height: none !important;
    overflow: visible !important;
    font-size: 15.5px !important;
    line-height: 1.85 !important;
    color: #6E675C !important;
    margin: 0 0 16px !important;
}

.page_main .main .blog_list .blog-item .item-info .item-title {
    font-size: 22px !important;
    line-height: 1.4 !important;
    margin: 0 0 13px !important;
}

/* 卡片分隔线：保留一条干净的细线 */
.page_main .main .blog_list .blog-item::before {
    display: none !important;
}

.page_main .main .blog_list .blog-item::after {
    display: none !important;
}

/* ---------- D. 主区：确保占满容器剩余宽度 ---------- */
.page_main .main {
    width: auto !important;
    max-width: none !important;
}

/* 正文页例外：把含文章正文的主区收窄居中 */
.page_main .main:has(> .blog-article),
.page_main .main:has(.article_head) {
    max-width: 900px !important;
    margin: 0 auto !important;
}

/* ---------- E. 窄屏：卡片纵向 ---------- */
@media only screen and (max-width: 860px) {
    .page_main .main .blog_list .blog-item .item-wrap {
        flex-direction: column !important;
        gap: 16px !important;
    }
    .page_main .main .blog_list .blog-item .item-img {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .page_main .main .blog_list .blog-item .item-img .blog-img {
        height: 220px !important;
    }
    .page_main .main:has(> .blog-article),
    .page_main .main:has(.article_head) {
        max-width: 100% !important;
    }
}

/* ==========================================================================
   新闻页布局 v6 —— 修正 table-cell 宽度算法（CDP 实测确认）
   --------------------------------------------------------------------------
   CDP 实测：.layout 宽 1440px，.aside 250px，但 .main 只有 571px。
   .layout 只有 2 个子元素，剩余 571px 无法解释 —— 根因是：
     table-layout: fixed 下，table-cell 设 width:auto 会按「内容宽度」计算，
     不会自动分配剩余空间。
   修复：主区改 width:100%（固定表格布局下即「占满剩余列宽」）。
   ========================================================================== */

.page_main > .layout > .main,
.page_main .main {
    display: table-cell !important;
    float: none !important;
    width: 100% !important;      /* 关键：占满剩余列宽 */
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 0 40px 0 !important;
    margin: 0 !important;
    vertical-align: top !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* 侧栏保持固定宽度（固定表格布局下，首个单元格宽度即列宽） */
.page_main > .layout > aside.aside,
.page_main .aside {
    display: table-cell !important;
    float: none !important;
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    padding: 0 48px 0 0 !important;
    margin: 0 !important;
    vertical-align: top !important;
    box-sizing: border-box !important;
}

/* 正文页：主区收窄居中（此时不再需要占满） */
.page_main > .layout > .main:has(> .blog-article),
.page_main > .layout > .main:has(.article_head) {
    width: 100% !important;
}

@media only screen and (max-width: 1100px) {
    .page_main > .layout > .main,
    .page_main .main {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 0 30px 0 !important;
    }
    .page_main > .layout > aside.aside,
    .page_main .aside {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 0 34px 0 !important;
    }
}

/* ==========================================================================
   文章页收尾：封面图与正文同宽，避免头重脚轻
   ========================================================================== */

.page_main .main .blog-article .article_thumb,
.page_main .main .blog-article > img:first-child,
.page_main .main .blog-article img {
    display: block !important;
    width: 100% !important;
    max-width: 700px !important;
    height: auto !important;
    max-height: 420px !important;
    object-fit: cover !important;
    margin: 0 0 32px !important;
    border-radius: 3px;
}

/* 文章标题区与正文左边缘对齐 */
.page_main .main:has(.article_head) .article_head,
.page_main .main:has(.article_head) .blog-article,
.page_main .main:has(.article_head) .article_foot,
.page_main .main:has(.article_head) .article_cta {
    max-width: 700px !important;
}

.page_main .main:has(.article_head) .article_head,
.page_main .main:has(.article_head) .article_related {
    max-width: 820px !important;
}

/* 文章主区整体居中 */
.page_main .main:has(.article_head) {
    max-width: 820px !important;
    margin: 0 auto !important;
    padding-top: 8px !important;
}

/* ==========================================================================
   侧栏导航放大（CDP 实测：链接字号 14.5px / 行高 21px，偏小）
   --------------------------------------------------------------------------
   调整：侧栏 250 -> 285px，链接字号 14.5 -> 16px，行高与内距同步加大，
         标题 14 -> 15.5px，数量 12.5 -> 13.5px。
         并区分「当前分类（金色底）」与「其他分类（深色字）」。
   ========================================================================== */

/* ---------- A. 侧栏宽度 ---------- */
.page_main > .layout > aside.aside,
.page_main .aside {
    width: 285px !important;
    min-width: 285px !important;
    max-width: 285px !important;
    padding: 0 52px 0 0 !important;
}

/* ---------- B. 标题：稍大，字距更清晰 ---------- */
.page_main .side-tit-bar .side-tit,
.page_main .side-tit {
    font-size: 15.5px !important;
    letter-spacing: .07em !important;
    padding: 16px 18px 16px 20px !important;
    line-height: 1.45 !important;
}

/* ---------- C. 分类列表：整体放大 ---------- */
.page_main .aside .side-cate {
    padding: 8px 0 !important;
}

.page_main .aside .side-cate > li {
    margin-bottom: 2px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

.page_main .aside .side-cate > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 13px 16px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #3F3A33 !important;           /* 未选中：深墨色 */
    border-radius: 2px;
    transition: background .2s ease, color .2s ease;
}

.page_main .aside .side-cate > li > a:hover {
    color: var(--hc-gold, #a8892a) !important;
    background: #FAF8F2 !important;
}

/* 当前分类：金色底 + 白字（更醒目） */
.page_main .aside .side-cate > li.current-menu-parent > a,
.page_main .aside .side-cate > li.current-menu-item > a {
    color: #FFFFFF !important;
    background: var(--hc-gold, #a8892a) !important;
    font-weight: 700 !important;
}

.page_main .aside .side-cate > li.current-menu-parent > a em,
.page_main .aside .side-cate > li.current-menu-item > a em {
    color: #FFFFFF !important;
    opacity: .85 !important;
}

/* ---------- D. 数量角标 ---------- */
.page_main .aside .side-cate > li > a em {
    flex: 0 0 auto !important;
    font-style: normal !important;
    font-size: 13.5px !important;
    opacity: .6;
}

/* ---------- E. 热销产品项同步放大 ---------- */
.page_main .aside .side-pro li a {
    font-size: 15px !important;
    line-height: 1.5 !important;
    padding: 10px 0 !important;
}

.page_main .aside .side-pro .item_title,
.page_main .aside .side_product_item h3 {
    font-size: 15px !important;
    line-height: 1.45 !important;
}

/* 侧栏图片略大 */
.page_main .aside .side-pro img,
.page_main .aside .side_product_item img {
    border-radius: 2px;
}

/* ---------- F. widget 间距 ---------- */
.page_main .aside .side-widget {
    margin-bottom: 32px !important;
}

.page_main .aside .side-widget + .side-widget {
    margin-top: 32px !important;
}

/* ---------- G. 窄屏复位 ---------- */
@media only screen and (max-width: 1100px) {
    .page_main > .layout > aside.aside,
    .page_main .aside {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    .page_main .aside .side-cate > li > a {
        font-size: 15px !important;
        padding: 10px 16px !important;
    }
}

/* ==========================================================================
   修复：文章排版规则误伤 Beaver Builder 页面
   --------------------------------------------------------------------------
   问题：About Us / Contact Us / FAQs 的正文容器 class 也是 .blog-article，
         它们的 DOM 结构是  .layout > article.entry.blog-article
         （没有 .main，也没有 aside.aside），
         却被无差别的 .blog-article { max-width:700px; margin:auto } 压成窄列，
         页面上出现「左侧空白 + 右侧窄文字」的错乱。
   做法：
     1) 用更高特异性把排版规则限定到「.page_main .main .blog-article」（新闻文章页）
     2) 对其他页面的 .blog-article 复位为全宽、无居中
     3) 首页客户评价等其它用到 .blog-article 的地方同样不受影响
   ========================================================================== */

/* ---------- A. 复位：没有 .main 容器的页面，正文恢复全宽 ---------- */
.page_main > .layout > .blog-article,
.page_main .blog-article:not(.page_main .main .blog-article),
.entry.blog-article {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

/* Beaver Builder 内层容器同样复位 */
.entry.blog-article .fl-builder-content,
.entry.blog-article .fl-row-content,
.entry.blog-article .fl-col-content {
    max-width: none !important;
    width: 100% !important;
}

/* 正文段落的限宽只作用于内部文字块，不影响整体布局 */
.entry.blog-article .fl-rich-text {
    max-width: 100% !important;
}

/* ---------- B. 新闻文章页：把排版规则限定在 .main 内部 ---------- */
.page_main .main .blog-article,
.page_main .main .blog-article > p,
.page_main .main .blog-article h2,
.page_main .main .blog-article h3,
.page_main .main .blog-article ul,
.page_main .main .blog-article ol,
.page_main .main .blog-article li,
.page_main .main .blog-article blockquote,
.page_main .main .blog-article table {
    /* 继承既有排版（见上文 .blog-article 规则），此处仅确保作用域正确 */
}

.page_main .main .blog-article {
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.page_main .main .article_foot,
.page_main .main .article_cta {
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.page_main .main .article_head,
.page_main .main .article_related {
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ---------- C. 文章排版样式只在新闻文章页生效 ---------- */
.page_main .main .blog-article {
    font-size: 17px;
    line-height: 2.0;
    color: #3F3A33;
}

.page_main .main .blog-article p {
    margin: 0 0 1.7em;
}

.page_main .main .blog-article > p:first-of-type {
    font-size: 18.5px;
    line-height: 1.95;
    color: #2E2A24;
}

.page_main .main .blog-article h2 {
    margin: 2.6em 0 1em;
    font-size: 26px;
    line-height: 1.35;
    color: #2E2A24;
    position: relative;
    padding-bottom: .5em;
}

.page_main .main .blog-article h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 52px;
    height: 3px;
    background: var(--hc-gold, #a8892a);
}

.page_main .main .blog-article h3 {
    margin: 2.1em 0 .8em;
    font-size: 20px;
    line-height: 1.45;
    color: #2E2A24;
}

/* ---------- D. Beaver Builder 页面：正文恢复 style.css 原有字号 ---------- */

/* 不要在 BB 页面的 h2 上画金色装饰线 */
.entry.blog-article h2::after {
    content: none !important;
    display: none !important;
}

/* ==========================================================================
   修复：Beaver Builder 页面正文字号（About Us / Contact Us / FAQs）
   --------------------------------------------------------------------------
   问题：style.css 里 .entry p { font-size:18px; line-height:1.8 } 是这些页面
         正文的原有字号；我先前为隔离新闻页排版加的
         `.entry.blog-article p { font-size: inherit }` 把它覆盖成了 14px
         （继承自 body），导致 About Us 文字明显变小。
   修复：显式恢复 18px / 1.8 行高，与改动前一致。
   ========================================================================== */

.page_main > .layout > .blog-article,
.page_main > .layout > .blog-article p,
.page_main > .layout > .blog-article li,
.entry.blog-article > p,
.entry.blog-article p,
.entry.blog-article li,
.entry.blog-article .fl-rich-text p {
    font-size: 18px !important;
    line-height: 1.8 !important;
}

/* 列表项稍小一点，与原站一致 */
.entry.blog-article li {
    font-size: 17px !important;
    line-height: 1.75 !important;
}

/* 标题层级保持原样（由各页 layout.css 控制），这里不做覆盖 */
.entry.blog-article .fl-heading,
.entry.blog-article .fl-heading-text {
    font-size: inherit;
    line-height: inherit;
}

/* 表格内文字 */
.entry.blog-article table th,
.entry.blog-article table td,
.entry.blog-article table p {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* 引用块 */
.entry.blog-article blockquote,
.entry.blog-article blockquote p {
    font-size: 17px !important;
    line-height: 1.8 !important;
}

/* 链接与强调保持同字号 */
.entry.blog-article a,
.entry.blog-article strong {
    font-size: inherit !important;
}

/* 窄屏适当缩小，避免行过长 */
@media only screen and (max-width: 768px) {
    .entry.blog-article > p,
    .entry.blog-article p,
    .entry.blog-article .fl-rich-text p {
        font-size: 16.5px !important;
        line-height: 1.8 !important;
    }
}

/* ==========================================================================
   作用域收敛：.blog-article 规则只作用于新闻文章页
   --------------------------------------------------------------------------
   问题回顾：
     1) About Us / Contact Us / FAQs 的正文容器 class 也是 .blog-article，
        但 DOM 结构是 .layout > article.entry.blog-article（无 .main、
        无 aside.aside），因此被新闻页的排版规则误伤：
          · max-width:700px + margin:auto  → 内容被压成窄列
          · font-family: Lora 衬线体        → 标题字体变了
          · font-size / line-height         → 正文字号变了
   做法：不再依赖「无差别的 .blog-article」，改为
         A. 新闻页排版只命中  .page_main .main .blog-article
         B. Beaver Builder 页面显式复位到原站取值
   ========================================================================== */

/* ---------- A. 新闻文章页（有 .main 容器）---------- */
.page_main .main .blog-article,
.page_main .main .blog-article h1,
.page_main .main .blog-article h2,
.page_main .main .blog-article h3 {
    font-family: 'Lora', Georgia, 'Times New Roman', serif !important;
}

.page_main .main .blog-article {
    font-size: 17px !important;
    line-height: 2.0 !important;
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ---------- B. Beaver Builder 页面复位 ---------- */
/* B1. 容器：全宽、不居中、不限宽 */
.page_main > .layout > .blog-article,
.page_main > .layout > article.blog-article,
.entry.blog-article {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
}

/* B2. 标题：恢复无衬线体（原站用 Nunito / 各页 layout.css 指定的字体） */
.entry.blog-article h1,
.entry.blog-article h2,
.entry.blog-article h3,
.entry.blog-article h4,
.entry.blog-article .fl-heading,
.entry.blog-article .fl-heading-text,
.entry.blog-article .fl-heading-text * {
    font-family: inherit !important;
    letter-spacing: normal !important;
}

/* B3. 正文与列表：恢复 18px / 1.8（style.css 的 .entry p 原值） */
.entry.blog-article > p,
.entry.blog-article p,
.entry.blog-article .fl-rich-text p {
    font-size: 18px !important;
    line-height: 1.8 !important;
}

.entry.blog-article li {
    font-size: 17px !important;
    line-height: 1.75 !important;
}

.entry.blog-article table th,
.entry.blog-article table td,
.entry.blog-article table p {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

.entry.blog-article blockquote,
.entry.blog-article blockquote p {
    font-size: 17px !important;
    line-height: 1.8 !important;
}

.entry.blog-article a,
.entry.blog-article strong,
.entry.blog-article em {
    font-size: inherit !important;
}

/* B4. 去掉新闻页专属装饰（BB 页面不该有） */
.entry.blog-article h2::after,
.entry.blog-article h3::after {
    content: none !important;
    display: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* B5. 段落间距恢复原值（style.css: .entry p { padding:8px 0 }） */
.entry.blog-article > p,
.entry.blog-article p {
    margin: 0 !important;
    padding: 8px 0 !important;
}

/* B6. 标题间距恢复（各页 layout.css 用 padding/margin 的 !important 控制，
       这里不覆盖，只清掉新闻页写死的 em 边距） */
.entry.blog-article h2,
.entry.blog-article h3,
.entry.blog-article h4 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ---------- C. 窄屏 ---------- */
@media only screen and (max-width: 768px) {
    .entry.blog-article > p,
    .entry.blog-article p,
    .entry.blog-article .fl-rich-text p {
        font-size: 16.5px !important;
        line-height: 1.8 !important;
    }
    .page_main .main .blog-article {
        font-size: 16px !important;
        line-height: 1.95 !important;
    }
}

/* ==========================================================================
   首页留言表单样式（原站用 globalso 外部表单，已移除，改为本地表单）
   ========================================================================== */
.hc-inquiry-form {
    display: block;
    font-family: 'Nunito-Regular', Arial, sans-serif;
}

.hc-form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.hc-field {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.hc-field-full {
    margin-bottom: 16px;
}

.hc-field label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #5A544A;
    letter-spacing: .02em;
}

.hc-field label .req {
    color: var(--hc-gold, #a8892a);
}

.hc-field input[type="text"],
.hc-field input[type="email"],
.hc-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #E2DCCE;
    border-radius: 2px;
    background: #FFFFFF;
    color: #2E2A24;
    font-family: inherit;
    font-size: 14.5px;
    line-height: 1.5;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.hc-field input::placeholder,
.hc-field textarea::placeholder {
    color: #B3ABA0;
}

.hc-field input:focus,
.hc-field textarea:focus {
    outline: none;
    border-color: var(--hc-gold, #a8892a);
    box-shadow: 0 0 0 3px rgba(168, 137, 42, .12);
}

.hc-field textarea {
    resize: vertical;
    min-height: 108px;
}

/* 蜜罐字段：视觉隐藏，防止机器人填写 */
.hc-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.hc-submit {
    display: inline-block;
    width: auto;
    min-width: 240px;
    padding: 15px 32px;
    border: 0;
    border-radius: 2px;
    background: var(--hc-gold, #a8892a);
    color: #FFFFFF;
    font-family: 'Nunito-Bold', Arial, sans-serif;
    font-size: 16px;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease;
}

.hc-submit:hover {
    background: var(--hc-gold-dark, #8C701F);
}

.hc-submit:active {
    transform: translateY(1px);
}

.hc-submit:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.hc-form-note {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.6;
}

.hc-form-note.is-ok {
    color: #1F7A4C;
}

.hc-form-note.is-error {
    color: #C0392B;
}

/* 留言区整体：左文右表单 */
.index_message_main {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.index_message_main .index_message_item {
    flex: 0 0 42%;
    min-width: 0;
}

.index_message_main .index_message_inquiry {
    flex: 1 1 auto;
    min-width: 0;
}

@media only screen and (max-width: 900px) {
    .index_message_main {
        flex-direction: column;
        gap: 32px;
    }
    .index_message_main .index_message_item {
        flex: 1 1 auto;
        width: 100%;
    }
    .hc-form-row {
        flex-direction: column;
        gap: 14px;
    }
    .hc-submit {
        width: 100%;
        min-width: 0;
    }
}

/* ==========================================================================
   联系我们页：工厂视频封面（图片尺寸不变，叠加播放按钮，点击弹窗播放）
   ========================================================================== */

/* 封面容器：跟随原列宽，保持图片比例 */
.fl-photo-content.hc-video-photo {
    position: relative;
    display: block;
    width: 100%;
    line-height: 0;
    overflow: hidden;
    border-radius: 3px;
}

/* 整个封面可点击 */
.hc-video-cover {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    cursor: pointer;
    text-decoration: none;
    border-radius: 3px;
    overflow: hidden;
}

/* 封面图片：与原图一致的显示方式 */
.hc-video-cover .fl-photo-img,
.hc-video-cover img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 3px;
    transition: transform .5s ease;
}

.hc-video-cover:hover .fl-photo-img,
.hc-video-cover:hover img {
    transform: scale(1.03);
}

/* 播放按钮：居中圆形，品牌金 + 白色三角 */
.hc-play-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 92px;
    height: 92px;
    margin: -46px 0 0 -46px;
    border-radius: 50%;
    background: rgba(168, 137, 42, .92);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
    transition: background .25s ease, transform .25s ease;
    z-index: 2;
}

/* 白色三角形 */
.hc-play-btn::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    margin: -15px 0 0 -10px;
    border-style: solid;
    border-width: 15px 0 15px 24px;
    border-color: transparent transparent transparent #FFFFFF;
}

.hc-video-cover:hover .hc-play-btn {
    background: rgba(140, 112, 31, .96);
    transform: scale(1.08);
}

/* 封面底部提示文字 */
.hc-play-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 34px 20px 16px;
    background: linear-gradient(to top, rgba(0, 0, 0, .58), rgba(0, 0, 0, 0));
    color: #FFFFFF;
    font-family: 'Nunito-Bold', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: center;
    pointer-events: none;
}

/* 窄屏缩小播放按钮 */
@media only screen and (max-width: 900px) {
    .hc-play-btn {
        width: 68px;
        height: 68px;
        margin: -34px 0 0 -34px;
    }
    .hc-play-btn::after {
        margin: -11px 0 0 -7px;
        border-width: 11px 0 11px 18px;
    }
    .hc-play-text {
        padding: 26px 14px 12px;
        font-size: 13px;
    }
}

@media only screen and (max-width: 600px) {
    .hc-play-btn {
        width: 54px;
        height: 54px;
        margin: -27px 0 0 -27px;
    }
    .hc-play-btn::after {
        margin: -9px 0 0 -6px;
        border-width: 9px 0 9px 14px;
    }
    .hc-play-text {
        display: none;
    }
}

/* 视频封面：固定 16:9 比例（与视频画幅一致），图片 fill 裁剪，尺寸不变 */
.hc-video-photo.hc-video-16x9 {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 3px;
    background: #000;
}

.hc-video-photo.hc-video-16x9 .hc-video-cover {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.hc-video-photo.hc-video-16x9 .hc-video-cover img,
.hc-video-photo.hc-video-16x9 .hc-video-cover .fl-photo-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 3px;
}

/* 不支持 aspect-ratio 的旧浏览器兜底 */
@supports not (aspect-ratio: 16 / 9) {
    .hc-video-photo.hc-video-16x9 {
        height: 0;
        padding-bottom: 56.25%;
    }
}

/* ================================================================
   布局修复（2026-02 全站 PC / 移动端排查）
   排查发现 4 类真实异常，这里逐一修掉。
   ================================================================ */

/* ----------------------------------------------------------------
   1) 内页（about-us 等）PC 端横向溢出
   根因：Beaver Builder 的 uploads/bb-plugin/cache/824-layout.css 里有 8 个节点用了
        「全宽行」技巧，成对出现：
          .fl-node-XXXX > .fl-row-content-wrap { margin-left:-410px; margin-right:-410px; }
          .fl-node-XXXX > .fl-row-content-wrap { padding-left:400px; padding-right:400px; }
        margin 把行拉宽、padding 再把内容推回来，两者必须成对；
        原本按官网 1510px 容器算的，在我们更窄的容器里会撑出横向滚动。

   ⚠ 重要：**不能**全局清零 .fl-row-content-wrap 的 margin。
     BB 里另有 757 处 `margin-left:-10px` 是正常栏间距（列间负外边距），
     全局清零会破坏所有多列布局的间距 —— 这是之前踩过的坑。

   正确做法：只针对这 8 个用了大负边距的节点，把 margin 与配套 padding
   一起收掉，内容宽度与设计意图基本一致（差 20px 以内）且不产生溢出。
   ---------------------------------------------------------------- */
.fl-node-6482e3f8bbaca > .fl-row-content-wrap,
.fl-node-6482e87728950 > .fl-row-content-wrap,
.fl-node-6482f1a90619c > .fl-row-content-wrap,
.fl-node-6482f992b0f8e > .fl-row-content-wrap,
.fl-node-648aef28233f3 > .fl-row-content-wrap,
.fl-node-652c962217737 > .fl-row-content-wrap,
.fl-node-652c96ef7365a > .fl-row-content-wrap,
.fl-node-652cf0a5569a5 > .fl-row-content-wrap {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
/* 行内容不要超过外层容器 */
.fl-row-content {
    max-width: 100% !important;
    box-sizing: border-box;
}
/* 内页主体兜底：任何残留溢出都不产生横向滚动条 */
.page_main,
.web_main {
    overflow-x: clip;
}

/* ----------------------------------------------------------------
   2) 所有内页面包屑上方的超大标题文字溢出
   根因：.sys_sub_head .pagnation_title { position:absolute; width:100%; right:10% }
        width:100% + right:10% 会让元素从 -10% 开始，向左溢出 18~143px。
   说明：该标题已被设为全透明（color: rgba(0,0,0,0)），本就不显示，
        但仍参与布局计算。这里把它限缩到容器内。
   ---------------------------------------------------------------- */
.sys_sub_head .pagnation_title {
    left: 0;
    right: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px;
}

/* ----------------------------------------------------------------
   3) 预加载遮罩在移动端/窄屏撑宽页面
   根因：#ajax-loading-screen 的 .mask-left/.mask-right 是覆盖视口的宽条，
        加载完成后 opacity:0 但仍在文档流外撑大 scrollWidth。
   处理：加载完成后彻底移出渲染（visibility + pointer-events）。
   ---------------------------------------------------------------- */
#ajax-loading-screen.loaded {
    visibility: hidden !important;
    pointer-events: none !important;
}
#ajax-loading-screen.loaded .mask-top,
#ajax-loading-screen.loaded .mask-right,
#ajax-loading-screen.loaded .mask-bottom,
#ajax-loading-screen.loaded .mask-left {
    visibility: hidden !important;
}

/* ----------------------------------------------------------------
   4) Products 大型下拉在 PC 端右侧溢出 72px
   根因：.head_nav li.fd_nav > ul 宽 1420px、left:-250px，
        在 1024~1440px 视口下右边超出。
   处理：宽度按视口自适应并限制在容器内。
   ---------------------------------------------------------------- */
@media only screen and (max-width: 1500px) {
    .head_nav li.fd_nav > ul {
        width: calc(100vw - 60px);
        max-width: 100%;
        left: 0;
    }
}

/* ----------------------------------------------------------------
   5) 移动端分类/搜索结果网格轻微越界 4px
   ---------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
    .product_list_items,
    .items_list ul,
    .product_items {
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
        max-width: 100%;
    }
    .product_list_item {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* ----------------------------------------------------------------
   6) 全局兜底：任何页面都不出现横向滚动条
   （挂在 html 上，避免 body overflow-x:hidden 造成的 fixed 定位失效）
   ---------------------------------------------------------------- */
html {
    overflow-x: hidden;
}

/* ================================================================
   首页 banner 主标题（H1）
   SEO：首页需要一个含核心关键词的 H1。
   位置：banner 轮播图上层的文字层，不占额外高度，不改变原布局。
   交互：pointer-events:none，不遮挡轮播点击与切换。
   ================================================================ */
.slider_banner {
    position: relative;
}
.slider_banner .banner_hero_text {
    position: absolute;
    top: 13%;
    left: 6%;
    z-index: 5;
    max-width: 620px;
    text-align: left;
    pointer-events: none;
}
.slider_banner .banner_hero_text h1 {
    margin: 0 0 14px;
    padding: 0;
    font-size: 40px;
    line-height: 1.22;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .62), 0 1px 3px rgba(0, 0, 0, .5);
}
.slider_banner .banner_hero_text p {
    margin: 0;
    padding: 0;
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: .02em;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}
/* 中屏 */
@media only screen and (max-width: 1400px) {
    .slider_banner .banner_hero_text h1 { font-size: 34px; }
    .slider_banner .banner_hero_text p  { font-size: 15px; }
}
/* 平板 */
@media only screen and (max-width: 1100px) {
    .slider_banner .banner_hero_text {
        top: 12%;
        left: 5%;
        max-width: 78%;
    }
    .slider_banner .banner_hero_text h1 { font-size: 27px; margin-bottom: 10px; }
    .slider_banner .banner_hero_text p  { font-size: 13px; }
}
/* 手机 */
@media only screen and (max-width: 768px) {
    .slider_banner .banner_hero_text {
        top: 0;
        left: 0;
        right: 0;
        max-width: none;
        padding: 12px 14px 26px;
        background: linear-gradient(180deg,
            rgba(0, 0, 0, .68) 0%,
            rgba(0, 0, 0, .40) 55%,
            rgba(0, 0, 0, 0) 100%);
    }
    .slider_banner .banner_hero_text h1 {
        font-size: 16px;
        line-height: 1.32;
        margin-bottom: 5px;
        text-shadow: 0 1px 8px rgba(0, 0, 0, .75);
    }
    .slider_banner .banner_hero_text p {
        font-size: 10.5px;
        line-height: 1.4;
        text-shadow: 0 1px 6px rgba(0, 0, 0, .75);
    }
}
@media only screen and (max-width: 420px) {
    .slider_banner .banner_hero_text h1 { font-size: 14.5px; }
    .slider_banner .banner_hero_text p  { font-size: 10px; }
}

/* ================================================================
   分类页导语（SEO 正文 + H1）
   每个分类页在产品网格前有一段独有正文，提供可索引文本、
   承载 H1，并向采购商说明材质 / 工艺 / 定制能力。
   ================================================================ */
.page_main .main .cate_intro {
    margin: 0 0 30px;
    padding: 0 0 26px;
    border-bottom: 1px solid #eee;
}
.page_main .main .cate_intro h1,
.page_main .main .cate_intro .cate_h1 {
    margin: 0 0 16px;
    padding: 0;
    font-size: 30px;
    line-height: 1.32;
    font-weight: 700;
    color: #010101;
}
.page_main .main .cate_intro p {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.85;
    color: #555;
}
.page_main .main .cate_intro p:last-child { margin-bottom: 0; }
.page_main .main .cate_intro ul {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
}
.page_main .main .cate_intro ul li {
    position: relative;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.7;
    color: #444;
}
.page_main .main .cate_intro ul li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 7px;
    height: 7px;
    background: #ff760c;
    border-radius: 1px;
}

/* 分类暂无产品时的引导块 */
.page_main .main .cate_empty {
    margin: 10px 0 30px;
    padding: 40px 30px;
    text-align: center;
    background: #fafafa;
    border: 1px dashed #e0e0e0;
}
.page_main .main .cate_empty .cate_empty_tit {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 700;
    color: #333;
}
.page_main .main .cate_empty p {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: #777;
}
.page_main .main .cate_empty a { color: #ff760c; }

@media only screen and (max-width: 1100px) {
    .page_main .main .cate_intro h1,
    .page_main .main .cate_intro .cate_h1 { font-size: 24px; }
    .page_main .main .cate_intro p { font-size: 14.5px; }
}
@media only screen and (max-width: 768px) {
    .page_main .main .cate_intro { margin-bottom: 22px; padding-bottom: 20px; }
    .page_main .main .cate_intro h1,
    .page_main .main .cate_intro .cate_h1 { font-size: 20px; margin-bottom: 12px; }
    .page_main .main .cate_intro p { font-size: 14px; line-height: 1.8; }
    .page_main .main .cate_intro ul { flex-direction: column; gap: 4px; }
    .page_main .main .cate_empty { padding: 28px 18px; }
}

/* ================================================================
   图片容器预留空间（改善 CLS，Core Web Vitals 指标之一）
   图片加载前先占位，避免加载完成时把下方内容顶下去。
   用 aspect-ratio 而不是给每个 <img> 写 width/height，
   这样模板动态输出的图片也能自动受益。
   ================================================================ */

/* 产品网格卡片：统一 1:1 占位 */
.product_list_item .item_img {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    line-height: 0;
}
.product_list_item .item_img a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.product_list_item .item_img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 首页 New In 轮播卡片 */
.index_new_in .item_img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.index_new_in .item_img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 首页「What Products We can do」轮播卡片 */
.index_product .item_img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.index_product .item_img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 首页「OEM 定制案例」大图 */
.index_craft .item_img {
    aspect-ratio: 7 / 6;
    overflow: hidden;
}
.index_craft .item_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 首页「All-In-One Services」轮播卡片 */
.index_service .item_img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.index_service .item_img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 侧栏产品轮播（列表页） */
.side_product_item .item-img {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.side_product_item .item-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 相关产品轮播（产品页） */
.goods-may-like .product_item .item_img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.goods-may-like .product_item .item_img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ================================================================
   首页证书图：取消点击放大
   原站证书图点击弹 fancybox 灯箱（放大显示）。按需求已禁用该行为，
   并去掉了 <a> 上的 href —— 否则浏览器会直接跳到图片原始地址、
   整屏显示放大后的证书。
   这里补回布局：原 style.css 靠 .index_certificate_img.fancybox 提供
   display:block，fancybox 类去掉后需要重新声明。
   ================================================================ */
.index_certificate_img {
    display: block !important;
    cursor: default;
}
.index_certificate_img img {
    display: block;
    width: 100%;
    height: auto;
}

/* ================================================================
   产品详情页「Why Choose Us」信任要素区
   原站在 Product Detail 之后有 8 项（认证 + 服务承诺），
   重建时遗漏，这里按原结构补回（4 列 × 2 行）。
   ================================================================ */
.page_main .tab-panel-content .prod-why {
    margin: 46px 0 0;
    padding: 38px 0 8px;
    border-top: 1px solid #ececec;
}
.page_main .tab-panel-content .prod-why-title {
    position: relative;
    margin: 0 0 30px;
    padding: 0 0 0 15px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    color: #010101;
}
.page_main .tab-panel-content .prod-why-title:before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 4px;
    background: #a8892a;
}
.page_main .tab-panel-content .prod-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 34px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.page_main .tab-panel-content .prod-why-grid > li {
    text-align: center;
}
.page_main .tab-panel-content .prod-why-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 92px;
    margin: 0 0 14px;
    line-height: 0;
}
.page_main .tab-panel-content .prod-why-icon img {
    max-width: 92px;
    max-height: 92px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.page_main .tab-panel-content .prod-why-grid p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: #777;
}
.page_main .tab-panel-content .prod-why-grid p strong {
    display: block;
    margin-bottom: 3px;
    font-size: 15px;
    font-weight: 700;
    color: #222;
}

/* 平板：2 列 */
@media only screen and (max-width: 1024px) {
    .page_main .tab-panel-content .prod-why-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 26px 18px;
    }
    .page_main .tab-panel-content .prod-why-title { font-size: 21px; margin-bottom: 24px; }
}
/* 手机 */
@media only screen and (max-width: 768px) {
    .page_main .tab-panel-content .prod-why { margin-top: 32px; padding-top: 26px; }
    .page_main .tab-panel-content .prod-why-title { font-size: 19px; margin-bottom: 20px; padding-left: 12px; }
    .page_main .tab-panel-content .prod-why-grid { gap: 22px 14px; }
    .page_main .tab-panel-content .prod-why-icon { height: 76px; margin-bottom: 10px; }
    .page_main .tab-panel-content .prod-why-icon img { max-width: 76px; max-height: 76px; }
    .page_main .tab-panel-content .prod-why-grid p { font-size: 13px; }
    .page_main .tab-panel-content .prod-why-grid p strong { font-size: 13.5px; }
}

/* ================================================================
   产品详情页「Previous / Next」产品导航（原站有，补回）
   作用：产品页之间形成内链，降低爬取深度
   注意：这一段挂在 .tab-content-wrap 下（与 inquiry-form 同级），
        不在 .tab-panel-content 里，所以选择器不能带 tab-panel-content。
   ================================================================ */
.page_main .product-detail .prod-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 40px;
    justify-content: space-between;
    margin: 26px 0 34px;
    padding: 20px 0 0;
    border-top: 1px solid #ececec;
}
.page_main .product-detail .prod-nav-item {
    display: flex;
    align-items: baseline;
    min-width: 0;
    max-width: 48%;
}
.page_main .product-detail .prod-nav-item.prod-nav-next {
    margin-left: auto;
    text-align: right;
    flex-direction: row-reverse;
}
.page_main .product-detail .prod-nav-label {
    flex: 0 0 auto;
    margin-right: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #a8892a;
    white-space: nowrap;
}
.page_main .product-detail .prod-nav-item.prod-nav-next .prod-nav-label {
    margin-right: 0;
    margin-left: 8px;
}
.page_main .product-detail .prod-nav a {
    display: block;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.5;
    color: #555;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .2s;
}
.page_main .product-detail .prod-nav a:hover { color: #a8892a; }

@media only screen and (max-width: 768px) {
    .page_main .product-detail .prod-nav {
        gap: 12px;
        margin-bottom: 20px;
        padding-top: 16px;
    }
    .page_main .product-detail .prod-nav-item { max-width: 100%; flex: 1 1 100%; }
    .page_main .product-detail .prod-nav-item.prod-nav-next {
        flex-direction: row;
        justify-content: flex-start;
        margin-left: 0;
        text-align: left;
    }
    .page_main .product-detail .prod-nav-item.prod-nav-next .prod-nav-label {
        margin-right: 8px;
        margin-left: 0;
        order: -1;
    }
    .page_main .product-detail .prod-nav a { font-size: 13px; white-space: normal; }
}