/* ============================================
   hyzgmach.com - Main Stylesheet
   Primary Color: #be1111 | Font: Inter
   ============================================ */

/* ===== Reset & Base ===== */
* { box-sizing: border-box; }

/* Iconfont (from original site) */
@font-face {
    font-family: iconfont;
    src: url(https://at.alicdn.com/t/c/font_4276297_qsyamuo0p0h.woff2?t=1724988100529) format("woff2"),
         url(https://at.alicdn.com/t/c/font_4276297_qsyamuo0p0h.woff?t=1724988100529) format("woff"),
         url(https://at.alicdn.com/t/c/font_4276297_qsyamuo0p0h.ttf?t=1724988100529) format("truetype");
}
.iconfont {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #be1111;
    font-family: iconfont !important;
    font-size: 16px;
    font-style: normal;
}

html {
    font-size: 10px;
    scroll-behavior: smooth;
    min-width: 320px;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    min-width: 320px;
    --main_w: 150rem;
    --main_w2: 150rem;
    background: #fff;
    color: #333;
    font-family: 'Inter', sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5em;
    min-height: 100vh;
    display: flex;
    flex-flow: column;
    overflow-x: hidden;
}

:focus { outline: none; }

ul { margin: 0; padding: 0; }
li { list-style: none; margin-bottom: 0; }
a { color: #be1111; text-decoration: none; }
img { height: auto; max-width: 100%; }

::selection { background: #be1111; color: #fff; }
::-moz-selection { background: #be1111; color: #fff; }

/* ===== Typography ===== */
h1, .h1 { font-size: 6.4rem; line-height: 6.4rem; color: #333; font-weight: 700; margin: 2rem 0; }
h2, .h2 { font-size: 4.6rem; line-height: 5.2rem; color: #333; font-weight: 700; margin: 2rem 0; }
h3, .h3 { font-size: 3.2rem; color: #333; font-weight: 700; line-height: 4.8rem; margin: 2rem 0; }
h4, .h4 { font-size: 3rem; color: #333; font-weight: 700; line-height: 4.8rem; margin: 2rem 0; }
h5, .h5 { font-size: 2.4rem; color: #333; line-height: 1.4; margin: 2rem 0; }
h6, .h6, p, .p { font-size: 1.8rem; color: #333; line-height: 2.7rem; }

p { font-weight: 400; margin: 0 0 1.5em; }

/* ===== Layout Containers ===== */
.xz-container { flex: 1; padding-bottom: 6rem; background: #f8f8f8; }
.xz-main { margin: 0 auto; width: var(--main_w); padding-top: 3rem; }
.xz-main2 { margin: 0 auto; width: var(--main_w2); }

@media screen and (max-width: 1680px) {
    body { --main_w: 150rem; --main_w2: 130rem; }
}
@media screen and (max-width: 1600px) {
    body { --main_w: 136rem; --main_w2: 132rem; }
}
@media screen and (max-width: 1440px) {
    html { font-size: 9px; }
    body { --main_w: 136rem; --main_w2: 136rem; }
}
@media screen and (max-width: 1366px) {
    body { --main_w: 130rem; --main_w2: 130rem; }
}
@media screen and (max-width: 1280px) {
    body { --main_w: calc(100vw - 10rem); --main_w2: calc(100vw - 10rem); }
}
@media screen and (max-width: 1024px) {
    body { --main_w: calc(100vw - 8rem); --main_w2: calc(100vw - 8rem); }
}
@media screen and (max-width: 600px) {
    html { font-size: 8.5px; }
    body { --main_w: max(calc(100vw - 5rem), calc(320px - 5rem)); --main_w2: max(calc(100vw - 5rem), calc(320px - 5rem)); }
}

/* ===== Buttons ===== */
.xz-btn {
    align-items: center;
    background: #be1111;
    border: none;
    border-radius: 2px;
    color: #333;
    display: inline-flex;
    font-size: 1.6rem;
    font-weight: 500;
    gap: 3rem;
    height: 5.6rem;
    justify-content: center;
    min-width: 25rem;
    padding: 0 2rem;
    transition: all .3s ease;
    white-space: nowrap;
    cursor: pointer;
}
.xz-btn:hover { background: #000; color: #be1111; }
.xz-btn:active { transform: scale(.95); }

/* ===== Header (xz-header) ===== */
.xz-header {
    background: #fff;
    box-shadow: 0 0 4rem -.5rem rgba(0, 0, 0, .1);
    left: 0;
    position: sticky;
    top: 0;
    transition: all .5s ease;
    width: 100%;
    z-index: 999;
}

.xz-header-main {
    padding: 0 5%;
    width: 100%;
}

.xz-header-x {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

/* Logo */
.xz-header-left {
    align-items: center;
    display: flex;
}

.xz-logo-a {
    display: inline-block;
    position: relative;
    transition: all .3s ease;
}

.xz-logo-a:hover {
    filter: brightness(1.1);
    transform: scale(.95);
}

.xz-logo-a:active { transform: scale(.9); }

.xz-logo {
    display: block;
    height: auto;
    max-width: 17rem;
    pointer-events: none;
    transition: all .3s ease;
    user-select: none;
}

/* Header middle (nav) */
.xz-header-middle {
    align-items: center;
    display: flex;
}

.menu-main-container { display: block; }

#menu-main {
    display: flex;
    flex-flow: row nowrap;
    gap: 8rem;
    transition: all .3s;
}

#menu-main a { color: #333; }

#menu-main > li,
#menu-main > li.menu-item-has-children,
#menu-main > li.menu-item-has-children > a,
#menu-main > .menu-item-products,
#menu-main > .menu-item-products > a {
    position: relative;
}

#menu-main > li {
    height: 100%;
    top: 50%;
    z-index: 888;
}

#menu-main > li > a {
    color: #666;
    display: flex;
    flex-direction: column;
    font-size: 1.7rem;
    font-weight: 600;
    height: var(--menu_h, 9rem);
    justify-content: center;
    transition: all .3s;
    white-space: nowrap;
    z-index: 2;
}

#menu-main > li > a:hover { color: #be1111; }

#menu-main > li > a::before {
    background: #be1111;
    content: "";
    display: inline-block;
    height: .2rem;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 70%;
    transform: translateX(-50%);
    transition: all .3s;
    width: 1.8rem;
}

#menu-main > li:hover > a::before,
#menu-main > li.current-menu-item > a::before { opacity: 1; }

#menu-main > li.current-menu-item > a,
#menu-main > li.current-menu-ancestor > a {
    color: #be1111 !important;
}

/* Sub-menus (default) */
#menu-main > li > .sub-menu {
    background-color: #fff;
    border-radius: 0 0 .3rem .3rem;
    box-shadow: 0 .25rem 1.169rem .144rem rgba(33, 24, 21, .16);
    display: none;
    left: -1.5rem;
    padding: 1rem 2rem 1rem 1.5rem;
    position: absolute;
    z-index: 99999;
}

#menu-main > li:hover > .sub-menu { display: block; }

#menu-main > li > .sub-menu > li {
    padding-bottom: .8rem;
    padding-right: 2rem;
    position: relative;
    text-align: left;
    transition: all .3s;
}

#menu-main > li > .sub-menu > li > a {
    color: #333;
    display: inline-block;
    font-size: 1.5rem;
    position: relative;
    text-align: left;
    transition: all .3s;
    white-space: nowrap;
}

#menu-main > li > .sub-menu > li > a:hover,
#menu-main > li > .sub-menu > li.current-menu-item > a {
    color: #be1111 !important;
}

#menu-main > li > .sub-menu > li > .sub-menu {
    background: #fff;
    box-shadow: 0 .25rem 1.169rem .144rem rgba(33, 24, 21, .16);
    display: none;
    left: 100%;
    padding: .6rem;
    position: absolute;
    top: 0;
}

#menu-main > li > .sub-menu > li:hover > .sub-menu { display: block; }

#menu-main > li > .sub-menu > li > .sub-menu > li { margin-bottom: .3rem; }

#menu-main > li > .sub-menu > li > .sub-menu > li a {
    color: #999;
    font-size: .9rem;
    text-align: left;
    transition: all .3s;
    white-space: nowrap;
}

#menu-main > li > .sub-menu > li > .sub-menu > li a:hover {
    color: #be1111 !important;
}

/* Products mega menu (5-col grid) */
#menu-main > .menu-item-products { position: static; }

#menu-main > .menu-item-products > .sub-menu {
    background: #fff;
    border-radius: 0 0 .5rem .5rem;
    box-shadow: 0 0 4rem -.5rem rgba(0, 0, 0, .1);
    clear: both;
    display: none;
    gap: 3rem 2rem;
    grid-template-columns: repeat(5, 1fr);
    left: 50%;
    overflow: hidden;
    padding: 3rem 4% 4rem;
    position: absolute;
    transform: translateX(-50%);
    width: 79vw;
}

#menu-main > .menu-item-products:hover > .sub-menu { display: grid; }

#menu-main > .menu-item-products > .sub-menu > li {
    padding: 0;
    display: block;
}

#menu-main > .menu-item-products > .sub-menu > li > a {
    color: #333;
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 600;
    position: relative;
    transition: all .3s;
}

#menu-main > .menu-item-products > .sub-menu > li > a::after {
    /* red triangle removed per user request (was: color:#be1111; content:"\25BE";) */
    display: none;
}

#menu-main > .menu-item-products > .sub-menu > li > a:hover {
    color: #be1111 !important;
}

#menu-main > .menu-item-products > .sub-menu > li > .sub-menu {
    box-shadow: none;
    display: block;
    margin-top: .2rem;
    padding: 0;
    position: static;
}

#menu-main > .menu-item-products > .sub-menu > li > .sub-menu > li a {
    color: #333;
    display: inline-block;
    font-size: 1.4rem;
    line-height: 3.2rem;
    margin-top: .2rem;
    transition: all .3s;
}

#menu-main > .menu-item-products > .sub-menu > li > .sub-menu > li a:hover {
    color: #be1111;
}

/* Header buttons (right side) */
.xz-header-btns {
    align-items: center;
    display: flex;
    gap: 2.8rem;
}

.header-email {
    align-items: center;
    color: #666;
    display: flex;
    font-size: 1.6rem;
    gap: .5rem;
    transition: color .3s;
}

.header-email:hover { color: #be1111; }

.email-icon {
    color: #be1111;
    font-weight: 700;
    font-size: 1.8rem;
}

.email-text { color: inherit; }

/* Header Inquiry Now button (matches original hyzgmach.com) */
.header-quote {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #be1111 !important;
    border: 1px solid #be1111;
    border-radius: 0 2rem 2rem 2rem;
    width: 15rem;
    height: 4rem;
    font-size: 1.6rem;
    font-weight: 500;
    text-decoration: none;
    transition: all .3s;
    cursor: pointer;
    padding: 0;
}

.header-quote:hover {
    background: #be1111;
    color: #fff !important;
    transform: translateY(-3px);
}

#search-btn {
    color: #999;
    font-size: 2rem;
    transition: all .3s;
    display: flex;
    align-items: center;
}

#search-btn:hover {
    color: #be1111;
    transform: translateY(-3px);
}

.search-icon {
    font-size: 2rem;
    font-weight: 700;
}

