/* ============================================================
   产品列表页 (system.html) - 仿 meidis.cn/list_24 精确排版
   Hero: 251px (BG 146px 居中) / Grid: 4×302px
   ============================================================ */

/* Hero Banner - 251px 高 */
.productlist-hero {
  position: relative;
  height: 251px;
  width: 100%;
  background: #fff;
  overflow: hidden;
  margin-top: 110px;  /* 顶部导航高度 */
}
/* BG 背景图 146px 高 - 居中显示 */
.productlist-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;  /* 充满整个 hero 没有留白 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Overlay（不显示遮罩，参考站也是 0% 透明） */
.productlist-hero-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}
/* Container 1280px 全宽，文字居中 */
.productlist-hero .container {
  position: absolute;
  top: 80px;  /* 文字在底部 */
  left: 0; right: 0;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}
.productlist-hero h1 {
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 10px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.productlist-hero .breadcrumb {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.productlist-hero .breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color .15s;
}
.productlist-hero .breadcrumb a:hover {
  color: #fff;
  text-decoration: underline;
}

/* 简单列表布局 - 简单系统页用（树脂粘合剂/工具等） */
.productlist-hero-sub {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  margin: 12px 0 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  max-width: 720px;
  line-height: 1.5;
}
.productlist-section-title {
  font-size: 26px;
  font-weight: 700;
  color: #1a1a2e;
  text-align: center;
  margin: 0 0 36px;
  position: relative;
}
.productlist-section-title:after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, #4f46e5, #7c3aed);
  margin: 14px auto 0;
  border-radius: 2px;
}
.productlist-empty {
  text-align: center;
  color: #999;
  padding: 80px 20px;
  font-size: 14px;
}

/* 分页 */
.productlist-pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 50px auto 0;
  padding: 20px 0;
  clear: both;
  text-align: center;
}
.productlist-pagination .page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 36px;
  padding: 0 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-decoration: none;
  color: #555;
  font-size: 14px;
  background: #fff;
  transition: all .2s;
}
.productlist-pagination .page-btn:hover:not(.disabled) {
  border-color: #c73b3b;
  color: #c73b3b;
  background: #fff5f5;
}
.productlist-pagination .page-btn.disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
  background: #f5f5f5;
}
.productlist-pagination .page-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 36px;
  padding: 0 16px;
  font-size: 14px;
  color: #1a1a2e;
  font-weight: 500;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* 产品网格 - 1280px 宽，4列×302px */
.productlist-section {
  padding: 60px 0 60px;
  background: #fff;
}
.productlist-section .container {
  max-width: 1280px;
  margin: 0 auto;
}
.productlist-grid {
  display: grid;
  grid-template-columns: repeat(4, 302px);
  gap: 28px 24px;
  justify-content: center;
  max-width: 1280px;
  margin: 0 auto;
}
.productlist-item {
  display: block;
  text-decoration: none;
  color: inherit;
  width: 302px;
  transition: transform .2s;
}
.productlist-img {
  width: 302px;
  height: 302px;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.productlist-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s;
}
.productlist-item:hover {
  transform: translateY(-3px);
}
.productlist-item:hover .productlist-img img {
  transform: scale(1.04);
}
.productlist-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  text-align: center;
  padding: 12px 8px;
  margin: 0;
  line-height: 1.5;
}

/* 响应式 */
@media (max-width: 1280px) {
  .productlist-grid { grid-template-columns: repeat(3, 302px); }
}
@media (max-width: 980px) {
  .productlist-grid { grid-template-columns: repeat(2, 302px); gap: 20px 16px; }
}
@media (max-width: 640px) {
  .productlist-grid { grid-template-columns: repeat(2, 1fr); }
  .productlist-item, .productlist-img { width: 100%; }
  .productlist-img { aspect-ratio: 1/1; height: auto; }
  .productlist-hero { height: 200px; }
  .productlist-hero h1 { font-size: 28px; }
  .productlist-hero-bg { height: 110px; margin: 45px 0 45px; }
}

/* ============================================================
   系统页 - 精确匹配 meidis.cn/list_19 排版和样式
   ============================================================ */

/* ─── 全局变量 & 基础 ─── */
.container { max-width:1280px; margin:0 auto; padding:0 24px; }
.section-pad { padding:80px 0; }
.section-header { display:flex; align-items:center; gap:12px; margin-bottom:48px; }
.section-title {
  font-size:2.2rem; font-weight:700; color:#1d1d1f; margin:0;
  letter-spacing:-.02em;
}

