/* ============================================
   苏州罗米达 手机版样式
   品牌色：主绿 #45c094 / 深绿 #2e8b6e / 蓝 #0059ab（与电脑站一致）
   ============================================ */
:root {
  --accent: #45c094;
  --accent-dark: #2e8b6e;
  --accent-light: #6ee2b3;
  --brand: #0059ab;
  --header-bg: #123a2f;
  --text-dark: #222;
  --text-body: #444;
  --text-light: #8a8a8a;
  --bg-gray: #f6f7f8;
  --white: #fff;
  --border: #e8e8e8;
  --shadow: 0 2px 10px rgba(0,0,0,.06);
  --radius: 10px;
  --header-h: 52px;
  --toolbar-h: 52px;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 15px; line-height: 1.7; color: var(--text-body); background: var(--white);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; border: none; background: none; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 15px; }
.container { padding: 0 14px; }

/* ---------- 顶部固定导航 ---------- */
.m-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--header-bg);
}
.m-header-inner {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px;
}
.m-logo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.m-logo img { height: 32px; width: auto; border-radius: 4px; flex-shrink: 0; }
.m-logo span {
  color: #fff; font-size: 16px; font-weight: 500; letter-spacing: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-menu-btn {
  width: 42px; height: 42px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px; flex-shrink: 0;
}
.m-menu-btn span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: all .25s; }
.m-menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.m-menu-btn.open span:nth-child(2) { opacity: 0; }
.m-menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.m-nav { display: none; background: var(--header-bg); padding: 4px 0 12px; }
.m-nav.show { display: block; }
.m-nav a {
  display: block; padding: 13px 18px; color: rgba(255,255,255,.9);
  font-size: 15px; border-top: 1px solid rgba(255,255,255,.08);
  position: relative;
}
.m-nav a.active { color: var(--accent-light); font-weight: 500; }
.m-nav a.active::after {
  content: ""; position: absolute; left: 18px; bottom: 6px;
  width: 22px; height: 3px; background: var(--accent); border-radius: 2px;
}

.page-body { padding-top: var(--header-h); min-height: 60vh; padding-bottom: calc(var(--toolbar-h) + 18px); }

/* ---------- 通用区块 ---------- */
.section { padding: 22px 0; }
.section.bg-gray { background: var(--bg-gray); }
.section-title { text-align: center; margin-bottom: 16px; }
.section-title .subtitle { font-size: 11px; letter-spacing: 2px; color: var(--accent-dark); text-transform: uppercase; }
.section-title h2 { font-size: 19px; color: var(--text-dark); font-weight: 500; margin-top: 2px; }
.section-title .divider { width: 34px; height: 3px; background: var(--accent); border-radius: 2px; margin: 9px auto 0; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 10px 22px; border-radius: 22px; font-size: 15px;
  transition: opacity .15s; border: 1px solid transparent;
}
.btn:active { opacity: .8; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-outline { background: #fff; border-color: var(--accent); color: var(--accent-dark); }
.btn-block { width: 100%; }
.btn-lg { padding: 13px 0; font-size: 16px; border-radius: 26px; }

/* ---------- 轮播 ---------- */
.banner-slider { position: relative; overflow: hidden; }
.banner-slide { display: none; }
.banner-slide.active { display: block; }
.banner-slide img { width: 100%; height: 180px; object-fit: cover; }
.banner-dots {
  position: absolute; bottom: 10px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 6px;
}
.banner-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.55); }
.banner-dot.active { background: var(--accent); width: 18px; border-radius: 4px; }