/* Mobile menu toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 1rem;
}

.menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: #333;
    border-radius: 2px;
    transition: all .3s;
}

/* Responsive menu */
@media screen and (max-width: 1600px) {
    #menu-main { gap: 6rem; }
}
@media screen and (max-width: 1440px) {
    #menu-main { gap: 4rem; }
}
@media screen and (max-width: 1024px) {
    /* Only the front page needs 6rem above-the-fold clearance so
       that .xz-banner.is_home { margin-top: -6rem } can tuck the
       banner underneath the sticky header. Apply the padding only
       on body.home to avoid leaving a blank gap on detail/list
       pages like /crawler-impact-crusher/ (v1.0.80). */
    body.home { padding-top: 6rem; }
    /* Strip the default 3rem top padding from every .xz-main on
       mobile so content sits flush under each page's banner / hero
       (v1.0.81). */
    .xz-main { padding-top: 0; }
    /* Product list / archive / taxonomy pages lose their 4rem top
       padding in the mobile drawer so the page banner flows
       straight into the product grid (v1.0.81). */
    .xz-pro-list { padding: 0; }
    /* Inner-page banner (.toppic) drops its fixed 40rem desktop height
       on mobile, falls back to the banner image's intrinsic aspect
       ratio (every inner-page template ships <img width="1920"
       height="800">, so the container sits at width * 5/12 on any
       viewport), and the !important guards win against any 3rd-party
       rules that try to fix its height (v1.0.82). */
    .toppic {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        position: relative;
        overflow: hidden;
    }
    .toppic > img {
        display: block !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        object-fit: cover;
    }
    /* Page-title overlay still sits on top of the responsive banner image
       (z-index 3 vs ::after z-index 2). Pin to the bottom-left on mobile
       so it stays readable above the parallax / hover effects. */
    .toppic_content {
        position: absolute;
        z-index: 3;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 4rem 1.5rem 1.5rem;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .35) 100%);
    }
    .toppic_content .xz-main { padding: 0; }
    .toppic_tit { font-size: 3rem !important; margin-bottom: .5rem !important; }
    .breadcrumbs-x #breadcrumbs { font-size: 1.2rem; }
    /* v1.0.91 — body scroll-lock when drawer is open. Prevents the
       page area under the backdrop from being scrollable on touch
       (which would let the user "see through" the dim overlay as it
       moves). Position:fixed on html + top:0 keeps the page from
       jumping on lock/unlock. */
    body.drawer-open { overflow: hidden !important; }
    .xz-header-middle {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        max-width: 80vw;
        height: 100vh;
        background: #fff;
        flex-direction: column;
        justify-content: flex-start;
        /* v1.0.86: align-items:stretch + align-content:stretch so the
           inner .menu-main-container fills the drawer width and starts
           at the very top (no top gap from inherited desktop centering). */
        align-items: stretch !important;
        align-content: stretch !important;
        /* v1.0.86: zero ALL inner padding so the first <li> sits flush
           against the drawer top. The X button lives absolute and does
           not consume flow height. */
        padding: 0 !important;
        margin: 0 !important;
        overflow-y: auto;
        z-index: 9999;
        transition: right .4s ease;
        box-shadow: -5px 0 30px rgba(0,0,0,.15);
    }
    .xz-header-middle.open { right: 0; }
    /* v1.0.86: kill any inherited spacing on the menu wrapper so the
       list touches the drawer's top edge. */
    .xz-header-middle > .menu-main-container {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        align-self: stretch !important;
        flex: 0 0 auto !important;
    }

    /* ===== Drawer close button (top-right X) — v1.0.84 / v1.0.85 =====
       v1.0.85: moved higher (.5rem from top) since drawer padding-top
       is now 0; X no longer "shares" the top 5rem padding with menu. */
    /* v1.0.91 — Drawer backdrop overlay.
       When the drawer is open, a semi-transparent black overlay covers
       the entire viewport (under the drawer, above page content) so
       that the page content (banner, products section, etc.) cannot
       bleed through beside the 300px drawer panel. Clicking the
       backdrop closes the drawer (handled in main.js). */
    .drawer-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, .5);
        z-index: 9990 !important;     /* below .xz-header-middle (9999) so the drawer stays interactive */
        border: 0;
        padding: 0;
        margin: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: opacity .25s ease;
        opacity: 0;
    }
    .drawer-backdrop.show {
        display: block !important;
        opacity: 1;
    }

    .drawer-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: .5rem;
        right: .5rem;
        width: 4rem;
        height: 4rem;
        font-size: 3rem;
        line-height: 1;
        color: #333;
        background: transparent;
        border: 0;
        cursor: pointer;
        z-index: 10001;
        padding: 0;
        font-family: inherit;
    }
    .drawer-close:hover { color: #be1111; }

    #menu-main {
        display: block !important;
        flex-direction: column;
        gap: 0;
        width: 100%;
        /* v1.0.85: explicit list reset so default <ul>/<li>
           margins/padding (browser 40px gutter) cannot leak in. */
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    /* === v1.0.89 NATURAL-OPEN (replaces v1.0.84/85/86/87/88 hacks) ===
       Root-cause reset: the <ul class="sub-menu"> is a *normal child* of
       the <li>, nothing more. Closed: li is 5rem with overflow:hidden +
       sub-menu display:none. Open: li drops the height cap, sub-menu
       fades in as a normal block. No absolute positioning, no
       overlay-overlap with sibling rows, no race against 3rd-party
       inline `position:relative` injection (the JS syncLiState sets
       position:static !important inline anyway, but even without
       that, the natural layout is correct).

       Why every prior attempt failed:
       · v1.0.83 — closed via display:none + height:0; 3rd-party
                   inline max-height:none re-inflated sub-menu and
                   bumped li to 200+px.
       · v1.0.84 — !important mega-lock closed sub-menu; still
                   leaked when third party set display:flex.
       · v1.0.85 — position:absolute(left:-9999px) left fine when
                   alone, but went static-on-open and was
                   re-positioned:relative by an injector.
       · v1.0.86 — restored absolute overlay (top:100%); overlay
                   covered the next 1-2 rows when open.
       · v1.0.87 — switched to display:none closed + display:block
                   absolute open. Same overlay overlap as v1.0.86.
       · v1.0.88 — JS purge symmetry fix (display block/none inline
                   !important). Still overlay-overlap on open.

       v1.0.89: the open <li> simply *grows* to its content. Sibling
       rows get pushed down by the natural block flow, no overlap. The
       JS adds the inline style reinforces only as a last-line defence;
       without it, the layout is already correct because we never
       re-feed children into the box tree with absolute positions. */
    #menu-main > li,
    #menu-main > .menu-item-products,
    #menu-main > .menu-item-home {
        line-height: 1.4 !important;
        display: block !important;
        width: 100% !important;
        height: 5rem !important;
        min-height: 5rem !important;
        max-height: 5rem !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        border-top: 0 !important;
        border-bottom: 1px solid #eee !important;
        position: relative !important;
        overflow: hidden !important;
        flex: 0 0 auto !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;
        /* Smooth open/close on max-height (cosmetic only — the height
           itself is the contract; transition makes it nicer) */
        transition: max-height .28s ease, height .28s ease;
    }
    #menu-main > li.open,
    #menu-main > .menu-item-products.open,
    #menu-main > .menu-item-home.open {
        max-height: 50rem !important;
        height: auto !important;
        overflow: visible !important;
    }
    #menu-main > li > a,
    #menu-main > .menu-item-products > a,
    #menu-main > .menu-item-home > a {
        height: 100% !important;
        min-height: 5rem !important;
        max-height: 5rem !important;
        display: flex !important;
        align-items: center !important;
        /* v1.0.89: right padding 4rem to leave space for the absolute
           chevron (top-right corner inside a). */
        padding: 0 4.5rem 0 2rem !important;
        border-bottom: 0 !important;
        box-sizing: border-box !important;
        position: relative !important;
        flex: 0 0 auto;
    }

    /* v1.0.86: hover red-line (::before) re-centered vertically.
       The desktop rule pinned it to top:70% which on a 5rem mobile a
       puts the bar 1.5rem above the bottom — visibly off-center.
       Force top:50% + full Y centering so the red bar lands at the
       li's vertical middle on mobile. */
    #menu-main > li > a::before {
        top: 50% !important;
        left: 50% !important;
        width: 2.4rem !important;
        height: .2rem !important;
        margin-top: 0 !important;
        transform: translate(-50%, -50%) !important;
    }

    /* === Chevron indicator on items that have a sub-menu ===
       v1.0.86: switched from flex-item (margin-left:auto) to
       position:absolute so the chevron center lands exactly at the
       li's vertical middle regardless of the <a> text node being a
       flex item (it isn't — only ::after is). The previous flex
       layout placed the chevron at the a center but the text node
       at the a top, producing the "Products 文字与 ∨ 不在同一垂直
       线" mis-alignment the user reported. */
    #menu-main > li:has(> .sub-menu) > a::after {
        content: "";
        position: absolute !important;
        right: 2rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 1.8rem !important;
        height: 1.8rem !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        pointer-events: none;
        transition: transform .25s ease;
    }
    #menu-main > li:has(> .sub-menu).open > a::after {
        transform: translateY(-50%) rotate(180deg) !important;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23be1111' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 15 12 9 18 15'/></svg>");
    }

    /* === v1.0.89 SUB-MENU NATURAL LAYOUT ===
       Sub-menu is a *normal* child of the open <li>; no absolute
       positioning, no z-index overlap. When li is open the sub-menu
       sits inside li and grows li's height. JS syncLiState also
       writes inline !important declarations as belt-and-suspenders,
       but with this layout the layout is already correct even if JS
       is disabled.

       v1.0.90 — width:100% + float:none !important enforcement.
       The user's screenshot showed the sub-menu grey panel only
       occupying ~half the drawer width (left half remained white).
       Root cause: an inline `style="float:right"` (or width:auto with
       shrink-to-fit) from a 3rd-party injector overrode the
       CSS width:100% on the <ul>. Setting float:none inline-belt +
       min-width:100% makes it bulletproof. */
    #menu-main > li > .sub-menu {
        display: none !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        clear: both !important;
        max-height: none !important;
        height: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        box-shadow: 0 .4rem .8rem rgba(0,0,0,.06) !important;
        list-style: none !important;
        overflow: visible !important;
        z-index: auto !important;
        background: #f7f7f7 !important;
    }
    #menu-main > li.open > .sub-menu,
    #menu-main > li > .sub-menu > li.open > .sub-menu {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        float: none !important;
    }
    /* Same natural-layout rules for the products mega — v1.0.89 keeps
       it as a static child of the open products li. No more absolute
       overlay, no more coverage of the next row, no more height
       variance. v1.0.90 adds the float:none / min-width:100%
       enforcement so the grey panel fills the drawer edge to edge. */
    #menu-main > .menu-item-products > .sub-menu {
        display: none !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        clear: both !important;
        max-height: none !important;
        height: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        box-shadow: 0 .4rem .8rem rgba(0,0,0,.06) !important;
        list-style: none !important;
        overflow: visible !important;
        z-index: auto !important;
        background: #f7f7f7 !important;
    }
    /* v1.0.93 — text-align:right !important on the .open sub-menu ul
       so even if a 3rd-party injector sets inline text-align on a
       descendant <a>, the ul-level right aligns the line via the
       text-align inheritance rule (a inherits from ul → text-align
       on <a> only matters once the ul has the same value). */
    #menu-main > .menu-item-products.open > .sub-menu {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        float: none !important;
        text-align: right !important;
    }
    #menu-main > .menu-item-products.open > .sub-menu > li {
        text-align: right !important;
    }
    #menu-main > .menu-item-products.open > .sub-menu > li > a {
        text-align: right !important;
    }
    /* v1.0.95: belt-and-suspenders against a 3rd-party stylesheet
       that injects `transform: translateX(-150px)` (a desktop hover
       animation) on every .sub-menu, sliding the mobile sub-menu
       150px to the left so the four category links sit at x: -60..240
       instead of inside the drawer (x: 90..390). Force every
       positional property to its "no-shift" value with !important;
       the inline JS purge in main.js (setProperty + 'important')
       also writes these, but the stylesheet layer here is the
       last line of defense if a script is slow or absent. */
    #menu-main > li.open > .sub-menu {
        transform: none !important;
        left: auto !important;
        right: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #menu-main > li.open > .sub-menu > li,
    #menu-main > li.open > .sub-menu > li > a {
        transform: none !important;
        left: auto !important;
        right: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Mobile: only show sub-category links under Products, hide the
       third level (individual product names) — v1.0.78 */
    #menu-main > .menu-item-products > .sub-menu > li > .sub-menu,
    #menu-main > .menu-item-products > .sub-menu > li.open > .sub-menu { display: none !important; }
    /* Ensure sub-category links inside the drawer are flush with
       consistent indent and identical padding so spacing stays even
       with non-product items (v1.0.79 → v1.0.85 → v1.0.90).
       v1.0.90 — switch from flex to block + text-align:right so
       the link label visually lands on the same right edge as
       "Home / Products / About Us / Cases / News / Contact Us"
       above it. Padding is symmetric (2rem both sides) so the
       link label sits 2rem in from the right, matching the chevron
       of its parent "Products" row. */
    #menu-main > .menu-item-products > .sub-menu > li {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        border-top: 0 !important;
        border-bottom: 1px solid #f3f3f3 !important;
        height: 4rem !important;
        min-height: 4rem !important;
        max-height: 4rem !important;
        box-sizing: border-box !important;
        line-height: 1.4 !important;
        float: none !important;
        width: 100% !important;
    }
    #menu-main > .menu-item-products > .sub-menu > li > a {
        padding: 0 2rem !important;
        font-size: 1.4rem !important;
        height: 100% !important;
        min-height: 4rem !important;
        max-height: 4rem !important;
        line-height: 4rem !important;
        display: block !important;
        text-align: right !important;
        box-sizing: border-box !important;
        border-bottom: 0 !important;
        float: none !important;
        width: 100% !important;
    }
    .menu-toggle { display: flex; }
}
@media screen and (max-width: 600px) {
    .header-email .email-text { display: none; }
    .xz-header-main { padding: 0 2rem; }
}

