/* ===========================================================
   铭锡移动端独立站 /m/  ——  m-site.css
   设计：顶栏 + 汉堡抽屉导航 + 卡片流 + 底部 Tab 栏
   与 PC 站共用同一后台数据；资源全部从站点根解析。
   =========================================================== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;}
/* 顶栏 = safe-area-inset-top + 8(顶部留白) + 44(内容行) + 4(底部留白)。绿色下边线 + 阴影，让顶栏与浏览器地址栏视觉分离。 */
:root{
    --m-sat: env(safe-area-inset-top, 0px);
    --m-tb: calc(var(--m-sat) + 56px);
}
body{
    font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
    color:#333;background:#f4f5f7;font-size:14px;line-height:1.6;
    padding-bottom:56px;            /* 给底部 Tab 栏留位 */
    max-width:750px;margin:0 auto;  /* 大屏手机上看不撑爆 */
    box-shadow:0 0 20px rgba(0,0,0,.04);
}
img{max-width:100%;display:block;border:0;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}

/* ---------- 顶部栏 ---------- */
.m-topbar{
    position:fixed;top:0;left:0;right:0;z-index:50;
    background:#fff;
    border-bottom:1px solid #2fa663;          /* 品牌绿底线 —— 让顶栏跟浏览器地址栏明显分开 */
    box-shadow:0 1px 4px rgba(0,0,0,.06);     /* 微弱阴影，加强层次 */
    display:flex;align-items:center;justify-content:space-between;
    padding:calc(var(--m-sat) + 8px) 12px 4px;
    max-width:750px;margin:0 auto;
}
.m-topbar .m-logo{display:flex;align-items:center;height:44px;overflow:hidden;}
.m-topbar .m-logo img{max-height:30px;width:auto;}
.m-topbar .m-logo .m-name{font-weight:700;font-size:15px;color:#2fa663;margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48vw;}
.m-topbar .m-topact{display:flex;align-items:center;gap:4px;}
.m-topbar .m-lang{height:30px;padding:0 11px;border:1px solid #2fa663;border-radius:15px;background:#fff;color:#2fa663;font-size:12px;font-weight:700;line-height:1;white-space:nowrap;}
.m-topbar .m-lang:active{background:#2fa663;color:#fff;}
.m-topbar .m-hamb{width:42px;height:42px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;}
.m-topbar .m-hamb span{display:block;width:22px;height:2px;background:#333;border-radius:2px;transition:.25s;}
.m-topbar .m-hamb.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.m-topbar .m-hamb.open span:nth-child(2){opacity:0;}
.m-topbar .m-hamb.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- 抽屉导航 ---------- */
.m-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;opacity:0;visibility:hidden;transition:.25s;}
.m-mask.show{opacity:1;visibility:visible;}
.m-drawer{
    position:fixed;top:0;left:0;bottom:0;width:78%;max-width:320px;z-index:70;
    background:#fff;transform:translateX(-100%);transition:.28s;display:flex;flex-direction:column;
}
.m-drawer.show{transform:translateX(0);}
.m-drawer .m-drawer-head{height:50px;display:flex;align-items:center;padding:0 16px;background:#2fa663;color:#fff;font-weight:700;font-size:16px;}
.m-drawer .m-drawer-head .m-close{margin-left:auto;font-size:22px;line-height:1;}
.m-drawer .m-drawer-body{flex:1;overflow-y:auto;padding:8px 0;}
.m-drawer .m-drawer-body > a{display:block;padding:13px 16px;font-size:15px;border-bottom:1px solid #f2f2f2;color:#333;}
.m-drawer .m-drawer-body > a:active{background:#f6f6f6;}
.m-drawer .m-drawer-body .m-sub{padding-left:32px;font-size:13px;color:#666;background:#fafafa;}
.m-drawer .m-drawer-body .m-sub a{display:block;padding:10px 0;color:#666;border-bottom:1px dashed #eee;}

/* ---------- 通用区块 ---------- */
.m-wrap{padding:8px 12px;margin-top:var(--m-tb);}
/* 顶部 hero 轮播：固定高 220px，overflow hidden，多张图横向排。
   强制覆盖，不依赖 .m-hero.m-slide 双类同时匹配；只要 .m-slide-bd 存在就横排。
   .m-slide-bd 宽度与每张图占比由 m-site.js 按图片数量 n 动态设置，避免 translateX 跳过头。 */
.m-hero{margin-top:var(--m-tb);position:relative;width:100%;height:220px;max-width:750px;margin-left:auto;margin-right:auto;overflow:hidden;background:#e9eef2;}
.m-hero .m-slide-bd{display:flex;flex-direction:row;flex-wrap:nowrap;height:100%;transition:transform .45s ease;will-change:transform;}
.m-hero .m-slide-item{flex:0 0 100%;width:100%;height:100%;display:block;overflow:hidden;}
.m-hero .m-slide-item img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;}
.m-hero .m-hero-txt{position:absolute;left:0;right:0;bottom:26px;padding:14px 14px 0;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.6));z-index:3;}
.m-hero .m-hero-txt h1{font-size:18px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.5);}
.m-hero .m-hero-txt p{font-size:12px;opacity:.92;margin-top:2px;text-shadow:0 1px 4px rgba(0,0,0,.5);}
.m-hero .m-slide-dot{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:6px;z-index:4;margin:0;padding:0;list-style:none;}
.m-hero .m-slide-dot i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 2px rgba(0,0,0,.3);display:inline-block;font-style:normal;}
.m-hero .m-slide-dot i.on{background:#fff;}

.m-sec{background:#fff;border-radius:10px;margin:12px 0;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.05);}
.m-sec-hd{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #f2f2f2;}
.m-sec-hd h2{font-size:16px;color:#222;font-weight:700;position:relative;padding-left:10px;}
.m-sec-hd h2::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:4px;background:#2fa663;border-radius:2px;}
.m-sec-hd .m-more{font-size:12px;color:#999;}
.m-sec-bd{padding:12px 14px;}

/* 分类图标 */
.m-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:12px 8px;}
.m-cats a{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:#444;}
.m-cats .m-cat-ic{width:48px;height:48px;border-radius:14px;background:#eafaf0;display:flex;align-items:center;justify-content:center;font-size:22px;color:#2fa663;}

/* 产品网格 */
.m-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.m-card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.05);}
.m-card .m-thumb{width:100%;aspect-ratio:1/1;object-fit:cover;background:#f2f2f2;}
.m-card .m-cap{padding:8px 10px;font-size:13px;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* 新闻列表 */
.m-news li{border-bottom:1px solid #f2f2f2;padding:11px 0;}
.m-news li a{display:block;}
.m-news .m-nt{font-size:14px;color:#222;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.m-news .m-nd{font-size:11px;color:#999;margin-top:4px;}

/* 内页横幅 */
.m-inbanner{margin-top:var(--m-tb);height:130px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.4);}
.m-inbanner h1{font-size:20px;font-weight:700;letter-spacing:1px;}
.m-crumb{padding:8px 12px;font-size:12px;color:#999;background:#fff;margin-bottom:8px;}
.m-crumb a{color:#2fa663;}

/* 详情正文 */
.m-detail{background:#fff;padding:14px;margin:8px 12px;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.05);}
.m-detail h1{font-size:18px;color:#222;margin-bottom:10px;}
.m-detail img{max-width:100%;height:auto;margin:10px 0;border-radius:6px;}
.m-detail p{margin:8px 0;color:#444;}
.m-detail .m-meta{font-size:12px;color:#999;margin-bottom:10px;border-bottom:1px solid #f2f2f2;padding-bottom:8px;}

/* 侧栏分类（内页） */
.m-sidemenu{background:#fff;margin:8px 12px;border-radius:10px;overflow:hidden;}
.m-sidemenu .m-sm-hd{padding:10px 14px;background:#2fa663;color:#fff;font-weight:700;}
.m-sidemenu a{display:block;padding:11px 14px;border-bottom:1px solid #f2f2f2;color:#444;font-size:14px;}
.m-sidemenu a.active{color:#2fa663;font-weight:700;background:#eafaf0;}

/* 表单 */
.m-form{background:#fff;margin:8px 12px;padding:14px;border-radius:10px;}
.m-form .m-fld{margin-bottom:12px;}
.m-form label{display:block;font-size:13px;color:#555;margin-bottom:5px;}
.m-form input,.m-form textarea,.m-form select{width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;font-size:14px;outline:none;background:#fff;}
.m-form textarea{height:90px;resize:vertical;}
.m-form .m-btn{width:100%;padding:12px;background:#2fa663;color:#fff;border:0;border-radius:8px;font-size:15px;font-weight:700;}
.m-form .m-tip{font-size:12px;color:#999;margin-top:8px;text-align:center;}

/* 联系信息卡 */
.m-info{background:#fff;margin:8px 12px;padding:14px;border-radius:10px;font-size:14px;line-height:1.9;}
.m-info .m-row{display:flex;gap:8px;padding:6px 0;border-bottom:1px dashed #eee;}
.m-info .m-row b{color:#2fa663;min-width:64px;}

/* 分页 */
.m-page{display:flex;justify-content:center;gap:8px;padding:14px;flex-wrap:wrap;}
.m-page a,.m-page span{display:inline-block;min-width:34px;height:34px;line-height:34px;text-align:center;padding:0 8px;background:#fff;border-radius:8px;color:#555;font-size:13px;box-shadow:0 1px 2px rgba(0,0,0,.05);}
.m-page span{background:#2fa663;color:#fff;}

/* ---------- 底部 Tab 栏 ---------- */
.m-bottombar{
    position:fixed;left:0;right:0;bottom:0;z-index:50;height:56px;background:#fff;border-top:1px solid #eee;
    display:flex;max-width:750px;margin:0 auto;
}
.m-bottombar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#999;font-size:11px;}
.m-bottombar a .m-ic{font-size:20px;line-height:1;}
.m-bottombar a.active{color:#2fa663;}

/* 页脚版权 */
.m-copyright{text-align:center;font-size:11px;color:#aaa;padding:18px 12px 24px;}
.m-copyright a{color:#2fa663;}

/* 桌面端访问 /m/ 时，容器已限宽，这里仅隐藏 PC 专用（无） */