/* ─── HERO ─── */
.homeowners-hero {
  position:relative; width:100%; height:540px; overflow:hidden; margin-top:80px;
}
.homeowners-hero-bg {
  position:absolute; inset:0; background-size:cover; background-position:center;
}
.homeowners-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.25) 50%,rgba(0,0,0,.1) 100%);
}
.homeowners-hero-content {
  position:absolute; bottom:60px; left:0; right:0; z-index:2;
}
.homeowners-hero-content h1 {
  font-size:3.6rem; color:#fff; margin:0 0 16px; font-weight:800;
  line-height:1.15; text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.homeowners-hero-sub {
  font-size:1.2rem; color:rgba(255,255,255,.85); margin:0;
  max-width:720px; line-height:1.5; text-shadow:0 1px 6px rgba(0,0,0,.25);
}

/* ─── BENEFITS ─── */
.benefits-section { background:#f8f9fa; }
.benefits-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.benefit-card {
  background:#fff; border-radius:16px; padding:40px 24px;
  text-align:center; box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition:transform .3s,box-shadow .3s;
}
.benefit-card:hover { transform:translateY(-4px); box-shadow:0 8px 28px rgba(0,0,0,.08); }
.benefit-img { margin-bottom:20px; }
.benefit-img img { width:80px; height:80px; object-fit:contain; }
.benefit-card h3 { font-size:1.1rem; font-weight:700; color:#1d1d1f; margin:0; }

/* ─── JOIN / INTRO ─── */
.join-section { background:#fff; }
.join-grid {
  display:flex; gap:0; align-items:stretch;
}
.join-text {
  flex:1; background:#155D74; color:#fff; padding:60px 50px;
  border-radius:14px 0 0 14px; display:flex; flex-direction:column; justify-content:center;
}
.join-grid:last-child .join-text { border-radius:0 14px 14px 0; }
.join-eyebrow {
  font-size:.85rem; font-weight:700; text-transform:uppercase;
  color:#ffd166; letter-spacing:.1em; margin:0 0 14px;
}
.join-text h3 {
  font-size:2rem; font-weight:800; color:#fff; margin:0 0 18px; line-height:1.2;
}
.join-text p { font-size:1rem; line-height:1.75; color:#fff; margin:0; }
.join-img { flex:0 0 46%; border-radius:0 14px 14px 0; overflow:hidden; }
.join-grid > .join-text + .join-img { border-radius:0 14px 14px 0; }
.join-grid > .join-img + .join-text { border-radius:14px 0 0 14px; }
.join-grid > .join-img { border-radius:0; }
.join-img img { width:100%; height:100%; object-fit:cover; display:block; min-height:380px; }
.join-video video { width:100%; height:100%; object-fit:cover; display:block; min-height:380px; }
.join-video img { width:100%; height:100%; object-fit:cover; display:block; min-height:380px; }

/* ─── BLENDS / HORIZONTAL SCROLL ─── */
.blends-section { background:#f8f9fa; overflow:hidden; }
.blends-titles { flex:1; }
.blends-viewport {
  overflow-x:auto; overflow-y:hidden; padding:0 0 12px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.blends-viewport::-webkit-scrollbar { display:none; }
.blends-track {
  display:flex; gap:16px; padding:0 calc((100vw - 1280px)/2 + 24px);
  width:max-content;
}
.blend-card {
  display:block; text-decoration:none; color:inherit; width:220px;
  background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.04); flex-shrink:0;
  transition:transform .3s,box-shadow .3s;
}
.blend-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,.1); }
.blend-img { width:220px; height:220px; background:#f0f0f0; overflow:hidden; }
.blend-img img { width:100%; height:100%; object-fit:cover; display:block; }
.blend-name {
  font-size:.9rem; font-weight:500; color:#1d1d1f; text-align:center;
  padding:12px 10px; margin:0; line-height:1.4;
}
.blends-scrollbar { margin-top:16px; padding:0 0 4px; }
.blends-sb-track {
  height:4px; background:#e0e0e0; border-radius:2px; position:relative; cursor:pointer;
}
.blends-sb-thumb {
  height:4px; background:#c73b3b; border-radius:2px; position:absolute; top:0; left:0;
  transition:width .15s;
}

/* ─── DOWNLOADS ─── */
.downloads-section { background:#fff; }
.downloads-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.download-card {
  border:1.5px solid #e5e5e5; border-radius:12px; padding:32px 20px;
  text-align:center; display:flex; flex-direction:column; align-items:center;
  gap:12px; transition:border-color .3s,box-shadow .3s;
}
.download-card:hover { border-color:#c73b3b; box-shadow:0 4px 16px rgba(199,59,59,.08); }
.download-card__header { display:flex; flex-direction:column; align-items:center; gap:12px; }
.download-card__header svg { width:32px; height:32px; color:#c73b3b; stroke:#c73b3b; stroke-width:1.5; }
.download-card__header h3 { font-size:1rem; font-weight:600; color:#1d1d1f; margin:0; }
.download-card__link {
  display:inline-block; padding:8px 28px; border-radius:25px;
  background:#c73b3b; color:#fff; font-size:.85rem; font-weight:600;
  text-decoration:none; transition:background .2s;
}
.download-card__link:hover { background:#a82e2e; }

/* ─── BUTTON PILL ─── */
.btn-pill {
  display:inline-flex; align-items:center; padding:10px 28px;
  border-radius:25px; background:#1d1d1f; color:#fff;
  font-size:.9rem; font-weight:600; text-decoration:none;
  transition:background .2s; white-space:nowrap;
}
.btn-pill:hover { background:#333; }

/* ─── REVEAL ANIMATION ─── */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .6s ease,transform .6s ease; }
.reveal.revealed { opacity:1; transform:translateY(0); }

/* ─── 响应式 ─── */
@media (max-width:1280px) {
  .blends-track { padding:0 24px; }
}
@media (max-width:960px) {
  .homeowners-hero { height:400px; }
  .homeowners-hero-content h1 { font-size:2.4rem; }
  .homeowners-hero-content { bottom:50px; }
  .benefits-grid { grid-template-columns:repeat(2,1fr); }
  .join-grid { flex-direction:column; }
  .join-text { border-radius:14px 14px 0 0 !important; padding:40px 30px; }
  .join-img { flex:none; width:100%; max-width:500px; border-radius:0 0 14px 14px; }
  .join-img img, .join-video video, .join-video img { min-height:240px; }
  .downloads-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .homeowners-hero { height:320px; margin-top:60px; }
  .homeowners-hero-content h1 { font-size:1.8rem; }
  .homeowners-hero-sub { font-size:1rem; }
  .section-pad { padding:48px 0; }
  .benefits-grid { grid-template-columns:1fr; }
  .downloads-grid { grid-template-columns:1fr; }
  .blend-card { width:160px; }
  .blend-img { width:160px; height:160px; }
  .section-title { font-size:1.5rem; }
  .join-text { padding:30px 24px; }
}