/* Hide email + Inquiry button, shrink logo by 30% on small screens (≤820px) */
@media screen and (max-width: 820px) {
    .header-email,
    .header-quote { display: none; }
    .xz-logo { max-width: 11.9rem; }
}

/* ===== Banner Slider ===== */
.xz-banner {
    position: relative;
    overflow: hidden;
}

.xz-banner-track {
    display: flex;
    transition: transform .6s ease;
}

.xz-banner-item {
    min-width: 100%;
    position: relative;
}

.xz-banner-item img {
    width: 100%;
    height: auto;
    display: block;
}

.xz-banner-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 5rem;
    height: 5rem;
    background: rgba(0,0,0,.3);
    border: none;
    color: #fff;
    font-size: 2.4rem;
    cursor: pointer;
    transition: background .3s;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xz-banner-arrow:hover { background: rgba(190,17,17,.8); }
.xz-banner-arrow.prev { left: 3rem; }
.xz-banner-arrow.next { right: 3rem; }

.xz-banner-dots {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    z-index: 10;
}

.xz-banner-dot {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    border: none;
    cursor: pointer;
    transition: all .3s;
}

.xz-banner-dot.active {
    background: #be1111;
    width: 3rem;
    border-radius: .6rem;
}

@media screen and (max-width: 768px) {
    .xz-banner-arrow { width: 3.5rem; height: 3.5rem; font-size: 1.8rem; }
    .xz-banner-arrow.prev { left: 1rem; }
    .xz-banner-arrow.next { right: 1rem; }
}

/* ===== Content Sections ===== */
.content {
    padding: 5rem 0;
}

.home-in {
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

/* Section Title */
.related-post-tit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #eee;
    position: relative;
}

.related-post-tit::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 8rem;
    height: 2px;
    background: #be1111;
}

.related-post-tit h2 {
    font-size: 3.6rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.related-post-tit h2 .tit-icon {
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    position: relative;
}

.related-post-tit h2 .tit-icon::before,
.related-post-tit h2 .tit-icon::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: .7rem solid transparent;
    border-right: .7rem solid transparent;
}

.related-post-tit h2 .tit-icon::before {
    top: 0;
    left: 0;
    border-top: 1.1rem solid #1e6dff;
}

.related-post-tit h2 .tit-icon::after {
    bottom: 0;
    left: 0;
    border-bottom: 1.1rem solid #1e6dff;
}

.related-post-tit .tit-readmore {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    padding: 0 3rem;
    border: 1px solid #333;
    border-radius: 2.8rem;
    color: #333;
    font-size: 1.8rem;
    font-weight: 400;
    background: transparent;
    transition: all .3s;
    height: 4.8rem;
    text-decoration: none;
}

.related-post-tit .tit-readmore:hover {
    background: #be1111;
    border-color: #be1111;
    color: #fff;
    transform: translateX(3px);
}

/* ===== Company Profile ===== */
.page-about-con {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.page-about-tit {
    font-size: 3.6rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 2rem;
    position: relative;
    padding-bottom: 1.5rem;
}

.page-about-tit::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 8rem;
    height: 3px;
    background: #be1111;
}

.wp-block-media-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.wp-block-media-text__media img {
    width: 100%;
    aspect-ratio: 2 / 1;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
}

.wp-block-media-text__content p {
    font-size: 1.8rem;
    line-height: 2.8rem;
    color: #555;
    margin-bottom: 2rem;
}

.wp-block-media-text__content ul {
    margin-bottom: 2rem;
}

.wp-block-media-text__content ul li {
    list-style: none;
    padding: .8rem 0 .8rem 2rem;
    position: relative;
    font-size: 1.6rem;
    color: #333;
    font-weight: 600;
}

.wp-block-media-text__content ul li::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 0.8rem;
    height: 0.8rem;
    background: #be1111;
    border-radius: 50%;
    transform: translateY(-50%);
}

.wp-block-media-text__content .read-more,
.wp-block-media-text__content p:last-child a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: #be1111;
    font-weight: 500;
    font-size: 1.6rem;
    background: transparent;
    border: 1px solid #be1111;
    border-radius: 0 2.5rem 2.5rem;
    height: 4.5rem;
    padding: 0 3rem;
    transition: all .3s;
}

.wp-block-media-text__content p:last-child a:hover {
    background: #be1111;
    color: #fff;
    transform: translateY(-3px);
}

@media screen and (max-width: 810px) {
    .wp-block-media-text {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Gallery Slider */
.gallery-slider {
    position: relative;
    margin: 0 -1rem;
    padding: 0 1rem;
}

.gallery-viewport {
    overflow: hidden;
    border-radius: 4px;
}

.gallery-track {
    display: flex;
    gap: 1.5rem;
    transition: transform .5s cubic-bezier(.4,0,.2,1);
    will-change: transform;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gallery-track li {
    flex: 0 0 calc(25% - 1.2rem);
    overflow: hidden;
    border-radius: 4px;
    aspect-ratio: 4/3;
}

.gallery-track img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.gallery-track li:hover img {
    transform: scale(1.08);
}

.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #be1111;
    color: #fff;
    border: none;
    font-size: 18px;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
    transition: background .3s, transform .3s;
    line-height: 1;
    padding: 0 0 2px;
}

.gallery-arrow:hover {
    background: #a30d0d;
    transform: translateY(-50%) scale(1.08);
}

.gallery-arrow.prev { left: 1rem; }
.gallery-arrow.next { right: 1rem; }

.gallery-arrow:disabled {
    background: rgba(190, 17, 17, .35);
    cursor: not-allowed;
    pointer-events: none;
}

@media screen and (max-width: 1024px) {
    .gallery-track li { flex: 0 0 calc(33.333% - 1rem); }
}

@media screen and (max-width: 700px) {
    .gallery-track li { flex: 0 0 calc(50% - 0.75rem); }
    .gallery-arrow { width: 36px; height: 36px; font-size: 14px; }
}

/* ===== Products Grid ===== */
.xz-pro-ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
}

.loop-pro {
    background: #fff;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    transition: all .3s ease;
}

.loop-pro:hover {
    transform: translateY(-3px);
}

.loop-pro-thumb-x {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: transparent;
    padding: 0;
}

.loop-pro-thumb {
    display: block;
    width: 100%;
    height: 100%;
}

.loop-pro-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}

.loop-pro:hover .loop-pro-thumb img {
    transform: scale(1.05);
}

/* ============================================================
   Shine sweep effect: a diagonal light bar sweeps across the
   product/case image on hover (v1.0.28)
   ============================================================ */
.loop-pro-thumb-x .yinying {
    display: block !important;
    position: absolute;
    top: 0;
    left: -130%;
    width: 70%;
    height: 100%;
    background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-18deg);
    z-index: 2;
    pointer-events: none;
}
.loop-pro-thumb-x:hover .yinying {
    animation: hbrmShine .9s ease;
}

.loop-pro-info {
    padding: 1.5rem 1.5rem 2.5rem;
    text-align: center;
}

.loop-pro-tit {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.4;
}

.loop-pro-tit a {
    color: #333;
    font-size: 2rem;
    font-weight: 400;
    transition: color .3s;
}

.loop-pro-tit a:hover { color: #be1111; }

.loop-pro:hover .loop-pro-tit a {
    color: #be1111;
}

@media screen and (max-width: 1024px) {
    .xz-pro-ul { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 600px) {
    .xz-pro-ul { grid-template-columns: 1fr; }
}

/* ============================================================
   Home Hot Products: title moved OUTSIDE the card,
   card only keeps the bottom-right corner rounded (v1.0.78)
   Scoped under .home-product so other product listing pages
   keep the legacy "title inside white card" look.
   ============================================================ */
.home-product .xz-pro-ul {
    gap: 4rem 3rem;
    align-items: start;
}

.home-product .loop-pro {
    background: transparent;
    border-radius: 0 0 12px 0;
    display: flex;
    flex-direction: column;
}

.home-product .loop-pro-thumb-x {
    border-radius: 0 0 12px 0;
    display: block;
    text-decoration: none;
    color: inherit;
}

.home-product .loop-pro-tit {
    margin: 1.5rem 0 0;
    padding: 0;
    text-align: center;
}

@media screen and (max-width: 1024px) {
    .home-product .xz-pro-ul { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 600px) {
    .home-product .xz-pro-ul { grid-template-columns: 1fr; }
}

/* ============================================================
   Products listing pages (/products/, /product/, /product/cat/):
   same ykzgmac-style treatment — title OUTSIDE the card, card
   only keeps the bottom-right corner rounded (v1.0.79).
   Affects: .xz-pro-list (page-products / archive-product /
   taxonomy-product_cat). Single-product / single-case /
   single-news / page-about-us / page-cases related-product
   blocks are OUTSIDE .xz-pro-list so they keep the legacy look.
   ============================================================ */
.xz-pro-list .xz-pro-ul {
    gap: 4rem 3rem;
    align-items: start;
}

.xz-pro-list .loop-pro {
    background: transparent;
    border-radius: 0 0 12px 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.xz-pro-list .loop-pro-thumb-x {
    border-radius: 0 0 12px 0;
    display: block;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}

.xz-pro-list .loop-pro-tit {
    margin: 1.5rem 0 0;
    padding: 0;
    text-align: center;
    font-size: 1.8rem;
}

@media screen and (max-width: 1024px) {
    .xz-pro-list .xz-pro-ul { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 600px) {
    .xz-pro-list .xz-pro-ul { grid-template-columns: 1fr; gap: 3rem 0; }
}

/* ===== News Section ===== */
.news-ls {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
}

.loop-news {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
    transition: all .3s ease;
}

.loop-news:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,.1);
    transform: translateY(-5px);
}

.loop-news-thumb {
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.loop-news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.loop-news:hover .loop-news-thumb img {
    transform: scale(1.1);
}

.loop-news-info {
    padding: 2rem 1.5rem;
}

.loop-news-tit {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
    line-height: 1.5;
    margin-bottom: 1rem;
    min-height: 5.4rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color .3s;
}

.loop-news-tit:hover { color: #be1111; }

.loop-news-date {
    font-size: 1.4rem;
    color: #999;
    transition: color .3s;
}

.loop-news:hover .loop-news-tit,
.loop-news:hover .loop-news-date { color: #be1111; }

@media screen and (max-width: 1024px) {
    .news-ls { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 600px) {
    .news-ls { grid-template-columns: 1fr; }
}

/* ===== Contact Form Section ===== */
.public-form {
    background: #fff;
    padding: 8rem 0;
}

.public-form-in {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
}

/* Left side - contact info */
.public-form-l {
    width: 41rem;
    background: #f8f8f8;
    padding: 7rem 4rem;
}

.public-form-txt {
    font-size: 3.2rem;
    line-height: 4rem;
    color: #666;
    font-weight: 300;
}

.public-form-contact {
    margin-top: 4rem;
}

.public-form-contact li {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.contact-icon {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background: #fff;
    color: #be1111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.public-form-contact li > div {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.public-form-contact li > div > span:first-child {
    font-size: 1.3rem;
    color: #888;
}

.public-form-contact a {
    font-size: 1.6rem;
    font-weight: 600;
    color: #333;
    transition: color .3s;
}

.public-form-contact a:hover { color: #be1111; }

.public-form-contact li > div > span:first-child {
	display: block;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.7rem;
	opacity: .9;
}

.online_btn .chat_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    background: #fff;
    color: #be1111;
    border: 1px solid #be1111;
    padding: 1.2rem 3.5rem;
    border-radius: 50px;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    transition: all .3s;
    height: 5.6rem;
	margin-top: 0.8rem;
	width: 100%;
}

.online_btn .chat_btn:hover {
    background: #be1111;
    color: #fff;
}

.online_btn .chat_btn svg {
    fill: currentColor;
    flex-shrink: 0;
}

/* Right side - form */
.public-form-r {
    width: calc(100% - 41rem);
    padding: 0 0 0 4rem;
}

.form-tip {
    font-size: 3rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 2.5rem;
}

.xz-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 2.5rem;
}

.xz-form-info {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.xz-form-label {
    font-size: 1.4rem;
    font-weight: 600;
    color: #555;
}

.xz-form-label.required::after {
    content: ' *';
    color: #be1111;
}

.xz-form-input {
    height: 4.8rem;
    padding: 0 1.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    font-size: 1.5rem;
    font-family: 'Inter', sans-serif;
    background: #fafafa;
    transition: border-color .3s, background .3s;
}

.xz-form-input:focus {
    border-color: #be1111;
    background: #fff;
    outline: none;
}

.xz-form-msg {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.xz-form-textarea {
    min-height: 10rem;
    padding: 1.2rem 1.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    font-size: 1.5rem;
    font-family: 'Inter', sans-serif;
    background: #fafafa;
    resize: vertical;
    transition: border-color .3s, background .3s;
}

.xz-form-textarea:focus {
    border-color: #be1111;
    background: #fff;
    outline: none;
}

.xz-form-btns {
    margin-top: 2.5rem;
}

.xz-form-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    background: #be1111;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 1.4rem 4rem;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: .5px;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .3s;
}

.xz-form-button:hover {
    background: #113c68;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(17,60,104,.25);
}

.xz-form-button svg {
    fill: #fff;
}

/* Popup form compact 2-column layout */
.xz-form-grid--popup {
    gap: 1.2rem 1.5rem;
}

.xz-form-msg--popup {
    margin-top: 1.2rem;
}

.xz-form-btns--popup {
    margin-top: 1.5rem;
}

@media screen and (max-width: 900px) {
    .public-form-in { flex-direction: column; gap: 4rem; }
    .public-form-l { width: 100%; padding: 3rem; }
    .public-form-r { width: 100%; padding: 3rem; }
    .public-form-txt { font-size: 2.4rem; }
}

@media screen and (max-width: 600px) {
    .xz-form-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .xz-form-grid--popup { grid-template-columns: 1fr; gap: 1rem; }
    .public-form-r { padding: 2rem 0; }
    .form-tip { font-size: 2.4rem; }
    .public-form-r .wpcf7-form .wpcf7-submit,
    .public-form-r .wpcf7 .wpcf7-submit,
    .public-form-r .hbrm-cf7-grid .wpcf7-form .wpcf7-submit {
        width: 100%;
        padding: 1rem 0;
    }
    .footer { padding-bottom: 7rem; }
    .xz-pro-list { padding: 0 0 4rem 0; }
}

/* ===== Floating Sidebar ===== */
.sider-contact {
    position: fixed;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
}

.right-nav {
    background: #fff;
    border-radius: 4rem;
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
}

.right-nav-list {
    display: flex;
    flex-direction: column;
}

.right_li {
    position: relative;
}

.right_li::after {
    content: '';
    display: block;
    width: 2rem;
    height: 1px;
    background: #e0e0e0;
    margin: 0 auto;
}

.right_li:last-child::after {
    display: none;
}

.right_li > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 6.4rem;
    padding: 1.2rem .4rem;
    color: #333;
    transition: all .3s;
    cursor: pointer;
    text-decoration: none;
}

.right_li > a:hover .btn-tit {
    color: #be1111;
}

.right_li .iconfont {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    color: #be1111;
    font-size: 2.5rem;
    margin-bottom: .6rem;
}

.right_li .btn-tit {
    font-size: 1.1rem;
    white-space: nowrap;
    color: #333;
    transition: color .3s;
}

.right_hide {
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translate(-110%, -50%);
    background: #fff;
    border-radius: .5rem;
    box-shadow: rgba(51, 51, 51, .15) 0 0 1rem -2px;
    color: #333;
    font-size: 14px;
    line-height: 16px;
    padding: 12px 16px;
    opacity: 0;
    visibility: hidden;
    transition: .5s;
    white-space: nowrap;
}

.right_li:hover .right_hide {
    opacity: 1;
    transform: translate(-100%, -50%);
    visibility: visible;
}

.right_hide::before {
    content: '';
    position: absolute;
    right: -8px;
    top: calc(50% - 4px);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid #fff;
}

.right_hide img {
    display: block;
    max-width: 12rem;
}

.right_li_wa .right_hide,
.right_li_wechat .right_hide {
    padding: 5px;
}

#top-btn {
    display: none;
    width: 5rem;
    height: 5rem;
    background: #be1111;
    color: #fff;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 999;
    transition: all .3s;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(190,17,17,.35);
    gap: .2rem;
}

#top-btn:hover {
    background: #a00e0e;
    transform: translateY(-3px);
}

#top-btn.show { display: flex; }

.top-icon-home,
.top-arrow-up {
    display: none;
}

#top-btn::before {
    content: '';
    width: 0;
    height: 0;
    border-left: .6rem solid transparent;
    border-right: .6rem solid transparent;
    border-bottom: .7rem solid #fff;
    margin-bottom: .15rem;
}

#top-btn::after {
    content: '';
    width: .9rem;
    height: .12rem;
    background: #fff;
}

/* ===== Bottom Contact Bar (Mobile) ===== */
.bottom-contact-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0,0,0,.1);
    z-index: 999;
}
.bottom-contact-list {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: .6rem 0;
    margin: 0;
    list-style: none;
}
.bottom-contact-list li {
    flex: 1;
    text-align: center;
}
.bottom-contact-list li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #333;
    text-decoration: none;
    padding: .4rem 0;
}
.bottom-contact-list li a .iconfont {
    color: #be1111;
    font-size: 2.6rem;
    margin-bottom: .3rem;
    line-height: 1;
}
.bottom-contact-list li a span {
    font-size: 1.1rem;
    color: #333;
}