/* ---------- 首页分类快捷 ---------- */
.cat-bar { background: var(--white); padding: 12px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cat-bar .cat-scroll { display: flex; gap: 8px; padding: 0 14px; }
.cat-bar a {
  flex-shrink: 0; padding: 6px 14px; border-radius: 16px;
  background: var(--bg-gray); color: var(--text-body); font-size: 13px; border: 1px solid var(--border);
}
.cat-bar a:active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- 产品卡片（2列网格） ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.product-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: block; }
.product-img { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #f1f3f5; }
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.product-card:active .product-img img { transform: scale(1.04); }
.video-badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: rgba(0,0,0,.55); color: #fff; font-size: 10px;
  padding: 2px 8px; border-radius: 10px;
}
.product-body { padding: 9px 10px 11px; }
.product-body h3 {
  font-size: 14px; color: var(--text-dark); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.product-body p {
  font-size: 12px; color: var(--text-light); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- 新闻卡片 ---------- */
.news-card {
  display: block; background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 13px 14px; margin-bottom: 10px;
}
.news-date { font-size: 12px; color: var(--accent-dark); margin-bottom: 4px; }
.news-card h3 { font-size: 15px; color: var(--text-dark); font-weight: 500; }
.news-card p {
  font-size: 13px; color: var(--text-light); margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- 关于首页摘要 ---------- */
.about-summary { line-height: 1.9; color: var(--text-body); font-size: 14px; }
.about-summary p { margin-bottom: 8px; }

/* ---------- 列表页 ---------- */
.page-head { background: var(--header-bg); padding: 26px 14px 20px; text-align: center; }
.page-head h2 { color: #fff; font-size: 20px; font-weight: 500; }
.page-head p { color: rgba(255,255,255,.55); font-size: 11px; letter-spacing: 2px; margin-top: 3px; }

/* 分类横滑 tab */
.cat-tabs {
  position: sticky; top: var(--header-h); z-index: 50;
  background: var(--white); border-bottom: 1px solid var(--border);
  display: flex; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 0 4px;
}
.cat-tabs a {
  flex-shrink: 0; padding: 11px 14px; font-size: 14px; color: var(--text-body);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.cat-tabs a.active { color: var(--accent-dark); border-bottom-color: var(--accent); font-weight: 500; }

/* 列表分页 */
.pagination { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 0; }
.pagination a, .pagination span.current {
  min-width: 84px; padding: 9px 0; text-align: center;
  border: 1px solid var(--border); border-radius: 18px; font-size: 14px; color: var(--text-body); background: var(--white);
}
.pagination span.current { background: var(--accent); color: #fff; border-color: var(--accent); }
.pagination .disabled { opacity: .4; pointer-events: none; }
.pager-dots { min-width: auto; border: none !important; color: var(--text-light); }

/* ---------- 详情页 ---------- */
.detail-wrap { padding: 0 14px; }
.detail-title { font-size: 18px; color: var(--text-dark); line-height: 1.5; padding: 16px 0 10px; font-weight: 500; }
.detail-meta { font-size: 12px; color: var(--text-light); padding-bottom: 12px; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px 14px; }
.detail-meta span b { color: var(--text-body); font-weight: 400; }
.detail-hero { margin: 14px 0; border-radius: var(--radius); overflow: hidden; }
.detail-content { padding: 14px 0 8px; color: var(--text-body); font-size: 14.5px; line-height: 1.9; word-break: break-word; }
.detail-content img { max-width: 100%; height: auto !important; margin: 10px auto; border-radius: 8px; }
.detail-content video { max-width: 100%; border-radius: 8px; }
.detail-content iframe { max-width: 100%; }
.detail-content p { margin-bottom: 10px; }
.detail-content h1, .detail-content h2, .detail-content h3, .detail-content h4 { color: var(--text-dark); margin: 16px 0 8px; line-height: 1.5; }
.detail-content table { width: 100%; border-collapse: collapse; margin: 10px 0; display: block; overflow-x: auto; }
.detail-content td, .detail-content th { border: 1px solid var(--border); padding: 6px 8px; font-size: 13px; }

/* 上下篇 */
.prevnext { margin: 18px 0 10px; border-top: 1px solid var(--border); padding-top: 12px; }
.prevnext a { display: block; font-size: 13.5px; color: var(--text-body); padding: 6px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prevnext a:first-child { color: var(--accent-dark); }
.prevnext .none { color: var(--text-light); }

/* ---------- 关于 ---------- */
.about-block { padding: 16px 14px 10px; line-height: 1.9; font-size: 14.5px; color: var(--text-body); word-break: break-word; }
.about-block img { max-width: 100%; height: auto !important; margin: 12px auto; border-radius: 8px; }
.about-block p { margin-bottom: 10px; }

/* ---------- 联系我们 ---------- */
.contact-block { padding: 16px 14px; }
.contact-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px; margin-bottom: 10px;
}
.contact-item .c-ico {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 17px;
}
.contact-item .c-body { min-width: 0; }
.contact-item .c-body .lb { font-size: 12px; color: var(--text-light); }
.contact-item .c-body .val { font-size: 15px; color: var(--text-dark); font-weight: 500; word-break: break-all; }
.contact-item .c-body .val.tel { color: var(--brand); font-size: 17px; }

/* ---------- 表单 ---------- */
.form-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 14px; margin: 14px; }
.form-card h3 { font-size: 15px; color: var(--text-dark); font-weight: 500; margin-bottom: 12px; padding-left: 8px; border-left: 3px solid var(--accent); }
.field { margin-bottom: 13px; }
.field label { display: block; font-size: 13px; color: var(--text-light); margin-bottom: 5px; }
.field input, .field textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--border);
  border-radius: 8px; outline: none; background: #fafbfc; font-size: 15px;
  -webkit-appearance: none; appearance: none;
}
.field input:focus, .field textarea:focus { border-color: var(--accent); background: #fff; }
.field textarea { resize: vertical; min-height: 96px; line-height: 1.7; }
.field .hint { font-size: 12px; color: var(--text-light); margin-top: 4px; }
.form-tip { font-size: 13px; margin-top: 8px; text-align: center; min-height: 20px; }

/* 留言查询 */
.query-result { margin: 14px; }
.my-message-card {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 12px 14px; margin-bottom: 10px;
}
.my-message-card .time { font-size: 12px; color: var(--text-light); margin-bottom: 6px; }
.my-message-card .q { font-size: 14px; color: var(--text-dark); }
.my-message-card .a { font-size: 13.5px; color: var(--text-body); background: #f6faf9; border-radius: 8px; padding: 8px 10px; margin-top: 8px; border-left: 3px solid var(--accent); }
.no-result { text-align: center; color: var(--text-light); font-size: 14px; padding: 26px 0; }

/* ---------- 页脚 ---------- */
.m-footer { background: var(--header-bg); color: rgba(255,255,255,.75); margin-top: 10px; }
.m-footer-info { padding: 18px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.m-footer-info .f-tel { font-size: 17px; color: #fff; font-weight: 500; }
.m-footer-info .f-row { font-size: 13px; margin-top: 6px; line-height: 1.8; }
.m-footer-info .f-row a { color: var(--accent-light); }
.m-footer-copy { padding: 13px 14px 70px; text-align: center; font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.8; }

/* ---------- 底部悬浮工具栏 ---------- */
.m-toolbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 99;
  height: var(--toolbar-h); background: var(--white);
  border-top: 1px solid var(--border);
  display: flex;
}
.m-toolbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 10px; color: var(--text-light); gap: 2px;
}
.m-toolbar a .t-ico { font-size: 17px; line-height: 1; }
.m-toolbar a.toolbar-call { background: var(--brand); color: #fff; }
.m-toolbar a.toolbar-call .t-ico { font-size: 18px; }
.m-toolbar a:active { opacity: .75; }

/* ---------- 加载/空状态 ---------- */
.loading-tip { text-align: center; color: var(--text-light); font-size: 14px; padding: 30px 0; }
.empty-tip { text-align: center; color: var(--text-light); font-size: 14px; padding: 34px 0; }

/* ---------- 回到顶部浮标 ---------- */
.backtop {
  position: fixed; right: 12px; bottom: calc(var(--toolbar-h) + 14px); z-index: 90;
  width: 40px; height: 40px; border-radius: 50%; background: rgba(18,58,47,.75); color: #fff;
  display: none; align-items: center; justify-content: center; font-size: 18px;
}
.backtop.show { display: flex; }

/* 详情页图片放大预览（简单灯箱） */
.lightbox {
  position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.88);
  display: none; align-items: center; justify-content: center; padding: 16px;
}
.lightbox.show { display: flex; }
.lightbox img { max-width: 100%; max-height: 90vh; border-radius: 6px; }
.lightbox-close {
  position: absolute; top: 14px; right: 14px; color: #fff; font-size: 30px; line-height: 1;
}