/* 浦林汉斯淋浴房 - 品牌官网样式 */
:root {
  --primary: #0e6ba8;
  --primary-dark: #0a4f7d;
  --accent: #18a999;
  --ink: #1c2b36;
  --muted: #5a6b78;
  --bg: #f5f9fb;
  --card: #ffffff;
  --line: #e2ecf2;
  --radius: 14px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { width: min(1140px, 92%); margin: 0 auto; }

/* 顶部导航 */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; }
.logo-mark {
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 18px; letter-spacing: 1px;
}
.logo small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); letter-spacing: 2px; }
.nav { display: flex; gap: 28px; font-size: 16px; }
.nav a { color: var(--muted); padding: 6px 2px; border-bottom: 2px solid transparent; transition: .2s; }
.nav a:hover, .nav a.active { color: var(--primary); border-bottom-color: var(--primary); }
.header-cta {
  background: var(--primary); color: #fff; padding: 10px 20px;
  border-radius: 999px; font-size: 15px; transition: .2s;
}
.header-cta:hover { background: var(--primary-dark); }

/* 首屏横幅 */
.hero {
  background:
    linear-gradient(120deg, rgba(10,79,125,.92), rgba(24,169,153,.82)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 14px);
  color: #fff; padding: 110px 0 130px; position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -120px; top: -80px;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 65%);
}
.hero h1 { font-size: 44px; line-height: 1.25; letter-spacing: 1px; }
.hero h1 span { color: #9fe8de; }
.hero p.sub { margin: 18px 0 34px; font-size: 18px; max-width: 620px; color: #e8f4f8; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 13px 32px; border-radius: 999px;
  font-size: 16px; transition: .2s; cursor: pointer;
}
.btn-primary { background: #fff; color: var(--primary); font-weight: 600; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.btn-ghost { border: 1.5px solid rgba(255,255,255,.7); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.hero-stats { display: flex; gap: 48px; margin-top: 56px; flex-wrap: wrap; }
.hero-stats b { font-size: 30px; display: block; color: #9fe8de; }
.hero-stats span { font-size: 14px; color: #d7ecf3; }

/* 通用区块 */
section.block { padding: 84px 0; }
.block-head { text-align: center; margin-bottom: 48px; }
.block-head h2 { font-size: 32px; letter-spacing: 1px; }
.block-head h2 i { font-style: normal; color: var(--accent); }
.block-head p { color: var(--muted); margin-top: 10px; }

/* 产品卡片 */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.product-card {
  background: var(--card); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); transition: .25s;
}
.product-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(14,107,168,.14); }
.product-visual { height: 168px; display: flex; align-items: center; justify-content: center; font-size: 64px; overflow: hidden; background: #f5fafd; padding: 8px; box-sizing: border-box; }
.product-visual img { width: 100%; height: 100%; object-fit: contain; display: block; transition: .35s; }
.product-card:hover .product-visual img { transform: scale(1.05); }
/* 首页热门型号：一行四款，缩略图更小，一屏看全 */
.hot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.hot-grid .product-visual { height: 136px; padding: 6px; }
.hot-grid .product-body { padding: 14px 15px 16px; }
.hot-grid .product-body h3 { font-size: 15px; margin-bottom: 6px; line-height: 1.35; }
.hot-grid .product-body p {
  font-size: 12.5px; line-height: 1.55; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hot-grid .product-tags { margin-top: 10px; gap: 6px; }
.hot-grid .tag { font-size: 11px; padding: 3px 8px; }
.pv-1 { background: linear-gradient(135deg,#d8f0fa,#bfe6f5); }
.pv-2 { background: linear-gradient(135deg,#d6f5ee,#b8ecdf); }
.pv-3 { background: linear-gradient(135deg,#e6e4fa,#d3d0f2); }
.pv-4 { background: linear-gradient(135deg,#fdeedd,#f9ddc0); }
.pv-5 { background: linear-gradient(135deg,#e0f2d9,#cbe7c2); }
.pv-6 { background: linear-gradient(135deg,#fbdfe4,#f5c6cf); }
.product-body { padding: 24px; }
.product-body h3 { font-size: 20px; margin-bottom: 8px; }
.product-body p { color: var(--muted); font-size: 15px; }
.product-tags { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.tag { font-size: 12px; color: var(--primary); background: #e8f4fb; padding: 4px 10px; border-radius: 999px; }

/* 优势 */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.feature {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 22px; transition: .25s;
}
.feature:hover { border-color: var(--accent); box-shadow: 0 10px 26px rgba(24,169,153,.12); }
.feature .icon { font-size: 34px; }
.feature h3 { font-size: 18px; margin: 12px 0 8px; }
.feature p { font-size: 14px; color: var(--muted); }

/* 流程 */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: step; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 16px; text-align: center; position: relative; }
.step b { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: #fff; align-items: center; justify-content: center; margin-bottom: 12px; }
.step h3 { font-size: 16px; margin-bottom: 6px; }
.step p { font-size: 13px; color: var(--muted); }

/* FAQ */
.faq-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; padding: 20px 24px; }
.faq-item summary { font-weight: 600; cursor: pointer; font-size: 17px; list-style: none; }
.faq-item summary::before { content: "Q "; color: var(--accent); font-weight: 700; }
.faq-item p { margin-top: 10px; color: var(--muted); padding-left: 22px; }

/* 联系区 */
.contact-band {
  background: linear-gradient(120deg, var(--primary-dark), var(--accent));
  color: #fff; border-radius: 20px; padding: 48px; text-align: center;
}
.contact-band h2 { font-size: 28px; margin-bottom: 10px; }
.contact-band p { color: #d9f2ef; margin-bottom: 26px; }
.contact-band .phone { font-size: 34px; font-weight: 700; letter-spacing: 2px; display: block; margin-bottom: 20px; }
a.phone { color: #fff; text-decoration: none; }
a.phone:hover { color: #c8f2ec; }
.info-card a[href^="tel:"] { color: var(--primary); font-weight: 700; font-size: 18px; text-decoration: none; }

/* 页脚 */
.site-footer { background: #10222e; color: #9fb3c0; padding: 56px 0 28px; margin-top: 84px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; }
.site-footer h4 { color: #fff; font-size: 16px; margin-bottom: 14px; }
.site-footer li { list-style: none; margin-bottom: 8px; font-size: 14px; }
.site-footer a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 40px; padding-top: 22px; font-size: 13px; text-align: center; }

/* 面包屑 */
.breadcrumb { padding: 18px 0; font-size: 14px; color: var(--muted); }
.breadcrumb a:hover { color: var(--primary); }

/* 页头内页横幅 */
.page-banner {
  background: linear-gradient(120deg, var(--primary-dark), var(--accent));
  color: #fff; padding: 60px 0; text-align: center;
}
.page-banner h1 { font-size: 34px; }
.page-banner p { color: #d9f2ef; margin-top: 8px; }

/* 表单 */
.form-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px; max-width: 720px; margin: 0 auto; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
label { font-size: 14px; color: var(--muted); display: block; margin-bottom: 6px; }
input, select, textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 10px; font-size: 15px; font-family: inherit; background: #fbfdfe;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
button.submit { width: 100%; background: var(--primary); color: #fff; border: none; padding: 14px; border-radius: 999px; font-size: 16px; cursor: pointer; margin-top: 6px; }
button.submit:hover { background: var(--primary-dark); }

.contact-info-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 44px; }
.info-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; text-align: center; }
.info-card .icon { font-size: 30px; }
.info-card h3 { margin: 10px 0 6px; font-size: 17px; }
.info-card p { color: var(--muted); font-size: 14px; }

/* 产品中心：分类筛选 */
.tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 34px; }
.tab {
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  padding: 9px 20px; border-radius: 999px; font-size: 15px; cursor: pointer;
  font-family: inherit; transition: .2s;
}
.tab:hover { border-color: var(--accent); color: var(--primary); }
.tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* 产品中心：分类导航与分区 */
.cat-nav { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 52px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  color: var(--muted); font-size: 14px; transition: .2s;
}
.chip b { font-size: 16px; }
.chip em { font-style: normal; font-size: 12px; color: var(--accent); }
.chip:hover, .chip.on { border-color: var(--primary); color: var(--primary); background: #f0f8fd; }

.cat-section { margin-bottom: 60px; scroll-margin-top: 96px; }
.cat-head { border-left: 4px solid var(--accent); padding-left: 14px; margin-bottom: 22px; }
.cat-head h2 { font-size: 24px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cat-head h2 em {
  font-style: normal; font-size: 13px; font-weight: 400; color: #fff;
  background: var(--accent); padding: 3px 10px; border-radius: 999px;
}
.cat-icon { font-size: 22px; }
.cat-head p { color: var(--muted); font-size: 15px; margin-top: 6px; max-width: 760px; }

/* 产品卡片（产品中心） */
.p-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.p-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: .25s;
}
.p-card:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(14,107,168,.13); }
.p-visual { height: 150px; display: flex; align-items: center; justify-content: center; font-size: 44px; background: #f5fafd; overflow: hidden; padding: 8px; box-sizing: border-box; }
.p-visual img { width: 100%; height: 100%; object-fit: contain; display: block; transition: .35s; }
.p-card:hover .p-visual img { transform: scale(1.05); }
.p-body { padding: 16px 16px 18px; }
.p-body h3 { font-size: 16px; margin-bottom: 3px; }
.p-type { color: var(--accent); font-size: 12px; margin-bottom: 10px; }
.p-spec { display: grid; grid-template-columns: 38px 1fr; gap: 5px 8px; font-size: 12px; margin-bottom: 12px; }
.p-spec dt { color: #8fa3b0; }
.p-spec dd { color: var(--muted); }
.p-btn {
  display: inline-block; border: 1px solid var(--primary); color: var(--primary);
  padding: 8px 22px; border-radius: 999px; font-size: 14px; transition: .2s;
}
.p-btn:hover { background: var(--primary); color: #fff; }

@media (max-width: 1200px) {
  .p-grid, .hot-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .p-grid, .hot-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 32px; }
  .nav { display: none; }
  .contact-info-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid-3, .grid-4, .steps, .p-grid, .hot-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .contact-band { padding: 32px 20px; }
}

/* ===== 型号详情页 ===== */
.p-card h3 a { color: inherit; text-decoration: none; }
.p-card h3 a:hover { color: var(--primary); }
.detail-wrap { padding: 22px 0 10px; }
.detail-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 34px; align-items: start; }
.detail-img { background: #f5fafd; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; font-size: 60px; }
.detail-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.detail-note { font-size: 12px; color: #9aacb8; margin-top: 8px; text-align: center; }
.detail-info h1 { font-size: 27px; line-height: 1.3; margin-bottom: 6px; }
.detail-info h1 em { display: block; font-style: normal; font-size: 15px; color: var(--accent); font-weight: 400; margin-top: 6px; }
.detail-sub { color: var(--muted); font-size: 13px; margin-bottom: 16px; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 18px; }
.spec-table th, .spec-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e8f0f5; vertical-align: top; }
.spec-table th { width: 88px; color: #8fa3b0; font-weight: 400; background: #fafcfd; }
.detail-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-ghost { border: 1px solid var(--primary); color: var(--primary); background: transparent; }
.btn-ghost:hover { background: var(--primary); color: #fff; }
.detail-tip { font-size: 12.5px; color: #9aacb8; margin-top: 10px; }
.point-list { list-style: none; display: grid; gap: 12px; max-width: 900px; }
.point-list li { background: #fff; border-left: 3px solid var(--primary); padding: 12px 16px; border-radius: 8px; font-size: 14px; color: var(--muted); box-shadow: 0 2px 10px rgba(15,60,90,.05); }
.point-list b { color: var(--text); }
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rel-item { background: #fff; border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 2px 12px rgba(15,60,90,.06); transition: .25s; display: block; }
.rel-item:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(15,60,90,.12); }
.rel-visual { height: 130px; background: #f5fafd; display: flex; align-items: center; justify-content: center; font-size: 34px; overflow: hidden; }
.rel-visual img { width: 100%; height: 100%; object-fit: contain; }
.rel-item h4 { font-size: 14px; padding: 10px 12px 2px; }
.rel-item p { font-size: 12px; color: #8fa3b0; padding: 0 12px 12px; }

/* ===== 移动端底部咨询条 ===== */
.m-bar { display: none; }
@media (max-width: 768px) {
  .m-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
    background: #fff; box-shadow: 0 -4px 18px rgba(15,60,90,.14);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .m-bar a { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 13px 0; font-size: 15px; font-weight: 600; text-decoration: none; }
  .m-bar .m-call { background: var(--primary); color: #fff; }
  .m-bar .m-msg { background: #fff; color: var(--primary); }
  .m-bar span { font-size: 16px; }
  body { padding-bottom: 52px; }
  .detail-grid { grid-template-columns: 1fr; gap: 20px; }
  .rel-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .rel-grid { grid-template-columns: 1fr 1fr; }
  .detail-info h1 { font-size: 22px; }
}

/* 首页产品卡片整卡可点击 */
.product-card { position: relative; }
.card-hit { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }

/* 预约表单结果框 */
.lead-result { margin-top: 18px; background: #f2f9fd; border: 1px solid #cfe7f5; border-radius: 12px; padding: 20px 22px; }
.lead-result h3 { font-size: 16px; margin-bottom: 10px; color: var(--primary); }
.lead-summary { font-family: inherit; font-size: 13.5px; line-height: 1.8; color: var(--muted); background: #fff; border-radius: 8px; padding: 12px 14px; white-space: pre-wrap; margin-bottom: 14px; }
.lead-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.lead-tip { font-size: 12.5px; color: #8fa3b0; margin-top: 10px; }

/* ===== 装修案例 / 户型方案 ===== */
.cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:34px}
.cs-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:transform .22s ease,box-shadow .22s ease}
.cs-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(14,107,168,.13)}
.cs-visual{aspect-ratio:4/3;background:#eef4f8;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cs-visual img{width:100%;height:100%;object-fit:contain}
.cs-body{padding:16px 18px 18px}
.cs-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}
.cs-tag{font-size:12px;line-height:1;padding:5px 9px;border-radius:20px;background:#eef5fa;color:var(--primary-dark)}
.cs-city{background:var(--primary);color:#fff}
.cs-body h3{font-size:16px;line-height:1.5;margin-bottom:7px;color:var(--ink)}
.cs-model{font-size:13px;color:var(--muted);margin-bottom:6px}
.cs-pain{font-size:13px;color:#7b8a96;line-height:1.75;margin-bottom:10px}
.cs-more{font-size:13px;color:var(--primary);font-weight:500}
.cs-cta{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  background:linear-gradient(120deg,#0e6ba8,#0a4f7d);border-radius:var(--radius);padding:26px 28px;color:#fff}
.cs-cta h3{font-size:18px;margin-bottom:6px}
.cs-cta p{font-size:14px;opacity:.86;line-height:1.7}
.cs-cta-btns{display:flex;gap:12px;flex-wrap:wrap}
.cs-cta .btn-primary{background:#fff;color:var(--primary-dark)}
.cs-cta .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}

.cd-head{margin-bottom:22px}
.cd-head h1{font-size:26px;line-height:1.4;margin:10px 0 8px}
.cd-sub{font-size:14px;color:var(--muted)}
.cd-sub a{color:var(--primary);border-bottom:1px solid rgba(14,107,168,.3)}
.cd-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:30px;align-items:start;margin-bottom:32px}
.cd-main{background:#eef4f8;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.cd-main img{width:100%;height:auto;object-fit:contain}
.cd-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.cd-thumbs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.cd-info h2{font-size:16px;margin-bottom:8px;color:var(--primary-dark)}
.cd-info h2:not(:first-child){margin-top:20px}
.cd-pain{font-size:14.5px;line-height:1.9;color:#4a5a66;background:#f7fafc;border-left:3px solid #cfe0ec;
  padding:12px 15px;border-radius:0 8px 8px 0}
.cd-plan{list-style:none}
.cd-plan li{position:relative;padding-left:22px;margin-bottom:10px;font-size:14.5px;line-height:1.85;color:#3d4d59}
.cd-plan li::before{content:"";position:absolute;left:4px;top:11px;width:7px;height:7px;border-radius:50%;
  background:var(--accent)}
.cd-warn{margin-top:18px;background:#fff8ea;border:1px solid #f5e3bd;border-radius:10px;padding:14px 16px}
.cd-warn b{display:block;font-size:13.5px;color:#8a6414;margin-bottom:5px}
.cd-warn p{font-size:13.5px;line-height:1.85;color:#7a6432}
.cd-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.cd-spec{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;margin-bottom:32px}
.cd-spec h2{font-size:17px;margin-bottom:14px;color:var(--primary-dark)}
.cd-spec .spec-table{width:100%;border-collapse:collapse;font-size:14px}
.cd-spec .spec-table th{text-align:left;width:110px;padding:10px 12px;background:#f4f9fc;color:var(--muted);
  font-weight:500;border:1px solid var(--line)}
.cd-spec .spec-table td{padding:10px 12px;border:1px solid var(--line)}
.cd-spec .spec-table a{color:var(--primary)}

@media(max-width:980px){
  .cs-grid{grid-template-columns:repeat(2,1fr)}
  .cd-grid{grid-template-columns:1fr;gap:22px}
  .cd-head h1{font-size:22px}
}
@media(max-width:640px){
  .cs-grid{grid-template-columns:1fr;gap:16px}
  .cs-cta{padding:22px 20px}
  .cs-cta h3{font-size:16px}
  .cd-head h1{font-size:20px}
  .cd-spec{padding:18px}
  .cd-thumbs{grid-template-columns:repeat(3,1fr)}
}

/* ===== 工艺四道关 ===== */
.craft-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.craft-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 20px;text-decoration:none;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.craft-card:hover{transform:translateY(-4px);border-color:#9fc9e4;box-shadow:0 14px 30px rgba(14,107,168,.12)}
.craft-card em{display:inline-block;font-style:normal;font-size:11.5px;letter-spacing:.08em;
  padding:4px 9px;border-radius:5px;background:#eef5fa;color:var(--primary-dark);margin-bottom:12px}
.craft-card h3{font-size:16px;margin-bottom:8px;color:var(--ink)}
.craft-card p{font-size:13px;line-height:1.8;color:var(--muted);margin-bottom:12px}
.craft-card .more{font-size:13px;color:var(--primary);font-weight:500}
@media(max-width:1100px){ .nav{gap:16px;font-size:15px} }
@media(max-width:900px){ .craft-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .craft-grid{grid-template-columns:1fr;gap:12px} }

/* ===== 手机端大图限高 ===== */
@media(max-width:640px){
  .cd-main img{max-height:400px;width:auto;max-width:100%;margin:0 auto;display:block}
  .detail-img img{max-height:380px;width:auto;max-width:100%;margin:0 auto}
  .detail-img{aspect-ratio:auto;padding:10px}
}