@media screen and (max-width: 768px) {
    .sider-contact { right: .6rem; }
    .right_li > a { width: 5.2rem; padding: 1rem .3rem; }
    .right_li .iconfont { width: 2.8rem; height: 2.8rem; font-size: 1.4rem; }
    .right_li .btn-tit { font-size: .9rem; }
    #top-btn { width: 4rem; height: 4rem; }
}

@media screen and (max-width: 800px) {
    .right-nav, #top-btn { display: none !important; }
    .bottom-contact-bar { display: block; }
    body { padding-bottom: 6rem; }
}

/* ===== Footer ===== */
.footer {
    background: #2c3135;
    color: #ccc;
}

.footer-top {
    padding: 5rem 0 5.2rem;
}

.xz-footet-menu-info {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.5fr;
    gap: 3rem;
}

.f-sec-tit {
    margin-bottom: 2rem;
}

.f-sec-tit a {
    color: #fff;
    font-size: 2.4rem;
    font-weight: 700;
    display: inline-block;
}

.f-menu ul {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.f-menu li a {color: #fff;font-size: 1.6rem;transition: color .3s;}

.f-menu li a:hover { color: #be1111; }

.xz-footer-contact {
    margin-bottom: 2.6rem;
}

.xz-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    margin-bottom: 1.5rem;
}

.xz-footer-contact li > i {
    font-size: 2.5rem;
    color: #fff;
    font-family: iconfont !important;
    font-style: normal;
    margin-top: .2rem;
    line-height: 1;
}

.xz-footer-contact span {
    display: block;
    font-size: 1.4rem;
    font-weight: 400;
}

.xz-footer-contact a {
    font-size: 1.8rem;
    color: #fff;
    font-weight: 700;
    transition: color .3s;
}

.xz-footer-contact a:hover { color: #be1111; }

.xz-sns-ul {
    display: flex;
    gap: .8rem;
}

.xz-sns-li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    background: rgba(255,255,255,.08);
    border-radius: .4rem;
    color: #ccc;
    font-size: 1.8rem;
    transition: all .3s;
}

.xz-sns-li a:hover {
    background: #be1111;
    color: #fff;
    transform: translateY(-3px);
}

/* Override iconfont default red color inside sns links */
.xz-sns-li a .iconfont {
    color: inherit;
    font-size: inherit;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 2.5rem 0;
}

.footer-bottom-in {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    font-size: 1.6rem;
    color: #fff;
}

.privacy-link {
    display: flex;
    gap: 2rem;
}

.privacy-link a {
    color: #fff;
    font-size: 1.6rem;
    transition: color .3s;
}

.privacy-link a:hover { color: #be1111; }

@media screen and (max-width: 1024px) {
    .xz-footet-menu-info {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}

@media screen and (max-width: 600px) {
    .xz-footet-menu-info {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .xz-footet-menu-info .f-menu {
        display: none;
    }
    .footer-bottom-in {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* ===== Sidebar & Footer Icon Styling ===== */
.sidebar-icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: .3rem;
    font-style: normal;
}

.contact-icon {
    font-size: 2.4rem;
    color: #be1111;
    margin-top: .3rem;
    line-height: 1;
}

/* ===== Utility ===== */
.dn { display: none; }
.db { display: block; }
.tc { text-align: center; }
.tl { text-align: left; }
.tr { text-align: right; }
.mt-0 { margin-top: 0; }
.mt-mi { margin-top: 3rem; }
.mb-mx { margin-bottom: 5rem; }

/* ============================================
   Inner Page Styles
   ============================================ */

/* ===== Page Banner (toppic) ===== */
.toppic {
    position: relative;
    width: 100%;
    height: 40rem;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.toppic > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.toppic::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,.5), rgba(190,17,17,.3));
    z-index: 2;
}

.toppic_content {
    position: relative;
    z-index: 3;
    width: 100%;
}

.toppic_content.none {
    background: linear-gradient(135deg, #2c3135 0%, #1a1d20 100%);
    height: 20rem;
    display: flex;
    align-items: center;
}

.toppic_content .xz-main {
    padding: 0 2rem;
}

.toppic_tit {
    color: #fff !important;
    font-size: 4.6rem !important;
    line-height: 1.2 !important;
    margin: 0 0 1.5rem !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.3);
}

.toppic_content.none .toppic_tit {
    text-transform: capitalize;
}

/* ===== Breadcrumbs ===== */
.breadcrumbs-x #breadcrumbs {
    margin: 0;
    color: rgba(255,255,255,.85);
    font-size: 1.4rem;
}

.breadcrumbs-x #breadcrumbs i {
    margin-right: .5rem;
    font-style: normal;
}

.breadcrumbs-x a {
    color: rgba(255,255,255,.85);
    transition: color .3s;
}

.breadcrumbs-x a:hover {
    color: #fff;
}

.breadcrumbs-x .breadcrumb_last {
    color: #fff;
    font-weight: 600;
}

.detail-breadcrumbs {
    padding: 2rem 2rem;
    border-bottom: 1px solid #eee;
}

.detail-breadcrumbs #breadcrumbs {
    margin: 0;
    color: #999;
    font-size: 1.4rem;
}

.detail-breadcrumbs #breadcrumbs i {
    margin-right: .5rem;
    font-style: normal;
}

.detail-breadcrumbs a {
    color: #666;
    transition: color .3s;
}

.detail-breadcrumbs a:hover {
    color: #be1111;
}

.detail-breadcrumbs .breadcrumb_last {
    color: #be1111;
    font-weight: 600;
}

/* ===== Products List Page ===== */
.xz-pro-list {
    padding: 4rem 0;
    background: #f8f8f8;
}

.pro-list-in {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

#menu-product-menu,
#menu-news-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    background: transparent;
    border-radius: 0;
    overflow: visible;
}

#menu-product-menu li,
#menu-news-menu li {
    flex: auto;
    min-width: 12rem;
}

#menu-product-menu a,
#menu-news-menu a {
    display: block;
    padding: 2.3rem 2rem;
    text-align: center;
    background: #fff;
    color: #666;
    font-size: 2rem;
    font-weight: 500;
    border-radius: 0 0 1.8rem 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    transition: all 0s;
}

#menu-product-menu a:hover,
#menu-news-menu a:hover {
    box-shadow: 0 .13rem 1.63rem 0 rgba(0, 0, 0, .08);
}

#menu-product-menu .current-menu-item a,
#menu-news-menu .current-menu-item a {
    background: #be1111;
    box-shadow: 0 .13rem 1.63rem 0 rgba(0, 0, 0, .08);
    color: #fff;
}

.xz-sec {
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: space-between;
    margin-top: 6rem;
}

.xz-sec-l {
    width: 34rem;
}

.xz-sec-l-in {
    position: sticky;
    top: 3rem;
}

.sec-contact {
    background: #fff;
    box-shadow: 0 0 2rem .1rem rgba(0,0,0,.08);
    border-radius: .4rem;
    overflow: hidden;
}

.sec-contact-hd {
    padding: 1.8rem 2rem 0rem;
}

.sec-contact h5 {
    font-size: 2.4rem;
    font-weight: bold;
    color: #333;
    margin: 0rem;
    line-height: 1.4;
    font-family: Inter, sans-serif;
}

.sec-contact-x {
    display: flex;
    flex-direction: column;
    padding: 0rem 0rem 1.5rem 0rem;
}

.sec-contact-item {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding: 2.5rem 1rem;
    border-bottom: 1px solid #ddd;
}

.sec-contact-item:last-child {
    border-bottom: none;
}

.sec-contact-icon {
    align-items: center;
    border: #c62828 1px solid;
    border-radius: 50%;
    display: flex;
    height: 4.2rem;
    justify-content: center;
    width: 4.2rem;
    flex-shrink: 0;
}

.sec-contact-icon .iconfont {
    color: #c62828;
    font-size: 2rem;
}

.sec-contact-icon svg {
    color: #c62828;
    width: 2rem;
    height: 2rem;
}

