/* =========================================================
   Archi-Tech — custom theme on top of Clemo template
   ========================================================= */

:root {
    --brand-dark: #16283c;
    --brand-blue: #1f4e79;
    --brand-accent: #e8842c;
    --brand-grey: #f4f6f8;
}

/* ---------- generic ---------- */
body { color: #444; }
.head_title h1 { color: #16283c; letter-spacing: 1px; }
.head_title p.section-sub { color: #888; margin-top: 15px; font-size: 1rem; }
.btn-accent,
a.btn.btn-accent {
    background: #e8842c;
    color: #fff !important;
    border: 2px solid #e8842c;
}
.btn-accent:hover, a.btn.btn-accent:hover { background: transparent; color: #e8842c !important; }

/* ---------- header / nav ---------- */
.main_menu_bg { height: auto; min-height: 155px; }
.main_menu_bg .nave_menu { margin-top: 8px; }
.navbar-brand { height: auto; padding: 10px 15px; }
.navbar-brand > img { max-height: 132px; width: auto; }
.main_menu_bg .navbar-nav > li > a { text-transform: uppercase; font-weight: 700; }

/* language switcher */
.lang-switch > a { color: #1f4e79 !important; }
.lang-switch .dropdown-menu { min-width: 150px; }
.lang-switch .dropdown-menu > li > a { line-height: 2.6; font-size: 0.85rem; }
.lang-switch .dropdown-menu > li.active > a { color: #e8842c; font-weight: 700; }
.lang-flag { display: inline-block; margin-right: 6px; }

/* ---------- hero (homepage carousel) ---------- */
.main_home_slider { margin-top: 160px; }   /* clear the fixed header, same as subpages */

/* 完全移除 template 自带的米黄半透明 overlay，避免任何 specificity 隐患；
   直接 display:none 把这个装饰层关掉，让 slide 父级的 background-image 直接呈现。 */
.single_home_slider > .home-overlay { display: none !important; }
.main_home h2 {
    color: #fff; text-transform: uppercase; letter-spacing: 2px;
    font-size: clamp(1.9rem, 4.2vw, 3.4rem); line-height: 1.2;
    max-width: 100%; margin: 0 auto;
}
.main_home p.subtitle {
    color: #e8eef4; font-size: 1.35rem; line-height: 1.6;
    max-width: 760px; margin: 0 auto 10px; overflow-wrap: break-word;
}
.main_home .home_btn { margin-top: 14px; }
.main_home .home_btn a.btn {
    border: 2px solid #e8842c; background: #e8842c; color: #fff;
    text-transform: uppercase; letter-spacing: 1px;
}
.main_home .home_btn a.btn:hover { background: transparent; color: #fff; }
/* keep the hero height stable when the translated title wraps to more lines */
.main_home {
    min-height: 560px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* secondary page banner — FIXED height so the layout is identical in every
   language (a 2-line English title must not make the banner taller than a
   1-line Chinese title). Text is vertically centred inside the fixed box. */
.page-banner {
    background: linear-gradient(160deg, #0c1a2e 0%, #16304d 50%, #1a3d5c 100%);
    position: relative;
    margin-top: 160px;
    height: 260px;                 /* fixed → same height for all languages */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 15px;
    overflow: hidden;
}
.page-banner .container { position: relative; width: 100%; }
.page-banner .banner-overlay { position: absolute; inset: 0; background: rgba(10,22,36,.68); }
.page-banner h1 {
    color: #fff; position: relative; text-transform: uppercase; letter-spacing: 2px;
    font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.25;
    margin: 0 auto 10px; max-width: 960px;
    text-wrap: balance;
}
.page-banner p {
    color: #cfd9e2; position: relative;
    font-size: clamp(0.95rem, 1.6vw, 1.1rem); line-height: 1.4;
    margin: 0 auto; max-width: 960px;
}

/* scrolled header must stay solid — otherwise the banner shows through and the
   bottom border looks like a stray line across the banner (issue #2) */
.menu-scroll .main_menu_bg {
    background-color: #fff !important;
    border-bottom-color: transparent !important;
    height: auto;       /* release fixed 80px so the bar can grow with wrapped labels */
    min-height: 155px;   /* grow (not clip) if a wrapped label is taller than 80px */
}

/* ---------- about subpages: robust 2-column layout (fixes image/text overlap) ---------- */
.single_service_area .row { display: flex; flex-wrap: wrap; align-items: center; }
.single_service_area .row > [class*="col-"] {
    float: none;
    position: static !important;
    left: auto !important;
    right: auto !important;
}
.single_service { min-height: 0 !important; }
/* keep the desktop left/right alternation (2nd block image on the right),
   but let it collapse to image-on-top stacking on mobile (where flex-wrap applies) */
@media (min-width: 768px) {
    .single_service_area.margin-top-80 .row { flex-direction: row-reverse; }
}

/* ---------- products (service section reuse) ---------- */
.signle_service_left img { width: 100%; height: auto; box-shadow: 0 10px 30px rgba(22,40,60,.15); }
.single_service h2 { color: #16283c; }
.single_service h3 { color: #e8842c; }
.single_service ul.spec-list { margin: 15px 0 20px; padding-left: 0; list-style: none; }
.single_service ul.spec-list li { padding: 4px 0; color: #555; }
.single_service ul.spec-list li i { color: #e8842c; margin-right: 8px; }

/* product grid cards — uniform height so SVG placeholders and real photos align */
.single_mixi_portfolio { position: relative; overflow: hidden; aspect-ratio: 4/3; }
.single_mixi_portfolio img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Mg Anode Rod is a 1024x605 landscape photo — the wide aspect ratio makes
   it look noticeably larger than the other six (mostly square) cards when
   object-fit: cover stretches it to fill the 4/3 container. Shrink the
   image inside its container so all 7 cards read as the same size.
   Scoped to .cc-grid (Corrosion Control page) so the home page 2nd star
   card is not affected by this rule. */
.cc-grid > [class*="col-"]:nth-of-type(2) .single_mixi_portfolio img {
    width: 70%;
    height: 70%;
    object-fit: contain;
    margin: 15% auto 0;
    display: block;
}
/* CP Accessories page — fine-tune card image sizes (one-off user request).
   All 7 cards use the same 4/3 container + object-fit: cover, so we tweak
   the inner img width/height. Scoped via .cp-acc-grid so it never affects
   other mixcontent (home page, corrosion control, etc.). */
.cp-acc-grid > [class*="col-"]:nth-of-type(1) .single_mixi_portfolio img {
    width: 95%; height: 95%; object-fit: contain; margin: 2.5% auto 0; display: block;
}
.cp-acc-grid > [class*="col-"]:nth-of-type(2) .single_mixi_portfolio img {
    width: 115%; height: 115%; object-fit: cover; margin: -7.5% 0 0 -7.5%; display: block;
}
.cp-acc-grid > [class*="col-"]:nth-of-type(3) .single_mixi_portfolio img {
    width: 77%; height: 77%; object-fit: contain; margin: 11.5% auto 0; display: block;
}
.cp-acc-grid > [class*="col-"]:nth-of-type(6) .single_mixi_portfolio img {
    width: 97%; height: 97%; object-fit: contain; margin: 1.5% auto 0; display: block;
}
.cp-acc-grid > [class*="col-"]:nth-of-type(7) .single_mixi_portfolio img {
    width: 82%; height: 82%; object-fit: contain; margin: 9% auto 0; display: block;
}
.single_work_overlay, .single_work_overlay2 { padding-top: 18% !important; }

/* ---------- product gallery (replaces masonry) ----------
   Masonry positioned every tile absolutely BEFORE the images finished
   loading, so it measured zero height and stacked all tiles on top of
   each other (the overlap seen on desktop & mobile). A plain CSS grid
   lays the tiles out from normal flow and never overlaps, regardless of
   image load timing. */
.mixcontent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
.mixcontent > [class*="col-"] {
    width: auto !important;
    float: none !important;
    position: relative !important;
}
@media (max-width: 991px) {
    .mixcontent { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .mixcontent { grid-template-columns: 1fr; }
}

/* ---------- strengths (why choose us) ---------- */
.strengths { background: #16283c; }
.strengths .head_title h1 { color: #fff; }
.single-strength { padding: 30px 15px; margin-bottom: 20px; min-width: 0; }
.single-strength i { font-size: 3rem; color: #e8842c; margin-bottom: 18px; display: block; }
.single-strength h4 { color: #fff; text-transform: uppercase; margin-bottom: 12px; font-size: 0.92rem; letter-spacing: 0.2px; word-break: normal; overflow-wrap: break-word; white-space: normal; hyphens: none; line-height: 1.35; text-wrap: balance; }
.single-strength p { color: #a9b7c6; font-size: 0.9rem; line-height: 1.7; word-break: normal; overflow-wrap: break-word; white-space: normal; hyphens: none; max-width: 100%; }

/* stats bar */
.stats-bar { background: #1f4e79; padding: 40px 0; }
.stat-item { text-align: center; color: #fff; padding: 10px 0; }
.stat-item .num { font-size: 2.6rem; font-weight: 700; color: #ffb36b; font-family: 'Montserrat', sans-serif; }
.stat-item .lbl { text-transform: uppercase; letter-spacing: 1px; font-size: 0.85rem; color: #d5e2ee; }

/* ---------- spec table ---------- */
.spec-table { width: 100%; margin: 20px 0 30px; border-collapse: collapse; font-size: 0.9rem; }
.spec-table th, .spec-table td { border: 1px solid #dde4ea; padding: 10px 14px; text-align: left; }
.spec-table th { background: #1f4e79; color: #fff; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; }
.spec-table tr:nth-child(even) td { background: #f4f6f8; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.product-detail h2 { color: #16283c; margin-bottom: 10px; line-height: 1.25; overflow: visible; }
.product-detail h3 { color: #e8842c; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px; margin: 30px 0 10px; line-height: 1.3; overflow: visible; }
.product-detail p { line-height: 1.9; }
/* 正文 hero 区图文两栏：垂直居中对齐，文字段之间留呼吸 */
.product-detail > .row > [class*="col-"] { display: flex; flex-direction: column; }
.product-detail > .row > [class*="col-"] > p { margin-top: 0; }
.product-detail > .row > [class*="col-"] > p + p { margin-top: 14px; }
/* col-sm-5 图片栏：让图占满 col-sm-5 整宽（取消旧 380px 限制），
   配合提高 photo-sub max-height 放大产品主体 */
.product-detail > .row > .col-sm-5 .product-photos { max-width: 100%; margin-left: 0; margin-right: 0; width: 100%; }
.product-detail > .row > .col-sm-7 { padding-left: 18px; }
@media (max-width: 768px) {
    .product-detail > .row > .col-sm-7 { padding-left: 0; }
    .product-detail > .row > .col-sm-5 .product-photos { max-width: 100%; }
}
.product-detail .main-photo { width: 85%; box-shadow: 0 10px 30px rgba(22,40,60,.15); margin-bottom: 25px; }
.product-detail .thumb-row img { width: 100%; margin-bottom: 15px; cursor: pointer; border: 2px solid transparent; }
.product-detail .thumb-row img:hover { border-color: #e8842c; }

/* application list */
.app-badges { margin: 15px 0; }
.app-badges span {
    display: inline-block; background: #f4f6f8; border: 1px solid #dde4ea;
    padding: 6px 14px; margin: 0 8px 8px 0; border-radius: 20px; font-size: 0.82rem; color: #1f4e79;
}

/* ---------- contact ---------- */
.contact { background: url(../images/tuchbg.jpg) no-repeat center center !important; background-size: cover !important; }
.single_message_right_info ul li span { word-break: break-word; }

/* ---------- footer ---------- */
.footer-main { background: #101d2c; padding: 60px 0 30px; color: #93a3b3; }
.footer-main h4 { color: #fff; text-transform: uppercase; font-size: 0.95rem; letter-spacing: 1px; margin-bottom: 20px; }
.footer-main ul { padding: 0; list-style: none; }
.footer-main ul li { padding: 5px 0; }
.footer-main ul li a { color: #93a3b3; font-size: 0.88rem; }
.footer-main ul li a:hover { color: #e8842c; }
.footer-main p { font-size: 0.88rem; line-height: 1.8; }
.footer-main .fa { margin-right: 8px; color: #e8842c; }
.footer .copyright_text p { color: #7c8b9a; }
.footer { background: #0b1420; }

/* whatsapp float */
.wa-float {
    position: fixed; right: 25px; bottom: 64px; z-index: 999;
    width: 50px; height: 50px; border-radius: 50%;
    background: #25d366; color: #fff !important; text-align: center;
    box-shadow: 0 6px 16px rgba(0,0,0,.3);
    font-size: 1.6rem; line-height: 50px;
}
.wa-float:hover { color: #fff; transform: scale(1.08); }

/* ---------- multi-language overlap safety ----------
   Long translations (RU / KO / FR / ES) can wrap to more lines or
   contain long unbroken words; without explicit line-height and
   wrapping rules they would overlap neighbouring elements. */
.main_home h2,
.head_title h1,
.page-banner h1,
.single_service h2,
.single-strength h4 {
    line-height: 1.18;
    overflow-wrap: break-word;
    word-break: normal;
}
.page-banner h1 { min-height: 1.2em; }
.main_home h2 { max-width: 960px; margin: 0 auto 10px; }
.main_home p.subtitle {
    line-height: 1.4;
    max-width: 960px;
    margin: 0 auto;
    overflow-wrap: break-word;
}
.single-strength h4 { margin-bottom: 12px; }
.single-strength p { overflow-wrap: break-word; }

/* language switcher: keep the label on one line, never let it push
   the caret or break the navbar layout */
.lang-switch > a { white-space: nowrap; }
.lang-switch .dropdown-menu { min-width: 150px; }
.lang-switch .dropdown-menu > li > a { white-space: nowrap; }

/* gallery hover overlay: let long captions grow instead of clipping */
.single_work_overlay {
    height: auto;
    min-height: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 18px 12px !important;
    overflow: visible;
}
.single_work_overlay h4 { line-height: 1.25; overflow-wrap: break-word; font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.single_work_overlay p { line-height: 1.3; overflow-wrap: break-word; font-size: 11px; margin: 0; }

/* ---------- responsive tweaks ---------- */
@media (max-width: 991px) {
    .main_home h2 { font-size: 2.4rem; }
}
@media (max-width: 767px) {
    .main_menu_bg { min-height: 95px; }
    .navbar-brand > img { max-height: 72px; }
    .main_home_slider { margin-top: 105px; }
    .main_home { padding: 90px 0; }
    .main_home h2 { font-size: 1.8rem; }
    .main_home p.subtitle { font-size: 1.05rem; }
    .page-banner { margin-top: 105px; height: 180px; }
    .stat-item .num { font-size: 2rem; }
    .signle_service_left { margin-bottom: 25px; }
    .single_service_area { margin-bottom: 40px; }
    .footer-main { text-align: center; }
    .spec-table { font-size: 0.8rem; }
    .spec-table th, .spec-table td { padding: 7px 8px; }
}


/* ---------- mobile: strengths compact ---------- */
@media (max-width: 767px) {
    .single-strength { padding: 20px 10px; margin-bottom: 15px; }
    .single-strength i { font-size: 2.2rem; margin-bottom: 12px; }
    .single-strength h4 { font-size: 0.82rem; letter-spacing: 0; }
    .single-strength p { font-size: 0.82rem; line-height: 1.55; }
    /* stats bar mobile */
    .stats-bar { padding: 25px 0; }
    .stat-item .num { font-size: 1.8rem; }
    .stat-item .lbl { font-size: 0.75rem; }
    /* footer mobile: stack columns with spacing */
    .footer-main { padding: 40px 0 20px; }
    .footer-main > .container > .row > [class*="col-"] { margin-bottom: 25px; }
    /* whatsapp float: slightly smaller on mobile, sit above scrollup */
    .wa-float { width: 46px; height: 46px; right: 18px; bottom: 58px; font-size: 1.35rem; line-height: 46px; }
    /* ensure body has bottom space so float doesn't cover last content */
    body { padding-bottom: 60px; }
}

/* ---------- contact page (no-form) layout ---------- */
.contact-lead {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 6px 0 28px;
}
.contact-info-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    max-width: 1000px;
    margin: 10px auto 30px;
}
.contact-info-card {
    flex: 1 1 240px;
    max-width: 320px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    padding: 28px 22px;
    text-align: center;
    color: #fff;
}
.contact-info-card .cic-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #e8842c;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.contact-info-card h4 {
    color: #fff;
    font-size: 1.05rem;
    margin-bottom: 8px;
    letter-spacing: .5px;
}
.contact-info-card p {
    color: rgba(255, 255, 255, 0.85);
    font-size: .98rem;
    line-height: 1.6;
    margin: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}
.contact-actions { margin: 6px auto 28px; }
.contact-actions .btn { margin: 6px 8px; }
.contact .btn-ghost {
    background: transparent;
    border: 2px solid #e8842c;
    color: #fff;
}
.contact .btn-ghost:hover { background: rgba(232, 132, 44, 0.15); }
.contact .contact_socail { margin-top: 8px; }
@media (max-width: 767px) {
    .contact-info-grid { gap: 16px; }
    .contact-info-card { flex: 1 1 100%; max-width: 420px; }
}

/* ---------- 3rd-level nested dropdown (Bootstrap 3.3 dropped .dropdown-submenu) ---------- */
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    margin-left: 0;
    border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu:focus-within > .dropdown-menu { display: block; }
.dropdown-submenu > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #999;
    margin-top: 5px;
    margin-right: -8px;
}
.dropdown-submenu:hover > a:after { border-left-color: #e8842c; }
.dropdown-submenu.pull-left { float: none; }
.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
    border-radius: 6px 0 6px 6px;
}
/* readable, on-brand flyout menus */
.main_menu_bg .dropdown-menu {
    border: 1px solid #eee;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.main_menu_bg .dropdown-menu > li > a {
    white-space: nowrap;
    padding: 9px 18px;
}
.main_menu_bg .dropdown-menu > li > a:hover,
.main_menu_bg .dropdown-menu > li > a:focus {
    background: #e8842c;
    color: #fff;
}
/* ---------- hover-open dropdowns (1st & 2nd level) + alignment ---------- */
/* hover a top-level item → reveal its 2nd-level dropdown */
.navbar-nav > li.dropdown:hover > .dropdown-menu,
.navbar-nav > li.dropdown:focus-within > .dropdown-menu { display: block; }
/* bridge: remove the gap between the nav item and its dropdown so the
   menu never closes while the pointer travels down into it */
.navbar-nav > li.dropdown > .dropdown-menu { margin-top: 0; }
/* uniform, left-aligned menu columns so every flyout lines up */
.main_menu_bg .dropdown-menu { min-width: 220px; text-align: left; }
.main_menu_bg .dropdown-menu .dropdown-menu { min-width: 250px; }
/* 3rd-level flyout: sit flush to the right of the 2nd-level item, top-aligned,
   with no gap so the hover bridge stays alive (overrides the -1px from above) */
.dropdown-submenu > .dropdown-menu { margin-top: 0; margin-left: 0; }
/* ---------- 二级分类标签：无链接，仅作为三级菜单的分组标题 ----------
   （腐蚀控制 → 牺牲阳极 / 外加电流阳极；建筑材料 → 紧固件）
   保持 hover/focus 展开三级菜单的能力，但视觉上明确「不可点击」。 */
.main_menu_bg .dropdown-menu > li > a.submenu-label {
    cursor: default;
    font-weight: 700;
    color: #2c3e50;
}
/* 「紧固件」分组标签：恢复为正常字重（与普通下拉项一致，不作为加粗小标题） */
.main_menu_bg .dropdown-menu > li > a.submenu-label[data-i18n="nav.fasteners"] {
    font-weight: 400;
}
.main_menu_bg .dropdown-menu > li > a.submenu-label:hover,
.main_menu_bg .dropdown-menu > li > a.submenu-label:focus {
    background: #f4f6f8;
    color: #2c3e50;
    outline: none;
}
/* touch / narrow screens: stack 3rd level instead of flying out (avoid overflow) */
@media (max-width: 991px) {
    .dropdown-submenu > .dropdown-menu {
        /* 移动端二级标签不可点击，故三级项随二级菜单一同常驻展开 */
        display: block;
        position: static;
        left: auto;
        top: auto;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        width: 100%;
        padding-left: 20px;
    }
    .dropdown-submenu > a:after { display: none; }
    .dropdown-submenu:hover > .dropdown-menu { display: block; }
    /* 分组标签在移动端呈现为小标题 */
    .main_menu_bg .dropdown-menu > li > a.submenu-label {
        font-size: 12px;
        letter-spacing: .5px;
        text-transform: uppercase;
        color: #8a949c;
        background: transparent;
    }
}

/* ---------- multi-language menu uniformity ----------
   LOGO pinned to SCREEN far-left edge (zero gap from viewport).
   Right-side area: 7 top items + lang switch spread via space-between.
   Every item stays SINGLE-LINE (no wrap) with a compact font/padding so even
   the longest RU/ES/FR translations fit without breaking to multiple lines.
   For labels that are still too long, the i18n keys use shortened nav-friendly
   versions. (Mobile keeps Bootstrap's hamburger/stacked behaviour.) */
@media (min-width: 768px) {
    /* logo flush against screen left edge */
    .main_menu_bg { padding-left: 0; }
    .main_menu_bg .container-fluid {
        display: flex;
        align-items: center;
        padding-left: 0;
    }
    /* make the header chain full-height so logo + menu centre vertically in the bar */
    .main_menu_bg .container,
    .main_menu_bg .container .row,
    .main_menu_bg .container .row > div,
    .main_menu_bg nav,
    .main_menu_bg .container-fluid { height: 100%; }
    .navbar-header { flex: 0 0 auto; }   /* logo: natural width, hard-left */
    .navbar-collapse { display: flex !important; flex: 1 1 auto; align-items: center; }
    .navbar-nav {
        display: flex;
        flex: 1 1 auto;
        flex-wrap: nowrap;
        float: none;
        margin: 0;
        align-items: center;
        justify-content: space-between;
    }
    .navbar-nav > li {
        float: none;
        display: flex;
        flex: 0 1 auto;
        min-width: 0;
    }
    .navbar-nav > li > a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;       /* NEVER wrap — single line always */
        padding: 14px 10px;
        font-size: 13px;           /* compact so long translations fit one line */
        text-align: center;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;   /* last resort: truncate rather than break layout */
    }
    .navbar-nav > li > a .caret { margin-left: 4px; }
}

/* ============================================================
   产品页新增区块：规格表 / 配件说明（sac-mg-anode 等）
   ============================================================ */
.spec-block { margin-top: 32px; }
/* 提权以覆盖 .product-detail h3（custom.css:181 的橙色小标题规则） */
/* FRP 文档区块：统一三个标题样式 + 收紧段间距 */
.product-detail h3.block-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    line-height: 1.4;
    font-weight: 700;
    color: #16283c;
    margin: 0 0 14px;
    text-transform: none;
    letter-spacing: 0;
}
section.sections.compact { padding-top: 30px; padding-bottom: 30px; }
.product-detail .separator2 { margin-bottom: 12px; }

/* FRP 产品块：标签-值对照列表 */
.proplist { list-style: none; padding: 0; margin: 2px 0 0; }
.proplist li {
    display: flex;
    align-items: flex-start;
    padding: 7px 0;
    border-bottom: 1px solid #eee;
    font-size: 14.5px;
    line-height: 1.65;
}
.proplist li:last-child { border-bottom: none; }
.proplist .plabel {
    flex: 0 0 100px;
    font-weight: 700;
    color: #1f4e79;
    padding-right: 12px;
}
.proplist .pval { flex: 1 1 auto; color: #444; min-width: 0; }
.spec-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 8px;
    font-size: 14px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.spec-table th, .spec-table td {
    border: 1px solid #e3e3e3;
    padding: 10px 12px;
    text-align: left;
}
.spec-table thead th {
    background: #f5f5f5;
    color: #333;
    font-weight: 700;
    white-space: nowrap;
}
.spec-table tbody tr:nth-child(even) { background: #fafafa; }
.spec-table td:first-child { font-weight: 600; color: #444; }

.struct-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.struct-list li {
    position: relative;
    padding: 8px 0 8px 26px;
    border-bottom: 1px dashed #ececec;
    font-size: 18px;
    color: #656565;
}
.struct-list li:before {
    content: "\f058";
    font-family: FontAwesome;
    color: #e8842c;
    position: absolute;
    left: 0;
    top: 8px;
}

/* banner 副标清空时隐藏空 <p>，避免多余空行 */
.page-banner p.subtitle:empty,
p.subtitle:empty {
    display: none;
}

/* ============================================================
   sac-mg-anode 页面排版调整（2026-08-20）
   ============================================================ */

/* 正文里的产品介绍段：与全站默认 p 字号/行高/颜色保持一致 */
.product-detail .product-lead {
    font-size: 18px;
    line-height: 1.375rem;
    color: #656565;
    margin-bottom: 30px;
}

/* 规格列表：与全站默认正文一致 */
.product-detail .spec-list {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}
.product-detail .spec-list li {
    position: relative;
    padding: 6px 0 6px 28px;
    color: #656565;
    font-size: 18px;
}
.product-detail .spec-list li i {
    color: #e8842c;
    position: absolute;
    left: 0;
    top: 8px;
}

/* 短条目列表（产品优势 / 应用领域等）改为两列，消除右侧大片留白 */
.product-detail .spec-list.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    row-gap: 0;
}
@media (max-width: 767px) {
    .product-detail .spec-list.two-col { grid-template-columns: 1fr; }
}

/* 参/数值列表（核心技术参数 / 应用场景）改为两列，消除右侧大片留白。
   grid 单元内依然保留 .proplist li 的 flex 行（label / value 同行）。 */
.product-detail .proplist.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    row-gap: 0;
}
.product-detail .proplist.two-col > li {
    /* 跨越两行的最末项：避免单独一行左半侧空着 */
    break-inside: avoid;
}
@media (max-width: 767px) {
    .product-detail .proplist.two-col { grid-template-columns: 1fr; }
}

/* 首页轮播三屏背景图（2026-08-23 替换 homebg.jpg）
   CSS 内的 url() 相对 CSS 文件位置（assets/css/custom.css）解析，
   因此必须用 ../images/...，不能用 assets/images/...。 */
.single_home_slider.home-slider-bm  { background-image: url('../images/home-slider-bm.jpg')  !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
.single_home_slider.home-slider-cp  { background-image: url('../images/home-slider-cp.jpg')  !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
.single_home_slider.home-slider-oem { background-image: url('../images/home-slider-oem.jpg') !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }

/* 文字在浅色背景图上仍然清晰：白色 + 文字阴影 */
.main_home h1, .main_home h2,
.main_home p.subtitle {
    color: #fff !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

/* 应用徽章：与上方正文对齐、留出气口 */
.product-detail .app-badges {
    margin: 0 0 0;
}

/* 详情区段里主图美化 */
.product-detail .main-photo {
    border-radius: 8px;
    border: 1px solid #e3e8ee;
}

/* 正文上方产品照片：1 张主图 + N 张副图（多图页），或仅 1 张主图（单图页） */
.product-photos {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
    /* 让产品照片在 hero 栏内垂直居中，与长文字栏视觉平衡 */
    align-self: center;
}
/* figure 容器：背景透明 + 无边框，让图片融进页面 lightbg 背景 */
.product-photos figure {
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
}
/* 默认（多图页）：主图保持原图比例完整显示，不裁切主体 */
.product-photos .photo-main img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: contain;
    background: #f9f9f9;
}
/* 单图页（无副图行）按原图比例完整显示，给更大高度显示产品细节
   兼容方案：不依赖 :has()，而是给所有 photo-main 容器加 .has-photo-row 类时覆盖。
   多数产品页（cp-coupon/cp-decoupler/cp-junction-box/cp-potentiostat/cp-spark-gap
   /ic-hsi-anode/sac-al-rod/sac-zn-anode 等）不需任何 HTML 改动，自动获得更大主图。 */
.product-photos .photo-main img {
    max-height: 480px;
}
.product-photos.has-photo-row .photo-main img {
    max-height: 360px;
}
.product-photos .photo-row {
    display: flex;        /* 兜底：flex 2 列均分（兼容老 iOS Safari < 10.1 / Android < 5） */
    flex-wrap: wrap;
    gap: 12px;
}
@supports (display: grid) {
    .product-photos .photo-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}
.product-photos .photo-row .photo-sub {
    flex: 1 1 calc(50% - 6px);  /* 兜底：flex 时每张约 1/2 宽 */
    min-width: 180px;
}
/* ic-mmo-anode 第一行（.mmo-row）：2 张子图比例不一致（mmo-wire 4:3 横向
   vs mmo-ribbon 1:1 正方形）—— img 自身强制 1:1 + cover 裁切，figcaption 在
   img 下方（与 photo-row-3 风格完全统一）。用专属类 .mmo-row 限定作用域，
   其他产品页的 .photo-row 保持原有 contain 行为。
   兼容方案：现代浏览器走 aspect-ratio；老 Android WebView / Chrome <88 走
   min-height 兜底（保证 1:1 容器有最小高度，图片按 cover 填满）。 */
.product-photos .photo-row.mmo-row .photo-sub {
    display: block;
    overflow: visible;                /* 覆盖全局 figure { overflow: hidden } */
    position: relative;               /* 兼容兜底：作为 img 绝对定位的容器 */
    min-height: 160px;                /* 兼容兜底：保证 1:1 视觉比例（再缩 60） */
}
.product-photos .photo-row.mmo-row .photo-sub img {
    width: 100%;
    max-width: 220px;                /* 桌面：1:1 时高度 220px，比原 360 缩 39% */
    aspect-ratio: 1 / 1;              /* 现代浏览器：img 自身 1:1，cover 裁切 */
    object-fit: cover;
    display: block;
    margin: 0 auto;                  /* col-sm-5 内居中 */
    background: #f9f9f9;
}
/* 不支持 aspect-ratio 的浏览器：img 走 position:absolute 填满父容器（min-height 160） */
@supports not (aspect-ratio: 1 / 1) {
    .product-photos .photo-row.mmo-row .photo-sub img {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100%;
        height: 100%;
        max-width: none;
    }
}
@media (max-width: 991px) {
    .product-photos .photo-row.mmo-row .photo-sub img {
        max-width: 200px;
    }
}
@media (max-width: 767px) {
    .product-photos .photo-row.mmo-row .photo-sub img {
        max-width: 100%;              /* 手机全宽 */
    }
}
/* mmo-row 图注：与 photo-row-3 figcaption 完全相同的样式（在图片下方） */
.product-photos .photo-row.mmo-row .photo-sub figcaption {
    text-align: center;
    color: #6b7785;
    font-size: 13px;
    line-height: 1.5;
    padding: 10px 4px 4px;
    background: transparent;
}
/* 副图：保持比例完整显示，不裁切；2 列并排时给较高高度以保证细节可见 */
.product-photos .photo-sub img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 340px;
    object-fit: contain;
    background: #f9f9f9;
}
/* 图注：与图片等宽，融入正文排版，不再有"图注条"突兀感 */
.product-photos figcaption {
    text-align: center;
    color: #6b7785;
    font-size: 13px;
    line-height: 1.5;
    padding: 10px 4px 4px;
    border-top: 0;
    background: transparent;
}
/* 技术参数区总标题（sac-mg-anode 详情页新增） */
.spec-section-title {
    font-family: 'Montserrat', 'Microsoft YaHei', sans-serif;
    color: #1a1a1a;
    text-align: center;
    font-size: 1.7rem;
    font-weight: 700;
    margin: 0 0 30px;
    letter-spacing: .5px;
}

/* 副图只有 1 张时铺满整行（避免 grid 两列导致偏左留白）
   兼容方案：不依赖 :has(:only-child)，改为给单图行加 .photo-row-single 修饰符。
   HTML 端改：原本 <div class="photo-row"> 包单个 <figure> 改为 <div class="photo-row photo-row-single"> */
.product-photos .photo-row.photo-row-single {
    grid-template-columns: 1fr;
}
.product-photos .photo-row.photo-row-single .photo-sub img {
    max-height: 360px;
}

/* 副图 3 列版：用于 ic-mmo-anode 衍生产品行（钛阳极管/柔性阳极/深井阳极）。
   用专属类 .photo-row-3 避免污染默认 2 列 .photo-row。
   兼容方案：现代浏览器走 CSS Grid；老浏览器走 Flexbox 兜底（display: flex + flex: 1 1 0）。 */
.product-photos .photo-row-3 {
    display: flex;        /* 兜底：flex 3 列均分 */
    flex-wrap: wrap;
    gap: 12px;
}
@supports (display: grid) {
    .product-photos .photo-row-3 {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));  /* minmax(0,1fr) 强制列可压缩到 0，绕开 grid item 默认 min-width:auto 被图片原始尺寸撑爆 */
    }
}
.product-photos .photo-row-3 .photo-sub {
    flex: 1 1 calc(33.333% - 8px);  /* 兜底：flex 时每张约 1/3 宽 */
    min-width: 0;                   /* 关键：让 flex item 可压缩到 < 图片原始尺寸，避免溢出 */
}
.product-photos .photo-row-3 .photo-sub img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 160px;             /* 缩 80（240→160），整组图栏高度控制在 400px 以内 */
    object-fit: contain;
    background: #f9f9f9;
}
@media (max-width: 767px) {
    .product-photos .photo-row-3 { grid-template-columns: 1fr; }
    .product-photos .photo-row-3 .photo-sub img { max-height: 240px; }
}
/* photo-row 与 photo-row-3 之间的间距 */
.product-photos .photo-row + .photo-row-3,
.product-photos .photo-row-3 + .photo-row { margin-top: 12px; }

/* 表格行高与字号微调 */
.spec-block .spec-table th,
.spec-block .spec-table td {
    padding: 11px 14px;
}

/* 表头：站点品牌橙 + 白字，醒目统一（与其他页 btn-accent 同色系） */
.spec-block .spec-table thead th {
    background: #e8842c;
    color: #fff;
    border-color: #cf6f17;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

/* 页面底部 CTA 条（stats-bar）：两个按钮并排居中 */
.stats-bar .stat-item .btn { margin: 15px 8px 0; }
/* 移动端：保持 contain，确保小屏也能完整看到产品 */
@media (max-width: 640px) {
    .product-photos .photo-sub img { max-height: 220px; }
}

/* ============================================================
   FRP 复合材料紧固件 页面（2026-08-23 新增板块）
   ============================================================ */
/* 产品分类卡片：环氧 / 乙烯基酯 / 聚酯 三列自适应 */
.cls-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.cls-card {
    flex: 1 1 260px;
    background: #fff;
    border: 1px solid #e3e9ee;
    border-left: 4px solid #1f4e79;
    border-radius: 4px;
    padding: 16px 18px;
}
.cls-card h4 { margin: 0 0 8px; font-size: 1.05rem; line-height: 1.35; font-weight: 700; color: #16283c; font-family: 'Montserrat', sans-serif; }
.cls-card p { margin: 0; font-size: 15px; line-height: 1.6; color: #555; }
.cls-spec {
    margin-top: 4px;
    padding: 12px 16px;
    background: #f4f6f8;
    border-radius: 4px;
    font-weight: 600;
    color: #1f4e79;
    font-size: 15px;
}
/* 配套成套供货提示框 */
.kit-box {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    background: #eef4fb;
    border: 1px solid #cfe0f2;
    border-radius: 6px;
}
.kit-box i { color: #1f4e79; font-size: 1.6rem; line-height: 1; margin-top: 2px; }
.kit-box p { margin: 0; font-size: 15px; line-height: 1.6; color: #444; }

/* ============================================================
   thermal-insulation 页面（2026-09-01 改造）
   1) 全局通用 block-title 样式（去掉 .product-detail 限定，让所有区段标题一致）
   2) 产品介绍 + 常见种类 中间插入图片区，2 张图 1:1 严格对齐
   ============================================================ */
/* 通用 block-title：所有 section 标题统一字体 / 颜色 / 间距 */
.block-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    line-height: 1.4;
    font-weight: 700;
    color: #16283c;
    margin: 0 0 14px;
    text-transform: none;
    letter-spacing: 0;
    text-align: center;
}
/* 保留 .product-detail 容器内的特殊需求（如果未来要差异化时可继续用） */
.product-detail h3.block-title {
    text-align: left;
}
/* thermal-insulation 中间图片区：2 张图 1:1 等大并排 */
.insul-photos {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}
.insul-photos .main-photo {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e3e8ee;
    box-shadow: 0 10px 30px rgba(22,40,60,.15);
}
/* acoustic-panel 中间图片区：3 张图 1:1 等大横向 3 列
   兼容方案：现代浏览器走 CSS Grid + aspect-ratio；老浏览器走 Flexbox（3 列均分），
   img 自身按原比例显示（接受轻微比例不齐，优先保证图可见）。 */
.acoustic-photos {
    display: flex;        /* 兜底：flex 3 列均分 */
    flex-wrap: wrap;
    gap: 28px;
    max-width: 1080px;
    margin: 0 auto;
}
@supports (display: grid) {
    .acoustic-photos {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}
.acoustic-photos .main-photo {
    width: 100%;
    flex: 1 1 calc(33.333% - 19px);  /* 兜底：flex 时每张约 1/3 宽 */
    min-width: 200px;
    aspect-ratio: 1 / 1;              /* 现代浏览器：img 自身 1:1 */
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e3e8ee;
    box-shadow: 0 10px 30px rgba(22,40,60,.15);
    display: block;
}
@media (max-width: 768px) {
    .acoustic-photos {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}