/* =====================================================================
 * 嘉全官网主题补充样式
 * 加载顺序: metinfo.css -> custom.css
 * 只做少量必要覆盖, 原有配色/版式保持与线上一致
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 首页底部"合作伙伴"(友情链接)
 * 说明: 线上模板用 slick 滑动画廊(.jion-list)渲染, 链接只有两三条时会全部挤在左侧、
 *       右侧留空一大片。这里改用可自动换行/居中的卡片行, 任意条数都整齐。
 * --------------------------------------------------------------------- */
.hg-partners {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding-bottom: 10px;
}

    .hg-partners .hg-partner {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 230px;
        height: 72px;
        padding: 10px 14px;
        border: 1px solid #e4e4e4;
        background: #fff;
        transition: box-shadow .25s ease, border-color .25s ease;
    }

        .hg-partners .hg-partner:hover {
            border-color: #1a7bb9;
            box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
        }

        .hg-partners .hg-partner img {
            max-width: 100%;
            max-height: 50px;
            width: auto;
            height: auto;
        }

        .hg-partners .hg-partner span {
            font-size: 14px;
            color: #555;
        }

/* 合作伙伴标题与线上保持一致(灰色底 + 左对齐 18px) */
.met-index-jion h2 {
    text-align: left;
}

/* ---------------------------------------------------------------------
 * 首页大图轮播
 * 桌面端: 容器高度 = 所有图片中最高那张的高度(由 js/custom.js 计算并写入),
 *         每张图按原始比例完整显示, 水平+垂直居中, 不裁切、不拉伸
 * 移动端: 容器高度固定 580px, 图片按高度撑满(等比不压缩), 左右超出部分隐藏
 * --------------------------------------------------------------------- */
.met-banner {
    overflow: hidden;
    background: #fff;
}

    .met-banner .slick-list,
    .met-banner .slick-track {
        height: 100% !important;
    }

    .met-banner .slick-slide {
        height: 100% !important;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        overflow: hidden;
    }

        .met-banner .slick-slide img.cover-image {
            display: block;
            width: 100%;
            height: auto;
            max-height: 100%;
            object-fit: contain;
            position: static;
            transform: none;
            -webkit-transform: none;
        }

/* 移动端: 固定高度 290px, 图片等比撑满高度, 左右居中超出隐藏 */
@media (max-width: 767px) {
    .met-banner {
        height: 290px !important;
    }

        .met-banner .slick-slide {
            display: block;
            position: relative;
        }

            .met-banner .slick-slide img.cover-image {
                position: absolute;
                top: 0;
                left: 50%;
                width: auto;
                height: 100%;
                max-height: none;
                max-width: none;
                object-fit: contain;
                transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
            }
}

/* ---------------------------------------------------------------------
 * 正文里的老图
 * --------------------------------------------------------------------- */
.met-editor img {
    max-width: 100%;
    height: auto;
}

/* 列表页缩略图统一裁切, 避免老图比例不一造成错位 */
.met-product-list .widget-header img.cover-image,
.met-grid .widget-header img.cover-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* 新闻/技术列表摘要 */
.met-news-list .des {
    color: #666;
}

/* 表单控件在现代浏览器下的默认外观修正 */
.met-show-content .form-control {
    height: 34px;
}

.met-show-content textarea.form-control {
    height: auto;
}

/* ---------------------------------------------------------------------
 * 顶部右侧「地址 / 电话 / 邮箱」三块
 * 原站把 .eco_header 写死 704px, 三块合计需要约 746px, 第三块(邮箱)
 * 会折行掉到导航条上 —— 这是原站的 BUG。这里统一给 760px,
 * 同时把 logo 区域收窄, 让 760px 仍与 logo 排在同一行。
 * 注意: logo 收窄只在桌面端生效, 移动端沿用模板自带的 280px 限制。
 * --------------------------------------------------------------------- */
@media (min-width: 992px) {
    .met-nav .navbar-header {
        max-width: 400px;
    }

    .met-nav .navbar-brand img {
        max-width: 100%;
        height: auto;
    }

    .met-nav .eco_header {
        white-space: nowrap;
    }
}

/* 1025~1199px: 容器只有 970px, 放不下 400px logo + 760px 三块信息,
   这里收窄信息区并隐藏地址块(电话/邮箱保留), 避免整块折到第二行 */
