/* =====================================================
   互联电气 www.hulianele.com 网站美化样式 v1
   现代工业风：科技蓝 + 白 + 浅灰，圆角卡片化
   独立文件，删除本文件并还原 header.htm 即可回滚
   ===================================================== */

:root{
  --brand:#0b5cad;
  --brand-dark:#084a8c;
  --brand-light:#eaf2fb;
  --accent:#f59e0b;
  --text:#26303b;
  --text-2:#5b6b7c;
  --line:#e5ecf4;
  --bg:#f4f7fb;
  --radius:12px;
  --shadow:0 3px 14px rgba(11,92,173,.10);
  --shadow-hover:0 12px 30px rgba(11,92,173,.20);
}

body{
  font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:#fff;
}
a{ transition:color .2s ease; }

/* ---------- 顶部导航 ---------- */
#pc-header .navbar{
  background:#fff;
  box-shadow:0 2px 12px rgba(9,64,120,.08);
  border-bottom:2px solid var(--brand);
}
#pc-header .nav-menu > li > a{
  color:var(--text);
  font-weight:600;
  letter-spacing:.5px;
  padding:12px 12px;
  font-size:14px;
}
#pc-header .nav-menu > li > a:hover,
#pc-header .nav-menu > li.active > a{
  color:var(--brand);
}
#pc-header .nav-menu > li.active > a{
  position:relative;
}
#pc-header .nav-menu > li.active > a::after{
  content:"";
  position:absolute;
  left:16px; right:16px; bottom:2px;
  height:3px;
  border-radius:2px;
  background:var(--brand);
}
#pc-header .navbar .logo img{ max-height:52px; }