.sec-contact-info {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.sec-contact-label {
    font-size: 1.4rem;
    color: #666;
    font-weight: 500;
}

.sec-contact-val {
    font-size: 1.8rem;
    font-weight: 600;
    color: #222;
    word-break: normal;
    overflow-wrap: normal;
    transition: color .3s;
    font-family: Inter, sans-serif;
    text-decoration: none;
}

.sec-contact-val:hover {
    color: #C62828;
    text-decoration: underline;
}

.pro-cat-name {
    font-size: 2.4rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #eee;
    position: relative;
}

.pro-cat-name::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 6rem;
    height: 2px;
    background: #be1111;
}

.xz-sec-r {
    width: calc(100% - 38rem);
}

.xz-sec-r .xz-pro-ul {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media screen and (max-width: 1200px) {
    .xz-sec-r { width: calc(100% - 34rem); }
    .xz-sec-r .xz-pro-ul { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 900px) {
    .xz-sec-l, .xz-sec-r { width: 100%; }
    .xz-sec-l { position: static; }
}

@media screen and (max-width: 600px) {
    .menu-product-menu-container {
        display: none;
    }
    .xz-sec {
        margin-top: 0;
    }
    .pagination {
        margin-bottom: 3rem;
    }
}

/* ===== Pagination ===== */
.pagination {
    margin-top: 4rem;
    text-align: center;
}

.pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: .8rem;
    flex-wrap: wrap;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 5rem;
	height: 5rem;
	padding: 0 1rem;
	border: 1px solid #ddd;
	border-radius: 0;
	color: #666;
	font-size: 1.4rem;
	font-weight: 600;
	transition: all .3s ease;
	text-decoration: none;
}

.pagination .page-numbers:hover {
	background: #be1111;
	color: #fff;
	transform: translateY(-3px);
	border-color: #be1111;
}

.pagination .page-numbers:active {
	transform: scale(.9);
}

.pagination .page-numbers.next i,
.pagination .page-numbers.prev i {
	font-size: 1.4rem;
}

.pagination .page-numbers.current {
	background: #be1111;
	border-color: #be1111;
	color: #fff;
}

.pagination .page-numbers.current:hover {
	background: #be1111;
	border-color: #be1111;
	color: #fff;
}

/* ===== Product Detail Page ===== */
.xz-pro-detail {
    padding: 0;
}

.pro-detail-top {
    padding: 4rem 0;
}

.detail-top-in {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Product Gallery */
.pro-gallery {
    width: 52%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.gallery-l {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    background: #f6f6f6;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #eee;
}

.gallery-l .gallery-item-a {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease;
    z-index: 1;
}

.gallery-l .gallery-item-a.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.gallery-l .gallery-item-a img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.controller-slick {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: .5rem;
}

.controller-slick .dot {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #ddd;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all .3s;
    outline: none;
}

.controller-slick .dot:hover {
    background: #f08080;
    transform: scale(1.15);
}

.controller-slick .dot.active {
    background: #be1111;
    width: 1rem;
    height: 1rem;
    box-shadow: 0 0 0 4px rgba(190, 17, 17, .12);
}

.controller-dots {
    display: flex;
    gap: .8rem;
}

.controller-dots button {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid #ddd;
    background: transparent;
    cursor: pointer;
    transition: all .3s;
    padding: 0;
}

.controller-dots button.active {
    background: #be1111;
    border-color: #be1111;
}

/* Product Detail Right */
.detail-top-r {
    width: 45%;
    padding-top: 1rem;
}

.pro-detail-tit {
    font-size: 4.6rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 1.5rem;
    line-height: 1.3;
}

.decoration-line {
    width: 6rem;
    height: 3px;
    background: #333;
    margin-bottom: 2.5rem;
}

.pro-detail-param {
    background: #eee;
    margin-top: 4rem;
    margin-bottom: 2.5rem;
    padding: 3rem;
}

.pro-detail-param ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pro-detail-param li {
    color: #333;
    font-family: Inter, sans-serif;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 2.5rem;
    margin-bottom: 1.8rem;
    padding-left: 1.8rem;
    position: relative;
}

.pro-detail-param li:last-child {
    margin-bottom: 0;
}

.pro-detail-param li::before {
    content: "";
    display: inline-block;
    width: .8rem;
    height: .8rem;
    background: #be1111;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: .9rem;
}

.pro-detail-param li strong {
    color: #333;
    font-weight: 700;
    margin-right: .3rem;
}

.detail-top-in .xz-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
    margin-top: 5rem;
    margin-bottom: 0;
}

.detail-top-in .xz-btns a {
    align-items: center;
    border-radius: 3rem;
    display: flex;
    font-size: 1.7rem;
    font-weight: 400;
    gap: 1rem;
    height: 6rem;
    justify-content: center;
    min-width: 17rem;
    text-transform: uppercase;
    transition: all .3s;
    width: 49%;
    padding: 0 2rem;
}

.detail-top-in .xz-btns a:hover {
    transform: translateY(-3px);
}

.detail-top-in .pro-free-quote {
    background: #113c68;
    color: #fff !important;
}

.detail-top-in .pro-free-quote:hover {
    background: #0d2c4d;
    box-shadow: 0 8px 20px rgba(17,60,104,.25);
}

.detail-top-in .pro-send-email {
    background: #be1111;
    color: #fff !important;
    border: none;
}

.detail-top-in .pro-send-email:hover {
    background: #a30d0d;
    box-shadow: 0 8px 20px rgba(190,17,17,.25);
}

.pro-intro-sns {
    margin-top: 3.7rem;
    padding-top: 0;
}

.a2a_kit {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.a2a_kit > span:first-child,
.a2a_kit > div:first-child {
	font-size: 1.6rem;
	color: #333;
	font-weight: 400;
}

.a2a_kit a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
	width: 4.2rem;
	height: 4.2rem;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #eaeaea;
	color: #999;
	font-size: 1.6rem;
	line-height: 1;
	transition: all .3s;
	text-decoration: none;
	overflow: hidden;
	position: relative;
}

.a2a_kit a > span,
.a2a_kit a > img,
.a2a_kit a > svg,
.a2a_kit a > i {
    width: 2rem;
    height: 2rem;
    display: inline-block;
    border-radius: 0;
    background: transparent !important;
    fill: currentColor;
}

.a2a_kit a > svg {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
}

.a2a_kit a:hover {
    border: 1px solid #be1111;
    color: #be1111;
}

/* Detail Nav (tabs) */
.nav-container {
    background: #333;
    position: sticky;
    top: 9rem;
    z-index: 990;
    /* 突破父容器 xz-main 的 1360px 限制，铺满整个浏览器视口 */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.nav-container .xz-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}

.content-sec-nav {
    display: flex;
    font-size: 1.6rem;
    font-weight: 500;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow-x: auto;
}

.content-sec-nav li {
    flex: 0 0 auto;
    text-align: center;
    position: relative;
}

.content-sec-nav li a {
    display: flex;
    align-items: center;
    color: #fff;
    font-weight: 700;
    height: 100%;
    line-height: 1.32;
    padding: 2rem 1.8rem;
    white-space: nowrap;
    transition: background-color .3s;
    text-decoration: none;
}

.content-sec-nav .pro-nav-current a,
.content-sec-nav li a:hover,
.content-sec-nav li a.active {
    background-color: #be1111;
    color: #fff;
}

.nav-container .popup-modal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #be1111;
    color: #fff !important;
    width: 14rem;
    height: 4rem;
    border-radius: 2rem;
    font-size: 1.4rem;
    font-weight: 400;
    text-transform: uppercase;
    transition: all .3s;
    text-decoration: none;
}

.nav-container .popup-modal:hover {
    background: #a30d0d;
}

/* Detail Content */
.pro-detail-bottom {
    padding: 3rem 0;
}

.detail-content {
    padding: 2rem;
    max-width: var(--main_w);
    margin: 0 auto;
}

.detail-content h3 {
    font-size: 2.6rem;
    font-weight: 700;
    color: #333;
    margin: 3rem 0 1.5rem;
    padding-left: 1.5rem;
    border-left: 4px solid #be1111;
}

.detail-content h3:first-child {
    margin-top: 0;
}

.detail-content p {
    font-size: 1.6rem;
    color: #555;
    line-height: 2.8rem;
    margin-bottom: 1.5rem;
}

.detail-content ul {
    margin-bottom: 2rem;
    padding-left: 2rem;
}

.detail-content ul li {
    list-style: disc;
    padding: .5rem 0;
    font-size: 16px;
    color: #333;
}

/* Feature Cards */
.xz-cards-block {
    display: grid;
    gap: 2rem;
    margin: 2rem 0;
}

.xz-cards-block[data-cols="3"] {
    grid-template-columns: repeat(3, 1fr);
}

.xz-cards-block[data-cols="2"] {
    grid-template-columns: repeat(2, 1fr);
}

.xz-card-egd5,
.xz-card-m95o {
    background: #f8f8f8;
    border-radius: 8px;
    padding: 2.5rem;
    transition: all .3s;
    border: 1px solid #eee;
}

.xz-card-egd5:hover,
.xz-card-m95o:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    transform: translateY(-3px);
    border-color: #be1111;
}

.xz-card-m95o-img {
    margin-bottom: 1.5rem;
    border-radius: 6px;
    overflow: hidden;
}

.xz-card-m95o-img img {
    width: 100%;
    display: block;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.xz-card-egd5 .tit,
.xz-card-m95o .tit {
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 1rem;
}

.xz-card-egd5 .txt p,
.xz-card-m95o .txt p {
    font-size: 1.4rem;
    color: #666;
    line-height: 2.4rem;
    margin: 0;
}

/* Ordered Feature List (Advantages & Features) */
.xz-feature-list {
    counter-reset: feat;
    list-style: none;
    padding: 0;
    margin: 2rem 0 2.5rem;
}
.detail-content .xz-feature-list {
    padding-left: 3.5rem;
}
.xz-feature-list > li {
    counter-increment: feat;
    position: relative;
    padding: .6rem 0;
    font-size: 1.5rem;
    line-height: 2.4rem;
    color: #555;
}
.detail-content .xz-feature-list > li {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}
.xz-feature-list > li + li {
    margin-top: 1.4rem;
}
.xz-feature-list > li::before {
    content: counter(feat);
    position: absolute;
    left: -3.6rem;
    top: 0;
    /* 圆直径 2.8rem，圆心 ≈ li 顶 + 1.4rem；
       文字首行中线 ≈ li padding-top 0.6rem + 字号 1.5rem / 2 = 1.35rem。
       top:0 让圆心落在 1.4rem，与文字首行中线 1.35rem 基本对齐 */
    width: 2.8rem;
    height: 2.8rem;
    line-height: 2.8rem;
    border-radius: 50%;
    background: #be1111;
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 1.4rem;
    font-family: inherit;
}
.xz-feature-list > li strong {
    color: #333;
    font-weight: 700;
    margin-right: .4rem;
}

/* Image Row (2 or 3 columns) */
.xz-img-row {
    display: grid;
    gap: 1.5rem;
    margin: 2.5rem 0;
}
.xz-img-row[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.xz-img-row[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.xz-img-row figure {
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f8f8;
}
.xz-img-row img {
    width: 100%;
    display: block;
    aspect-ratio: 4/3;
    object-fit: cover;
    transition: transform .5s;
}
.xz-img-row figure:hover img { transform: scale(1.04); }

/* Text + Image split (Working Principle) */
.xz-text-media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    margin: 2.5rem 0;
}
.xz-text-media .tm-text p {
    font-size: 16px;
    color: #333;
    line-height: 2.8rem;
    margin: 0 0 1.2rem;
}
.xz-text-media .tm-text p:last-child { margin-bottom: 0; }
.xz-text-media .tm-media {
    border-radius: 8px;
    overflow: hidden;
    background: #f8f8f8;
}
.xz-text-media .tm-media img {
    width: 100%;
    display: block;
    object-fit: cover;
}
.xz-text-media.no-media { grid-template-columns: 1fr; }
.xz-text-media.no-media .tm-media { display: none; }
.xz-text-media.no-text { grid-template-columns: 1fr; }
.xz-text-media.no-text .tm-text { display: none; }

/* Tech Parameter Tables */
.detail-content .wp-block-table {
    margin: 2rem 0;
    overflow-x: auto;
}

.detail-content .wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.3rem;
}

.detail-content .wp-block-table th,
.detail-content .wp-block-table td {
    padding: 1rem 1.5rem;
    border: 1px solid #e0e0e0;
    text-align: center;
    color: #555;
}

.detail-content .wp-block-table thead th,
.detail-content .wp-block-table thead td {
    background: #be1111;
    color: #fff;
    font-weight: 600;
}

/* ===== Product detail: table header styles (auto-detected by JS) ===== */
.detail-content .wp-block-table .table-header-row td,
.detail-content .wp-block-table .table-header-row th,
.detail-content .wp-block-table thead th,
.detail-content .wp-block-table thead td {
    background: #be1111;
    color: #fff;
    font-weight: 600;
}

/* Override td:first-child gray background for header rows */
.detail-content .wp-block-table .table-header-row td:first-child,
.detail-content .wp-block-table thead td:first-child {
    background: #be1111;
    color: #fff;
}

.detail-content .wp-block-table tbody tr:nth-child(even) {
    background: #f9f9f9;
}

.detail-content .wp-block-table tbody tr:hover {
    background: #fff5f5;
}

.detail-content .wp-block-table figcaption {
    text-align: center;
    padding: 1rem 0rem;
    color: #999;
    font-size: 1.3rem;
}

.detail-content .wp-block-table td:first-child {
    font-weight: 600;
    color: #333;
    background: #f5f5f5;
}

@media screen and (max-width: 1024px) {
    .detail-top-in { flex-direction: column; gap: 2rem; }
    .detail-top-in .pro-gallery,
    .detail-top-in .detail-top-r { width: 100%; }
    .detail-top-in .xz-btns a { width: 100%; }
    .detail-top-in .xz-btns { flex-direction: column; gap: 1rem; }
    .xz-cards-block[data-cols="3"] { grid-template-columns: repeat(2, 1fr); }
    .xz-img-row[data-cols="3"] { grid-template-columns: repeat(2, 1fr); }
    .xz-text-media { grid-template-columns: 1fr; gap: 2rem; }
    .nav-container .xz-main { flex-direction: column; gap: 1rem; padding: 1rem; }
    .content-sec-nav { justify-content: center; }
    .public-form { padding: 4rem 0; }
}

/* 移动端（≤1024px）隐藏 sticky 导航条内的 Free Quote 按钮，PC 端保留 */
@media screen and (max-width: 1024px) {
    .nav-container .popup-modal { display: none; }
}

@media screen and (max-width: 600px) {
    .xz-cards-block[data-cols="3"],
    .xz-cards-block[data-cols="2"] { grid-template-columns: 1fr; }
    .xz-img-row[data-cols="3"],
    .xz-img-row[data-cols="2"] { grid-template-columns: 1fr; }
    .detail-content .xz-feature-list { padding-left: 3.2rem; }
    .xz-feature-list > li::before { left: -3.2rem; width: 2.4rem; height: 2.4rem; line-height: 2.4rem; font-size: 1.2rem; }
    /* Inner-page banner keeps scaling by aspect ratio on the smallest
       phones; the previous min-height: 16rem forced a fixed floor and
       broke the "responsive to width" goal (v1.0.82). */
    .toppic_tit { font-size: 2.4rem !important; }
    .toppic_content { padding-bottom: 1rem; }
    .pro-detail-tit { font-size: 2.4rem; }
    .detail-content { padding: 1rem; }
}

/* ===== News List Page ===== */
.xz-newsls {
    padding: 4rem 0;
    background: #f8f8f8;
}

.xz-newsls .page-menu {
    margin-bottom: 3rem;
}

.news-ls-x .news-ls {
    grid-template-columns: repeat(3, 1fr);
}

@media screen and (max-width: 1024px) {
    .news-ls-x .news-ls { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 600px) {
    .news-ls-x .news-ls { grid-template-columns: 1fr; }
}

/* ===== Cases / Service Page ===== */
.xz-service {
    padding: 4rem 0;
    background: #f8f8f8;
}

.xz-service-in {
    padding: 0 2rem;
}

.xz-service-ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
}

.xz-service-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    transition: all .3s;
}

