/* ============================================
   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); }
.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;
    margin-bottom: 0;
    position: relative;
    transition: all .3s;
}

#menu-main > .menu-item-products > .sub-menu > li > a::after {
    color: #be1111;
    content: "\25BE";
    display: block;
    font-size: 1.8rem;
    margin-top: .3rem;
    text-align: center;
}

#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) {
    body { padding-top: 6rem; }
    .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;
        padding: 6rem 0 2rem;
        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; }
    #menu-main {
        flex-direction: column;
        gap: 0;
        width: 100%;
        align-items: stretch;
    }
    #menu-main > li > a {
        padding: 1.5rem 2rem;
        border-bottom: 1px solid #eee;
        height: auto;
    }
    #menu-main > li > .sub-menu {
        position: static;
        display: none;
        box-shadow: none;
        padding: 0 0 0 1rem;
    }
    #menu-main > li.open > .sub-menu,
    #menu-main > li > .sub-menu > li.open > .sub-menu { display: block; }
    #menu-main > .menu-item-products > .sub-menu {
        display: none;
        grid-template-columns: 1fr;
        position: static;
        transform: none;
        width: 100%;
        box-shadow: none;
    }
    #menu-main > .menu-item-products.open > .sub-menu { display: grid; }
    .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; }
}

/* ===== 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: 1.6rem;
    color: #555;
}

/* 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;
}

/* 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); }
    .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; }
    .toppic { height: 25rem; }
    .toppic_tit { font-size: 3rem !important; }
    .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; }
}

/* ============================================================