/* ---------- 按钮 ---------- */
.button.bg-yellow,
.button.radius-rounded.bg-yellow,
.button.border-none.radius-rounded{
  background:linear-gradient(135deg,#ffb020,#f59e0b) !important;
  color:#fff !important;
  border:none !important;
  border-radius:22px !important;
  box-shadow:0 4px 14px rgba(245,158,11,.28);
  padding:8px 26px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.button.bg-yellow:hover,
.button.radius-rounded.bg-yellow:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(245,158,11,.38);
}

/* ---------- 区块标题 ---------- */
.title-c h3{
  font-size:26px;
  color:#12263a;
  letter-spacing:1px;
}
.title-c h3::after{
  content:"";
  display:block;
  width:56px; height:3px;
  border-radius:2px;
  background:var(--brand);
  margin:12px auto 0;
}
.title-c.text-white h3{ color:#fff; }
.title-c.text-white h3::after{ background:var(--accent); }

/* ---------- 首页产品分类 Tab ---------- */
.line.tab{ border-bottom:1px solid var(--line); }
.tab-nav{
  display:inline-flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
.tab-nav li{ list-style:none; }
.tab-nav li a{
  display:inline-block;
  padding:7px 22px;
  border:1px solid #d7e2ee;
  border-radius:20px;
  color:#425466;
  background:#fff;
  transition:all .2s ease;
}
.tab-nav li a:hover{ color:var(--brand); border-color:var(--brand); }
.tab-nav li.active a,
.tab-nav a.active{
  background:var(--brand) !important;
  border-color:var(--brand) !important;
  color:#fff !important;
  box-shadow:0 4px 12px rgba(11,92,173,.3);
}

/* ---------- 产品卡片（首页轮播/列表/相关推荐） ---------- */
.owl-carousel .item.media.media-y.bg-white,
.media1.media-y.bg-white{
  border:1px solid var(--line) !important;
  border-radius:var(--radius);
  background:#fff !important;
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.owl-carousel .item.media.media-y.bg-white:hover,
.media1.media-y.bg-white:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-hover);
  border-color:#bcd6ee !important;
}
.owl-carousel .item.media .padding-large{ padding:14px; }
.media1 .padding-large{ padding:14px; }
.product-list .media1 .padding-large{ padding:8px; }
.product-list .media1{ margin-bottom:14px; }
.product-list .media1 .media-body h2 a{ font-size:12px; }
.product-list .x2{ width:12.5%; }
.product-list .media1 .padding-large{ padding:6px; }
.product-list .media1{ margin-bottom:12px; }
.product-list .media1 .media-body h2 a{ font-size:12px; }
.owl-carousel.carousel-pro .item{ padding:0 6px; }
.media-img{ border-radius:8px; overflow:hidden; background:#fff; }
.media-body{ padding-top:10px; }
.media-body h2{ margin:0; }
.media-body h2 a,
.media-body h2 a.height-middle{
  color:var(--text);
  font-weight:600;
  font-size:16px;
}
.media-body h2 a:hover{ color:var(--brand); }
.item.media .media-body .button,
.media1 .media-body .button{
  background:var(--brand) !important;
  border-radius:18px !important;
  padding:6px 22px;
  box-shadow:none;
  transition:background .2s ease;
}
.item.media .media-body .button:hover,
.media1 .media-body .button:hover{ background:var(--brand-dark) !important; }

/* ---------- 列表页筛选区 ---------- */
.filter-box{
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--line);
}
.filter-nav a{
  border-radius:16px;
  padding:5px 16px;
  font-size:14px;
  transition:all .2s ease;
}
.filter-nav a:hover{ color:var(--brand); background:var(--brand-light); }
.filter-nav a.on,
.filter-nav a.active{
  background:var(--brand) !important;
  color:#fff !important;
  border-radius:16px;
}
.nav-tree a{ color:#425466; transition:color .2s ease, background .2s ease; }
.nav-tree a:hover,
.nav-tree a.on{ color:var(--brand); }
.nav-tree li a.active,
.nav-tree li a.cur{
  background:linear-gradient(135deg,#0d6ed6,#0b5cad) !important;
  color:#fff !important;
  box-shadow:0 4px 12px rgba(11,92,173,.25);
}

/* ---------- 分页 ---------- */
.pagination a,
.pagination span{
  border-radius:6px;
  border:1px solid var(--line);
  color:#425466;
  transition:all .2s ease;
}
.pagination a:hover{ border-color:var(--brand); color:var(--brand); }
.pagination .current,
.pagination a.on{
  background:var(--brand) !important;
  border-color:var(--brand) !important;
  color:#fff !important;
}

/* ---------- 详情页 ---------- */
.nav-bread a{ color:#64748b; font-size:15px; }
.nav-bread a:hover{ color:var(--brand); }
.nav-bread span{ color:var(--text-2); font-size:15px; }
.product-description h1{
  font-size:29px;
  color:#12263a;
  letter-spacing:.5px;
}
.ey-price{
  font-size:18px;
  line-height:1.9;
  color:#374151;
}
.ey-price:first-of-type{ margin-top:6px; }
.ey-price .Conv_DINCondensedC{ font-family:inherit; }
.attribute{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.attribute li{
  padding:10px 16px;
  font-size:16px;
  border-bottom:1px dashed var(--line);
}
.attribute li:last-child{ border-bottom:none; }
.attribute li:nth-child(odd){ background:#f8fafc; }
.pro-thumb .item{ border-radius:8px; overflow:hidden; border:1px solid var(--line); }
.tab-head .tab-nav{ justify-content:flex-start; }

/* ---------- 关于我们区块 ---------- */
.home-about{ position:relative; }
.home-about::before{
  content:"";
  position:absolute; inset:0;
  background:rgba(6,42,84,.55);
}
.home-about .container,
.home-about .title-c{ position:relative; z-index:1; }
.home-about .line.bg-white{ border-radius:var(--radius); overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,.18); }

/* ---------- 页脚 ---------- */
footer, .footer, [class*="footer"] a{ transition:color .2s ease; }
[class*="footer"] a:hover{ color:var(--brand); }

/* ---------- 移动端微调 ---------- */
@media (max-width:767px){
  .title-c h3{ font-size:21px; }
  #pc-header .nav-menu > li > a{ padding:10px 8px; font-size:13px; }
  .product-description h1{ font-size:20px; }
  .hero-caption h2{ font-size:26px; letter-spacing:4px; }
  .hero-caption p{ font-size:15px; letter-spacing:1px; margin-top:8px; }
}

/* ---------- Banner：中英文平衡文字层（保留） ---------- */
.hero-wrap{ position:relative; }
.channel-banner{ position:relative; }
.banner-overlay{
  position:absolute; inset:0;
  background:rgba(6,42,84,.78);
  z-index:2;
  pointer-events:none;
}
.hero-wrap::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(6,42,84,.20),rgba(6,42,84,.55));
  z-index:2;
  pointer-events:none;
}
.hero-caption{
  position:absolute;
  left:0; right:0; top:50%;
  transform:translateY(-50%);
  text-align:center;
  color:#fff;
  z-index:5;
  pointer-events:none;
  padding:0 20px;
}
.hero-caption h2{
  margin:0;
  font-size:34px;
  font-weight:700;
  letter-spacing:5px;
  text-shadow:0 2px 18px rgba(0,0,0,.65);
}
.hero-caption p{
  margin:12px 0 0;
  font-size:24px;
  letter-spacing:3px;
  opacity:1;
  text-shadow:0 1px 12px rgba(0,0,0,.55);
}
.hero-wrap .owl-dots,
.hero-wrap .owl-nav{ z-index:6; }

/* ---------- 统一产品卡片高度：产品名称单行显示 ---------- */
.product-list .media1 .media-body h2,
.owl-carousel .item.media .media-body h2{
  height:66px;
  line-height:22px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  text-align:center;
}
.search-grid .s-card .s-body h3{
  height:45px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

/* ---------- 筛选区产品搜索入口（替换颜色筛选） ---------- */
.filter-search{
  display:flex;
  align-items:center;
  margin-top:4px;
}
.filter-search form{
  display:flex;
  gap:8px;
  width:100%;
  max-width:560px;
}
.filter-search input{
  flex:1;
  border:1px solid var(--line);
  border-radius:18px;
  padding:8px 16px;
  font-size:14px;
  outline:none;
  transition:border-color .2s ease;
}
.filter-search input:focus{ border-color:var(--brand); }
.filter-search select{
  border:1px solid var(--line);
  border-radius:18px;
  padding:8px 12px;
  font-size:14px;
  outline:none;
  background:#fff;
  color:var(--text);
  cursor:pointer;
}
.filter-search button{
  background:var(--brand);
  color:#fff;
  border:none;
  border-radius:18px;
  padding:8px 22px;
  cursor:pointer;
  font-size:14px;
  transition:background .2s ease;
}
.filter-search button:hover{ background:var(--brand-dark); }

/* ---------- 栏目页动态Banner：阿里店铺轮播风格 ---------- */
.hb-banner{ margin:0; overflow:hidden; }
.hb-banner .line,
.hb-banner .x12{ margin:0; padding:0; }
.hb-banner .slides .item img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.hb-banner .hero-caption{ pointer-events:none; }
.hb-banner .hero-caption{
  text-shadow:0 2px 14px rgba(0,0,0,.5);
}
.hb-banner .owl-nav .owl-prev,
.hb-banner .owl-nav .owl-next{
  opacity:.55;
  background:rgba(6,42,84,.55);
  border:1px solid rgba(255,255,255,.35);
}
.hb-banner.slides-arrow .owl-nav .owl-prev,
.hb-banner.slides-arrow .owl-nav .owl-next{ opacity:.65; }
.hb-banner .owl-nav .owl-prev{ left:18px; right:auto; }
.hb-banner .owl-nav .owl-next{ right:18px; left:auto; }
.hb-banner .owl-dots{
  position:absolute;
  left:0; right:0; bottom:18px; top:auto;
  width:100%;
  text-align:center;
  z-index:6;
}
.hb-banner .owl-dots .owl-dot span{
  background:rgba(255,255,255,.6);
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.hb-banner .owl-dots .owl-dot.active span{ background:#ff9600; }
.nav-en{ display:none; font-size:11px; font-weight:400; letter-spacing:0; opacity:.75; margin-left:3px; white-space:nowrap; }
.lang-en .nav-en{ display:inline; font-size:inherit; opacity:1; margin-left:4px; }
.lang-en .lang-zh{ display:none; }
.lang-inline{ margin-right:4px; }
.lang-inline a{ position:relative; z-index:2; display:inline-block; padding:9px 14px; background:transparent; color:var(--brand); border-radius:18px; font-size:19px; font-weight:700; line-height:1.2; }
.lang-inline a:hover{ color:var(--brand-dark); background:transparent; }
.lang-inline .lang-opt{ opacity:.5; }
.lang-inline .lang-opt.active{ opacity:1; }
.lang-inline em{ font-style:normal; opacity:.55; font-size:15px; }
.nav-inline{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; }
.nav-menu > li.nav-li-contact{ display:inline-flex; align-items:center; }
.search-inline{ display:inline-block; margin-left:10px; vertical-align:middle; }
#pc-header .search-inline .searchBar{ position:static; }
.search-inline a{ display:inline-block; color:var(--text); font-size:16px; }
.search-inline a:hover{ color:var(--brand); }
@media (max-width:767px){
  .hb-banner .slides .item img{ height:200px; object-fit:cover; }
  .hb-banner .owl-nav{ display:none; }
}