.xz-service-item:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,.1);
    transform: translateY(-5px);
}

.service-item-img {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.service-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
}

.xz-service-item:hover .service-item-img img {
    transform: scale(1.1);
}

.service-item-info {
    padding: 2rem 1.5rem;
    transition: background .3s;
}

.service-item-tit {
    font-size: 2.4rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 1rem;
    transition: color .3s;
}

.xz-service-item:hover .service-item-tit {
    color: #fff;
}

.service-item-txt {
    font-size: 1.8rem;
    color: #666;
    line-height: 2.4rem;
    transition: color .3s;
}

.xz-service-item:hover .service-item-info {
    background: #333;
}

.xz-service-item:hover .service-item-txt {
    color: #fff;
}

@keyframes hbrmShine {
    0%   { left: -130%; }
    100% { left: 130%; }
}

@media screen and (max-width: 1024px) {
    .xz-service-ul { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 600px) {
    .xz-service-ul { grid-template-columns: 1fr; }
}

/* ===== Contact Page Map ===== */
.xz-contact {
    padding: 4rem 0;
}

.xz-contact-in {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding: 0 2rem;
}

.xz-map {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
}

.xz-map iframe {
    width: 100%;
    height: 450px;
    border: 0;
    display: block;
}

.xz-map-add {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 2rem;
    background: #f8f8f8;
    border-radius: 8px;
}

.xz-map-add i {
    font-size: 2rem;
    color: #be1111;
    margin-top: .2rem;
    font-style: normal;
}

.xz-map-add span {
    font-size: 1.6rem;
    color: #555;
    line-height: 2.6rem;
}

.xz-map-add strong {
    color: #333;
    font-weight: 700;
}

/* ===== About Us Page ===== */
.page-about {
    padding: 5rem 0;
    background: #f8f8f8;
}

.page-about-in {
    padding: 0 2rem;
}

.page-about-con {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

/* About page media-text variations */
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
    grid-column: 2;
    grid-row: 1;
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
    grid-column: 1;
    grid-row: 1;
}

.page-about-intro {
    margin: 5rem 0;
    background: #2c3135;
    padding: 6rem 0;
    position: relative;
}

.about-video-wrap {
    position: relative;
    max-width: 110rem;
    margin: 0 auto;
    padding: 6rem 5rem;
    border: 3px solid #be1111;
    border-radius: 4px;
    background: #2c3135;
}

.about-video {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: #1a1d20;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 2;
}

.popup-video > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .55;
    display: block;
    transition: opacity .3s;
}

.popup-video:hover > img { opacity: .75; }

.popup-video .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    background: rgba(190,17,17,.95);
    color: #fff;
    font-size: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: .4rem;
    box-shadow: 0 4px 18px rgba(0,0,0,.4);
    transition: transform .3s;
}

.popup-video:hover .play-icon { transform: translate(-50%, -50%) scale(1.08); }

.popup-video::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9rem;
    height: 9rem;
    margin: -4.5rem 0 0 -4.5rem;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.35);
    animation: pulse 2s infinite;
    pointer-events: none;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

.about-video-thumb {
    position: absolute;
    bottom: -3.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    border: 3px solid #be1111;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
    cursor: pointer;
    z-index: 5;
}

.about-video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== Simple Content Page (Accessories / Privacy / Cookie) ===== */
.simple-page {
    padding: 5rem 0;
}

.simple-page-in {
    max-width: 90rem;
    margin: 0 auto;
    padding: 0 2rem;
}

.simple-page-in h1 {
    font-size: 3.6rem;
    margin-bottom: 3rem;
}

.simple-page-in h2 {
    font-size: 2.4rem;
    margin: 3rem 0 1.5rem;
    color: #333;
}

.simple-page-in h3 {
    font-size: 2rem;
    margin: 2.5rem 0 1rem;
    color: #333;
}

.simple-page-in p {
    font-size: 1.6rem;
    color: #555;
    line-height: 2.8rem;
    margin-bottom: 1.5rem;
}

.simple-page-in ul,
.simple-page-in ol {
    margin-bottom: 2rem;
    padding-left: 2rem;
}

.simple-page-in ul li {
    list-style: disc;
    padding: .5rem 0;
    font-size: 1.6rem;
    color: #555;
    line-height: 2.6rem;
}

.simple-page-in ol li {
    list-style: decimal;
    padding: .5rem 0;
    font-size: 1.6rem;
    color: #555;
    line-height: 2.6rem;
}

/* ===== Accessories Gallery ===== */
.xz-accessories {
    padding: 6rem 0;
    background: #f8f8f8;
}

.xz-accessories-in {
    max-width: var(--main_w);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.xz-accessories-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
}

.xz-accessories-item {
    margin: 0;
    background: #fff;
    overflow: hidden;
    border: 1px solid #eee;
    transition: box-shadow .3s, border-color .3s;
}

.xz-accessories-item:hover {
    border-color: #be1111;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}

.xz-accessories-item a {
    display: block;
    line-height: 0;
}

.xz-accessories-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform .4s;
}

.xz-accessories-item:hover img {
    transform: scale(1.04);
}

.xz-accessories-item figcaption {
    font-size: 1.6rem;
    font-weight: 400;
    color: #333;
    text-align: center;
    padding: 1.5rem 1rem;
    background: #f8f8f8;
    line-height: 2.2rem;
}

@media screen and (max-width: 1024px) {
    .xz-accessories-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .xz-accessories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    .xz-accessories {
        padding: 4rem 0;
    }
    .xz-accessories-item figcaption {
        font-size: 1.4rem;
        padding: 1.2rem .8rem;
    }
}