@media (min-width: 1025px) and (max-width: 1199px) {
    .met-nav .eco_header {
        width: 560px !important;
    }

        .met-nav .eco_header .top-info:first-child {
            display: none;
        }
}

/* ---------------------------------------------------------------------
 * 产品详情页 多图画廊(大图 + 下方缩略图)
 * --------------------------------------------------------------------- */
.hg-gallery {
    width: 100%;
}

.hg-gallery-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e7e7e7;
    padding: 12px;
}

.hg-gallery-main {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    line-height: 0;
}

    .hg-gallery-main img {
        display: block;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }

.hg-gallery-arrow {
    flex: 0 0 auto;
    width: 34px;
    height: 58px;
    padding: 0;
    border: 0;
    background: rgba(1, 76, 152, .06);
    color: #014c98;
    font-size: 26px;
    line-height: 56px;
    text-align: center;
    cursor: pointer;
    -webkit-transition: background .2s;
    transition: background .2s;
}

    .hg-gallery-arrow:hover,
    .hg-gallery-arrow:focus {
        background: rgba(1, 76, 152, .16);
        outline: none;
    }

.hg-gallery.is-single .hg-gallery-arrow {
    display: none;
}

.hg-gallery-thumbs {
    margin-top: 12px;
}

    .hg-gallery-thumbs ul {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        margin: 0;
        padding: 0 0 4px;
        list-style: none;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .hg-gallery-thumbs li {
        flex: 0 0 auto;
        width: 92px;
        height: 92px;
        border: 2px solid #e7e7e7;
        background: #fff;
        cursor: pointer;
        overflow: hidden;
        -webkit-transition: border-color .2s;
        transition: border-color .2s;
    }

        .hg-gallery-thumbs li:hover {
            border-color: #9dc1e0;
        }

        .hg-gallery-thumbs li.active {
            border-color: #014c98;
        }

        .hg-gallery-thumbs li img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

@media (max-width: 767px) {
    .hg-gallery-stage {
        padding: 8px;
    }

    .hg-gallery-arrow {
        width: 28px;
        height: 46px;
        font-size: 20px;
        line-height: 44px;
    }

    .hg-gallery-thumbs ul {
        gap: 6px;
    }

    .hg-gallery-thumbs li {
        width: 68px;
        height: 68px;
    }
}

/* ---------------------------------------------------------------------
 * 微信公众号二维码(站点设置 -> 网站配置 -> 微信公众号二维码)
 * 桌面: 固定右下角, 随页面滚动始终可见; 点 × 收起, 收起后变成一个小按钮
 * 手机: 固定在页面底部成一整条(宽度与页面一致), 给 body 加底部留白避免压内容
 * --------------------------------------------------------------------- */
.hg-wechat {
    position: fixed;
    right: 20px;
    bottom: 76px; /* 让开右下角"回到顶部"按钮 */
    z-index: 60;
    width: 158px;
    padding: 10px 10px 8px;
    text-align: center;
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
}

    .hg-wechat img {
        display: block;
        width: 132px;
        height: 132px;
        margin: 0 auto 8px;
        object-fit: contain;
    }

.hg-wechat-text {
    display: block;
    font-size: 12px;
    line-height: 1.5;
    color: #666;
}

.hg-wechat-close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 15px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
}

    .hg-wechat-close:hover,
    .hg-wechat-close:focus {
        background: rgba(0, 0, 0, .78);
        outline: none;
    }

.hg-wechat-toggle {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 76px;
    z-index: 60;
    white-space: nowrap;
    padding: 8px 14px;
    border: 0;
    border-radius: 4px;
    background: #014c98;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
}

@media (max-width: 767px) {
    .hg-wechat {
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        padding: 8px 38px 8px 12px;
        border-width: 1px 0 0;
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        text-align: left;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, .12);
    }

        .hg-wechat img {
            width: 52px;
            height: 52px;
            margin: 0;
            flex: 0 0 auto;
        }

    .hg-wechat-text {
        font-size: 13px;
    }

    .hg-wechat-close {
        top: 50%;
        right: 8px;
        margin-top: -13px;
        width: 26px;
        height: 26px;
        line-height: 26px;
        background: rgba(0, 0, 0, .35);
    }

    .hg-wechat-toggle {
        right: 10px;
        bottom: 10px;
    }

    body.hg-wechat-on {
        padding-bottom: 76px;
    }

        body.hg-wechat-on .met-scroll-top {
            bottom: 82px;
        }
}