/* ===== Single News Article ===== */
.single-news .xz-container { background: #f8f8f8; }
.xz-single { padding: 4rem 0; }
.post-sec-x { display: flex; flex-wrap: wrap; justify-content: space-between; }
.post-sec-x .sec-l { width: calc(100% - 37rem); }
.post-sec-x .sec-r { width: 31rem; }

/* Post Title */
.post-tit { font-size: 2.8rem; font-weight: 700; line-height: 1.3; color: #222; margin-bottom: 2rem; }

/* Post Meta */
.post-meta-box { align-items: center; display: flex; flex-wrap: wrap; gap: 4rem; width: 100%; padding-bottom: 2rem; border-bottom: 1px solid #f0f0f0; margin-bottom: 2rem; }
.post-meta-box .post-meta { margin-left: auto; }
.post-date { font-size: 1.4rem; color: #888; }
.a2a_kit { display: flex; align-items: center; gap: 1.5rem; }
.a2a_kit a { display: flex; align-items: center; justify-content: center; border: 1px solid #eaeaea; border-radius: 50%; color: #999; font-size: 1.6rem; height: 4.2rem; width: 4.2rem; line-height: 1; text-decoration: none; transition: all .3s; }
.a2a_kit a:hover { border: 1px solid #be1111; color: #be1111; }
/* Hide AddToAny auto-injected icons, keep our hardcoded inline SVGs visible */
.a2a_kit a .a2a_svg, .a2a_kit a .a2a_img { display: none !important; }

/* Post Content */
.post-content { background: #fff; box-shadow: 0 0 1.2rem .1rem rgba(0,0,0,.06); margin-top: 3rem; padding: 4rem 6rem 1rem; font-size: 1.6rem; line-height: 1.8; color: #444; }
.post-content p { margin-top: 2.8rem; color: #333; font-family: Inter, sans-serif; font-weight: 400; line-height: 2.7rem; }
.post-content h2 { font-size: 3.2rem; font-weight: 700; line-height: 4.8rem; margin-top: 6rem; padding-left: 3rem; position: relative; }
.post-content h2:before { background: #be1111; content: ""; display: inline-block; height: 3rem; left: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 1rem; }
.post-content h3 { font-size: 2rem; font-weight: 600; color: #222; margin: 2.5rem 0 1.2rem; }
.post-content ul, .post-content ol { margin-top: 3rem; padding-left: 0; list-style: none; }
.post-content ul li { color: #333; font-family: Inter, sans-serif; font-size: 1.8rem; font-weight: 500; line-height: 2.8rem; margin-bottom: 1.8rem; padding-left: 1.8rem; position: relative; }
.post-content ul li:before { background: #be1111; border-radius: 50%; content: ""; display: inline-block; height: .8rem; left: 0; position: absolute; top: .9rem; width: .8rem; }
.post-content ol li { color: #333; font-family: Inter, sans-serif; font-size: 1.8rem; line-height: 3rem; margin-top: 2.8rem; padding-left: 4rem; position: relative; counter-increment: section; }
.post-content ol li:first-child { margin-top: 0; }
.post-content ol li:before { align-items: center; background: #be1111; border-radius: 50%; color: #fff; content: "" counter(section); display: flex; font-family: Inter, sans-serif; font-size: 1.4rem; font-weight: 700; height: 2.8rem; justify-content: center; left: 0; position: absolute; top: .1rem; width: 2.8rem; }
.post-content img { border-radius: .6rem; margin: 2rem 0; max-width: 100%; height: auto; }
.post-content a { color: #be1111; }
.post-content a:hover { text-decoration: underline; }
.post-content strong { font-weight: 700; color: #222; }
.post-content blockquote { border-left: 4px solid #be1111; padding: 1rem 2rem; margin: 2rem 0; background: #f9f9f9; color: #555; }

/* Prev / Next */
.xz-prenext { border: .1rem solid #e9e9e9; display: flex; flex-flow: column; gap: 1.6rem; margin: 6rem 0 5rem; padding: 3rem; }
.xz-pn-next, .xz-pn-pre { margin: 0 !important; }
.xz-pn-link { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xz-pn-link a { color: #666; font-weight: 500; line-height: 1.5em; position: relative; transition: all .3s ease; }
.xz-pn-link a:hover { color: #be1111; text-decoration: underline; }
.xz-pn-link:before { color: #be1111; display: inline-block; font-family: Inter, sans-serif; font-weight: 700; line-height: 1.5em; margin-right: 1.8rem; }
.xz-pn-pre .xz-pn-link:before { content: "Prev:"; }
.xz-pn-next .xz-pn-link:before { content: "Next:"; }
.xz-pn-next { text-align: left; }

/* Right Sidebar shared title */
.sec-r > div { margin-bottom: 2rem; }
.sec-r .sec-bar-tit { font-size: 2.4rem; font-weight: 700; color: #333; padding: 1.2rem 1.6rem; margin: 0; }

/* Related News */
.sec-news { background: #f8f8f8; box-shadow: 0 0 1.2rem .1rem rgba(29,78,137,.12); margin-top: 2rem; padding: 3rem 2rem; }
.sec-news-ul { list-style: none; background: #fff; margin-top: 2rem; padding: 2rem; }
.loop-bar-news { border-bottom: .1rem solid #ddd; margin-bottom: 2rem; padding-bottom: 2rem; }
.loop-bar-news:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.loop-bar-news-tit { color: #333; display: block; font-family: Inter, sans-serif; font-size: 1.8rem; font-weight: 500; line-height: 2.8rem; transition: all .3s; }
.loop-bar-news-tit:hover { color: #be1111; }
.loop-bar-news-date { color: #999; font-family: Inter, sans-serif; font-weight: 500; margin-top: 1.5rem; }

/* Contact Card (sidebar) */
.sec-contact-post { background: #f8f8f8; box-shadow: 0 0 1.2rem .1rem rgba(29,78,137,.12); margin-top: 2rem; padding: 3rem 2rem; }
.sec-contact-ul { list-style: none; background: #fff; margin-top: 2rem; padding: 2rem; }
.sec-contact-post .sec-contact-ul li { border-bottom: .1rem solid #ddd; margin-bottom: 2rem; padding-bottom: 2rem; }
.sec-contact-post .sec-contact-ul li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.sec-contact-post .sec-contact-ul li span { color: #be1111; display: block; font-size: 1.6rem; margin-bottom: .3rem; }
.sec-contact-post .sec-contact-ul li a { color: #333; display: block; font-family: Inter, sans-serif; font-size: 1.8rem; font-weight: 500; line-height: 2.8rem; transition: all .3s; }
.sec-contact-post .sec-contact-ul li a:hover { color: #be1111; }

/* Quick Quote Form (sidebar) - minimal underline style */
.sec-form { background: #f8f8f8; box-shadow: 0 0 1.2rem .1rem rgba(29,78,137,.12); margin-top: 2rem; padding: 3rem 2rem; }
.sec-form .sec-form-x { background-color: #fff; margin-top: 2rem; padding: 2rem; }
.xz-form-side .xz-form-info { margin-bottom: 1.2rem; }
.xz-form-side .xz-form-label { display: block; font-size: 1.4rem; font-weight: 400; color: #999; margin-bottom: .2rem; padding-left: .2rem; }
.xz-form-side .xz-form-label .req { color: #be1111; margin-right: .3rem; }
.xz-form-side .xz-form-input,
.xz-form-side input[type="text"],
.xz-form-side input[type="email"],
.xz-form-side input[type="tel"] { width: 100%; border: none; border-bottom: 1px solid #ccc; padding: .8rem 0; font-size: 1.4rem; font-family: inherit; box-sizing: border-box; color: #333; background: transparent; }
.xz-form-side .xz-form-input:focus,
.xz-form-side input[type="text"]:focus,
.xz-form-side input[type="email"]:focus,
.xz-form-side input[type="tel"]:focus { outline: none; border-bottom-color: #be1111; }
.xz-form-side .xz-form-msg { margin-bottom: 1.5rem; }
.xz-form-side .xz-form-textarea,
.xz-form-side textarea { width: 100%; min-height: 7rem; border: none; border-bottom: 1px solid #ccc; padding: .8rem 0; font-size: 1.4rem; font-family: inherit; resize: vertical; box-sizing: border-box; color: #333; background: transparent; }
.xz-form-side .xz-form-textarea:focus,
.xz-form-side textarea:focus { outline: none; border-bottom-color: #be1111; }
.xz-form-side .xz-form-btns { margin-top: 2rem; }
.xz-form-side .xz-form-button,
.xz-form-side input[type="submit"],
.xz-form-side button[type="submit"] { width: 100%; height: 4.6rem; background: #be1111; color: #fff; border: none; border-radius: 50px; font-size: 1.5rem; font-weight: 600; cursor: pointer; transition: background .2s; }
.xz-form-side .xz-form-button:hover,
.xz-form-side input[type="submit"]:hover,
.xz-form-side button[type="submit"]:hover { background: #a00e0e; }

/* CF7 版表单（v1.0.35 类名对齐方案）
   后台表单模板：form 由 shortcode 的 html_class="xz-form-side" 挂类，
   控件短代码带 class:xz-form-input / class:xz-form-textarea / class:xz-form-button，
   上方 .xz-form-side 静态规则直接命中控件，本段只处理 CF7 特有结构。 */
.xz-form-side .wpcf7-form { margin: 0; padding: 0; }
.xz-form-side .wpcf7-form > p { margin: 0 0 1.2rem; }
.xz-form-side .wpcf7-form p label { display: block; font-size: 1.4rem; font-weight: 400; color: #999; margin-bottom: .2rem; padding-left: .2rem; }
.xz-form-side .wpcf7-form p label .req { color: #be1111; margin-right: .3rem; }
.xz-form-side .wpcf7-form p br,
.xz-form-side .wpcf7-form label br { display: none; }
.xz-form-side .wpcf7-form-control-wrap { display: block; }
.xz-form-side .wpcf7-spinner { display: none; }
.xz-form-side .wpcf7-response-output { margin: 1.5rem 0 0; padding: .8rem 1rem; border-radius: 2px; font-size: 1.3rem; }
.xz-form-side .wpcf7-not-valid { border-bottom-color: #be1111 !important; }
.xz-form-side .wpcf7-not-valid-tip { color: #be1111; font-size: 1.2rem; margin-top: .3rem; }

/* ============================================================
   CF7 form - robust two-column (v1.0.33)
   Real CF7 DOM: <form class="wpcf7-form">
     <fieldset class="hidden-fields-container">(hidden inputs)</fieldset>
     <p> 5 x <label>...</label> (name/company/tel/email/message) </p>
     <p><input class="wpcf7-submit">...</p>
     <div class="wpcf7-response-output"></div>
   </form>
   Strategy: form = block; field-container <p> = 2-col grid; labels = cells
   ============================================================ */
.public-form-r .wpcf7-form,
.public-form-r .wpcf7,
.public-form-r .hbrm-cf7-grid .wpcf7-form,
#popupOverlay .wpcf7-form,
#popupOverlay .wpcf7,
#popupOverlay .hbrm-cf7-grid .wpcf7-form {
    display: block;
}
/* hide CF7 hidden-fields fieldset */
.public-form-r .wpcf7-form > fieldset,
.public-form-r .wpcf7 > fieldset,
.public-form-r .hbrm-cf7-grid .wpcf7-form > fieldset,
#popupOverlay .wpcf7-form > fieldset,
#popupOverlay .wpcf7 > fieldset,
#popupOverlay .hbrm-cf7-grid .wpcf7-form > fieldset {
    display: none;
}
/* field container <p> becomes the two-column grid */
.public-form-r .wpcf7-form > p:first-of-type,
.public-form-r .wpcf7 > p:first-of-type,
.public-form-r .hbrm-cf7-grid .wpcf7-form > p:first-of-type,
#popupOverlay .wpcf7-form > p:first-of-type,
#popupOverlay .wpcf7 > p:first-of-type,
#popupOverlay .hbrm-cf7-grid .wpcf7-form > p:first-of-type {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
    margin: 0;
    padding: 0;
}
/* label = one field cell */
.public-form-r .wpcf7-form p label,
.public-form-r .wpcf7 p label,
.public-form-r .hbrm-cf7-grid .wpcf7-form p label,
#popupOverlay .wpcf7-form p label,
#popupOverlay .wpcf7 p label,
#popupOverlay .hbrm-cf7-grid .wpcf7-form p label {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: #555;
    margin: 0;
}
/* 5th label (message textarea) spans full width */
.public-form-r .wpcf7-form p label:nth-of-type(5),
.public-form-r .wpcf7 p label:nth-of-type(5),
.public-form-r .hbrm-cf7-grid .wpcf7-form p label:nth-of-type(5),
.public-form-r .wpcf7-form p label:has(textarea),
.public-form-r .wpcf7 p label:has(textarea),
.public-form-r .hbrm-cf7-grid .wpcf7-form p label:has(textarea),
#popupOverlay .wpcf7-form p label:nth-of-type(5),
#popupOverlay .wpcf7 p label:nth-of-type(5),
#popupOverlay .hbrm-cf7-grid .wpcf7-form p label:nth-of-type(5),
#popupOverlay .wpcf7-form p label:has(textarea),
#popupOverlay .wpcf7 p label:has(textarea),
#popupOverlay .hbrm-cf7-grid .wpcf7-form p label:has(textarea) {
    grid-column: 1 / -1;
}
/* remove <br> separators inside p and label */
.public-form-r .wpcf7-form p br,
.public-form-r .wpcf7 p br,
.public-form-r .hbrm-cf7-grid .wpcf7-form p br,
.public-form-r .wpcf7-form label br,
.public-form-r .wpcf7 label br,
.public-form-r .hbrm-cf7-grid .wpcf7-form label br,
#popupOverlay .wpcf7-form p br,
#popupOverlay .wpcf7 p br,
#popupOverlay .hbrm-cf7-grid .wpcf7-form p br,
#popupOverlay .wpcf7-form label br,
#popupOverlay .wpcf7 label br,
#popupOverlay .hbrm-cf7-grid .wpcf7-form label br {
    display: none;
}
/* control wrapper */
.public-form-r .wpcf7-form .wpcf7-form-control-wrap,
.public-form-r .wpcf7 .wpcf7-form-control-wrap,
.public-form-r .hbrm-cf7-grid .wpcf7-form .wpcf7-form-control-wrap,
#popupOverlay .wpcf7-form .wpcf7-form-control-wrap,
#popupOverlay .wpcf7 .wpcf7-form-control-wrap,
#popupOverlay .hbrm-cf7-grid .wpcf7-form .wpcf7-form-control-wrap {
    display: block;
}
/* inputs */
.public-form-r .wpcf7-form input[type="text"],
.public-form-r .wpcf7-form input[type="email"],
.public-form-r .wpcf7-form input[type="tel"],
.public-form-r .wpcf7-form input[type="url"],
.public-form-r .wpcf7 input[type="text"],
.public-form-r .wpcf7 input[type="email"],
.public-form-r .wpcf7 input[type="tel"],
.public-form-r .wpcf7 input[type="url"],
.public-form-r .hbrm-cf7-grid .wpcf7-form input[type="text"],
.public-form-r .hbrm-cf7-grid .wpcf7-form input[type="email"],
.public-form-r .hbrm-cf7-grid .wpcf7-form input[type="tel"],
.public-form-r .hbrm-cf7-grid .wpcf7-form input[type="url"],
#popupOverlay .wpcf7-form input[type="text"],
#popupOverlay .wpcf7-form input[type="email"],
#popupOverlay .wpcf7-form input[type="tel"],
#popupOverlay .wpcf7-form input[type="url"],
#popupOverlay .wpcf7 input[type="text"],
#popupOverlay .wpcf7 input[type="email"],
#popupOverlay .wpcf7 input[type="tel"],
#popupOverlay .wpcf7 input[type="url"],
#popupOverlay .hbrm-cf7-grid .wpcf7-form input[type="text"],
#popupOverlay .hbrm-cf7-grid .wpcf7-form input[type="email"],
#popupOverlay .hbrm-cf7-grid .wpcf7-form input[type="tel"],
#popupOverlay .hbrm-cf7-grid .wpcf7-form input[type="url"] {
    width: 100%;
    height: 4rem;
    padding: 0 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    font-size: 1.4rem;
    font-family: 'Inter', sans-serif;
    background: #fafafa;
    box-sizing: border-box;
    transition: border-color .3s, background .3s;
}
.public-form-r .wpcf7-form input:focus,
.public-form-r .wpcf7 input:focus,
.public-form-r .hbrm-cf7-grid .wpcf7-form input:focus,
#popupOverlay .wpcf7-form input:focus,
#popupOverlay .wpcf7 input:focus,
#popupOverlay .hbrm-cf7-grid .wpcf7-form input:focus {
    border-color: #be1111;
    background: #fff;
    outline: none;
}
/* textarea */
.public-form-r .wpcf7-form textarea,
.public-form-r .wpcf7 textarea,
.public-form-r .hbrm-cf7-grid .wpcf7-form textarea,
#popupOverlay .wpcf7-form textarea,
#popupOverlay .wpcf7 textarea,
#popupOverlay .hbrm-cf7-grid .wpcf7-form textarea {
    width: 100%;
    min-height: 8rem;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    font-size: 1.4rem;
    font-family: 'Inter', sans-serif;
    background: #fafafa;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color .3s, background .3s;
}
.public-form-r .wpcf7-form textarea:focus,
.public-form-r .wpcf7 textarea:focus,
.public-form-r .hbrm-cf7-grid .wpcf7-form textarea:focus,
#popupOverlay .wpcf7-form textarea:focus,
#popupOverlay .wpcf7 textarea:focus,
#popupOverlay .hbrm-cf7-grid .wpcf7-form textarea:focus {
    border-color: #be1111;
    background: #fff;
    outline: none;
}
/* submit row */
.public-form-r .wpcf7-form > p:last-of-type,
.public-form-r .wpcf7 > p:last-of-type,
.public-form-r .hbrm-cf7-grid .wpcf7-form > p:last-of-type,
#popupOverlay .wpcf7-form > p:last-of-type,
#popupOverlay .wpcf7 > p:last-of-type,
#popupOverlay .hbrm-cf7-grid .wpcf7-form > p:last-of-type {
    margin: 2rem 0 0;
    text-align: right;
}
.public-form-r .wpcf7-form .wpcf7-submit,
.public-form-r .wpcf7 .wpcf7-submit,
.public-form-r .hbrm-cf7-grid .wpcf7-form .wpcf7-submit,
#popupOverlay .wpcf7-form .wpcf7-submit,
#popupOverlay .wpcf7 .wpcf7-submit,
#popupOverlay .hbrm-cf7-grid .wpcf7-form .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    background: #be1111;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 1.5rem 5rem;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: .5px;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s;
}
.public-form-r .wpcf7-form .wpcf7-submit::after,
.public-form-r .wpcf7 .wpcf7-submit::after,
.public-form-r .hbrm-cf7-grid .wpcf7-form .wpcf7-submit::after,
#popupOverlay .wpcf7-form .wpcf7-submit::after,
#popupOverlay .wpcf7 .wpcf7-submit::after,
#popupOverlay .hbrm-cf7-grid .wpcf7-form .wpcf7-submit::after {
    content: "\2192";
    font-size: 1.2rem;
    line-height: 1;
}
.public-form-r .wpcf7-form .wpcf7-submit:hover,
.public-form-r .wpcf7 .wpcf7-submit:hover,
.public-form-r .hbrm-cf7-grid .wpcf7-form .wpcf7-submit:hover,
#popupOverlay .wpcf7-form .wpcf7-submit:hover,
#popupOverlay .wpcf7 .wpcf7-submit:hover,
#popupOverlay .hbrm-cf7-grid .wpcf7-form .wpcf7-submit:hover {
    background: #a00e0e;
}
/* response output */
.public-form-r .wpcf7-form .wpcf7-response-output,
.public-form-r .wpcf7 .wpcf7-response-output,
.public-form-r .hbrm-cf7-grid .wpcf7-form .wpcf7-response-output,
#popupOverlay .wpcf7-form .wpcf7-response-output,
#popupOverlay .wpcf7 .wpcf7-response-output,
#popupOverlay .hbrm-cf7-grid .wpcf7-form .wpcf7-response-output {
    margin: 1.5rem 0 0;
    padding: 1rem 1.5rem;
    border-radius: 2px;
    font-size: 1.4rem;
}
/* validation */
.public-form-r .wpcf7-form .wpcf7-not-valid,
.public-form-r .wpcf7 .wpcf7-not-valid,
.public-form-r .hbrm-cf7-grid .wpcf7-form .wpcf7-not-valid,
#popupOverlay .wpcf7-form .wpcf7-not-valid,
#popupOverlay .wpcf7 .wpcf7-not-valid,
#popupOverlay .hbrm-cf7-grid .wpcf7-form .wpcf7-not-valid {
    border-color: #be1111;
}
.public-form-r .wpcf7-form .wpcf7-not-valid-tip,
.public-form-r .wpcf7 .wpcf7-not-valid-tip,
.public-form-r .hbrm-cf7-grid .wpcf7-form .wpcf7-not-valid-tip,
#popupOverlay .wpcf7-form .wpcf7-not-valid-tip,
#popupOverlay .wpcf7 .wpcf7-not-valid-tip,
#popupOverlay .hbrm-cf7-grid .wpcf7-form .wpcf7-not-valid-tip {
    color: #be1111;
    font-size: 1.3rem;
}
/* hide CF7 spinner (own animation conflicts with button) */
.public-form-r .wpcf7-form .wpcf7-spinner,
.public-form-r .wpcf7 .wpcf7-spinner,
.public-form-r .hbrm-cf7-grid .wpcf7-form .wpcf7-spinner,
#popupOverlay .wpcf7-form .wpcf7-spinner,
#popupOverlay .wpcf7 .wpcf7-spinner,
#popupOverlay .hbrm-cf7-grid .wpcf7-form .wpcf7-spinner {
    display: none;
}
@media screen and (max-width: 600px) {
    .public-form-r .wpcf7-form > p:first-of-type,
    .public-form-r .wpcf7 > p:first-of-type,
    .public-form-r .hbrm-cf7-grid .wpcf7-form > p:first-of-type,
    #popupOverlay .wpcf7-form > p:first-of-type,
    #popupOverlay .wpcf7 > p:first-of-type,
    #popupOverlay .hbrm-cf7-grid .wpcf7-form > p:first-of-type {
        grid-template-columns: 1fr;
    }
}

/* Responsive */
@media screen and (max-width: 1024px) {
    .post-sec-x .sec-l, .post-sec-x .sec-r { width: 100%; }
    .breadcrumbs-x { display: none; }
}
@media screen and (max-width: 600px) {
    .post-tit { font-size: 2.2rem; }
    .post-content { padding: 2rem 3rem 1rem; }
    .post-meta-box { gap: 2rem 4rem; }
    .post-meta-box .post-meta { margin-top: 2rem; width: 100%; margin-left: 0; }
    .xz-prenext { margin: 4rem 0; }
    .xz-pn-next { text-align: left; }
}

/* ============================================================
/* ============================================================
 * Home header: transparent -> white on scroll (zsmart style)
 * Only affects the front page (.is_home), inner pages keep
 * the regular white sticky header.
 * ============================================================ */
.xz-header.is_home {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: transparent;
    box-shadow: none;
    transition: background .3s ease, box-shadow .3s ease;
}
.xz-header.is_home.scrolled {
    background: #fff;
    box-shadow: 0 0 4rem -.5rem rgba(0,0,0,.1);
}

/* desktop nav on home */
.xz-header.is_home #menu-main > li > a {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.xz-header.is_home.scrolled #menu-main > li > a {
    color: #666;
    text-shadow: none;
}
.xz-header.is_home #menu-main > li > a:hover,
.xz-header.is_home.scrolled #menu-main > li > a:hover { color: #be1111; }
.xz-header.is_home #menu-main > li.current-menu-item > a { color: #fff; }
.xz-header.is_home.scrolled #menu-main > li.current-menu-item > a { color: #be1111; }

/* hamburger icon on home */
.xz-header.is_home .menu-toggle span { background: #fff; }
.xz-header.is_home.scrolled .menu-toggle span { background: #333; }

/* email icon on transparent header */
.xz-header.is_home .header-email { color: #fff; }
.xz-header.is_home.scrolled .header-email { color: #666; }
.xz-header.is_home .header-email .iconfont { color: #fff; }
.xz-header.is_home.scrolled .header-email .iconfont { color: #be1111; }

/* double logo switch (front page only) */
.xz-header.is_home .xz-logo-a { position: relative; }
.xz-header.is_home .xz-logo { display: none; }
.xz-header.is_home .xz-logo.logo-white { display: block; }
.xz-header.is_home.scrolled .xz-logo.logo-white { display: none; }
.xz-header.is_home.scrolled .xz-logo.logo-dark { display: block; }

/* banner sits under fixed transparent header on home */
.xz-banner.is_home { padding-top: 0; margin-top: 0; }
.xz-banner.is_home .xz-banner-item img {
    width: 100%;
    height: auto;
    min-height: 600px;
    max-height: 950px;
    object-fit: cover;
    object-position: center;
}

@media screen and (max-width: 1024px) {
    .xz-header.is_home { background: #fff; box-shadow: 0 0 4rem -.5rem rgba(0,0,0,.1); }
    .xz-header.is_home.scrolled { background: #fff; }
    .xz-header.is_home #menu-main > li > a { color: #666; text-shadow: none; }
    .xz-header.is_home.scrolled #menu-main > li > a { color: #666; }
    .xz-header.is_home .menu-toggle span { background: #333; }
    .xz-header.is_home .xz-logo.logo-dark { display: block; }
    .xz-header.is_home .xz-logo.logo-white { display: none; }
    .xz-header.is_home.scrolled .xz-logo.logo-white { display: none; }
    .xz-header.is_home.scrolled .xz-logo.logo-dark { display: block; }
    .xz-banner.is_home { margin-top: -6rem; }
    .xz-banner.is_home .xz-banner-item img { height: auto; min-height: auto; }
}

/* ============================================================
   Home Hot Cases (ykzgmac.com style: 50/50 horizontal card
   with white shine sweep hover + Details link)
   ============================================================ */
.home-solu .xz-solu-ul {
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
}

.home-solu .loop-solu {
    align-items: center;
    background: #fff;
    box-shadow: 0 .2rem 3rem 0 rgba(0, 0, 0, .1);
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 3rem;
    transition: all .3s;
    width: 49%;
}

.home-solu .loop-solu:hover {
    box-shadow: 0 .5rem 4rem .3rem rgba(0, 0, 0, .15);
    transform: translateY(-3px);
}

.home-solu .loop-solu-thumb-x {
    width: 50%;
}

.home-solu .loop-solu-thumb {
    align-items: center;
    aspect-ratio: 315/236;
    box-shadow: 0 .6rem 1.2rem .1rem rgba(0, 0, 0, .04);
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.home-solu .loop-solu-thumb img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: all .3s ease;
    width: 100%;
}

.home-solu .loop-solu-thumb:hover img {
    filter: brightness(1.05);
    transform: scale(1.05);
}

.home-solu .loop-solu-thumb .slider__mirror {
    background: hsla(0, 0%, 100%, .5);
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: scale3d(1.9, 1.4, 1) rotate(45deg) translate3d(0, -100%, 0);
    transition: transform .8s;
    width: 100%;
    z-index: 10;
}

.home-solu .loop-solu:hover .slider__mirror {
    transform: scale3d(1.9, 1.4, 1) rotate(45deg) translate3d(0, 120%, 0);
}

.home-solu .loop-solu-info {
    padding: 2rem;
    width: 50%;
}

.home-solu .loop-solu-tit {
    margin: 0;
}

.home-solu .loop-solu-tit a {
    color: #333;
    display: block;
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.7rem;
    max-height: 5.4rem;
    overflow: hidden;
    transition: all .3s;
}

.home-solu .loop-solu-tit a:hover {
    color: #164488;
}

.home-solu .loop-solu-excerpt {
    color: #999;
    font-size: 1.4rem;
    line-height: 2.1rem;
    margin-top: 1rem;
    max-height: 6.3rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.home-solu .loop-solu-more {
    color: #164488;
    display: inline-block;
    font-size: 1.5rem;
    margin-top: 1.5rem;
    text-decoration: underline;
    text-transform: uppercase;
    transition: all .3s;
}

.home-solu .loop-solu-more:hover {
    transform: translateX(3px);
}

@media screen and (max-width: 1024px) {
    .home-solu .loop-solu-tit a {
        font-size: 1.8rem;
    }
}

@media screen and (max-width: 810px) {
    .home-solu .loop-solu {
        width: 100%;
    }
}

@media screen and (max-width: 600px) {
    .home-solu .loop-solu {
        margin-bottom: 1.5rem;
        width: 100%;
    }
    .home-solu .loop-solu-info,
    .home-solu .loop-solu-thumb-x {
        width: 100%;
    }
}