/* ============================================================
   style-ie.css —— 由 style.css 自动生成(展开 CSS 变量)，供 IE 加载。
   源文件修改后请重跑: python tools/expand_css_ie.py
   请勿手工编辑本文件，改动会被覆盖。
   ============================================================ */
/* ============================================================
   禾邦电子元器件商城 - 前台样式
   主题：清透大气 × 青蓝紫渐变（清新简约 × 精致细节）
   主色：青 #0EA5E9 / 天青 #06B6D4 / 宝蓝 #3B82F6 / 靛 #6366F1 / 紫 #8B5CF6
        点缀：珊瑚橙 #F97316 / 琥珀金 #FBBF24 / 玫红 #F472B6
   ============================================================ */
:root {
    --navy: #1E3A8A;        /* 深蓝（页脚等深色块） */
    --indigo: #1D4ED8;      /* 宝蓝（标题文字） */
    --indigo2: #3B82F6;     /* 亮蓝 */
    --purple: #6366F1;      /* 靛紫 */
    --violet: #8B5CF6;      /* 紫罗兰 */
    --blue: #3B82F6;        /* 宝蓝 */
    --cyan: #06B6D4;        /* 青 */
    --sky: #0EA5E9;         /* 天青 */
    --teal: #14B8A6;        /* 青绿 */
    --orange: #F97316;      /* 珊瑚橙 */
    --pink: #F472B6;        /* 玫红 */
    --gold: #F59E0B;        /* 琥珀金 */
    --gold-light: #FBBF24;  /* 亮金 */
    --bg: #F4F8FB;          /* 页面浅底（清透蓝灰） */
    --card: #FFFFFF;
    --text: #000000;
    --text-sub: #64748B;
    --line: #E6ECF5;
    --price: #e4393c;       /* 价格红（商城惯例） */
    --shadow-sm: 0 1px 3px rgba(30,58,138,.06), 0 4px 14px rgba(59,130,246,.06);
    --shadow-md: 0 8px 20px rgba(30,58,138,.10), 0 16px 40px rgba(59,130,246,.12);
    --shadow-lg: 0 12px 32px rgba(30,58,138,.14), 0 28px 64px rgba(59,130,246,.16);
    --grad-brand: linear-gradient(90deg, #06B6D4, #3B82F6 55%, #6366F1);
    --grad-vivid: linear-gradient(135deg, #06B6D4, #3B82F6 50%, #8B5CF6);
    --grad-deep: linear-gradient(120deg, #0EA5E9 0%, #2563EB 55%, #4F46E5 100%);
    --grad-gold: linear-gradient(135deg, #FBBF24, #F97316);
    --grad-hot: linear-gradient(135deg, #F97316, #F472B6);
    --grad-sky: linear-gradient(135deg, #22D3EE, #3B82F6);
    --r-sm: 6px; --r-md: 12px; --r-lg: 16px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 14px/1.7 "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif; color: #000000; background: #F4F8FB; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; }
a { color: #000000; text-decoration: none; }
a:hover { color: #6366F1; }
ul, ol { list-style: none; }
img { border: 0; vertical-align: middle; }
.w1200 { width: 1200px; margin: 0 auto; }
.clearfix::after { content: ""; display: block; clear: both; }
button, input, select, textarea { font-family: inherit; outline: none; }
em.hl { font-style: normal; color: #e4393c; background: #fff2f2; padding: 0 2px; border-radius: 2px; }

/* 细节：滚动条 / 选中 / 表单聚焦光晕 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #A5C8F5, #7C9FE0); border-radius: 6px; border: 2px solid #F4F8FB; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #7C9FE0, #5B82C8); }
::-webkit-scrollbar-track { background: transparent; }
::selection { background: rgba(59,130,246,.18); color: #1D4ED8; }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px rgba(59,130,246,.14); }

/* ---------- 公告滚动条（清爽青蓝） ---------- */
.announce-bar { background: linear-gradient(90deg, #0EA5E9, #3B82F6); border-bottom: 1px solid rgba(255,255,255,.14); height: 34px; line-height: 34px; overflow: hidden; }
.announce-bar .announce-label { float: left; margin: 0 12px 0 0; background: linear-gradient(135deg, #FBBF24, #F97316); color: #fff; font-size: 12px; font-weight: bold; padding: 0 8px; height: 20px; line-height: 20px; margin-top: 7px; border-radius: 3px; }
.announce-scroll { overflow: hidden; height: 34px; }
.announce-text { display: inline-block; white-space: nowrap; color: #EAF4FF; padding-left: 100%; animation: announceMove 22s linear infinite; }
.announce-text::first-letter { color: #FBBF24; }
@keyframes announceMove { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* ---------- 顶部条（清透浅色） ---------- */
.topbar { background: linear-gradient(90deg, #F7FAFF, #EEF4FF); border-bottom: 1px solid #E6ECF5; font-size: 12px; color: #7B869E; height: 32px; line-height: 32px; }
.topbar-left { float: left; width:45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-right { float:right; }
.topbar-right a { margin-left: 10px; color: #5B6B84; transition: color .2s; }
.topbar-right a:hover { color: #3B82F6; }
.topbar-right a.hl-link { color: #3B82F6; font-weight: bold; }
.topbar-time { margin-left: 12px; color: #9AA8BF; }

/* ---------- 头部 ---------- */
.header { padding: 18px 0; background: #fff; box-shadow: 0 2px 12px rgba(30,58,138,.05); position: relative; z-index: 20; }
.logo { float: left; }
.search-box { float: left; margin: 8px 0 0 50px; width:450px; }
.search-box form { border: 2px solid transparent; background: linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg, #06B6D4, #3B82F6 55%, #6366F1) border-box; height: 42px; display: flex; border-radius: 22px; overflow: hidden; box-shadow: 0 2px 10px rgba(59,130,246,.15); transition: box-shadow .25s, transform .25s; }
.search-box form:focus-within { box-shadow: 0 0 0 4px rgba(59,130,246,.14), 0 6px 20px rgba(59,130,246,.22); transform: translateY(-1px); }
.search-box input[type=text] { flex: 1; border: 0; padding: 0 16px; font-size: 14px; }
.search-box button { width: 96px; border: 0; background: linear-gradient(90deg, #06B6D4, #3B82F6 55%, #6366F1); color: #fff; font-size: 16px; cursor: pointer; letter-spacing: 4px; transition: filter .25s; }
.search-box button:hover { filter: brightness(1.1); }
.hot-words { margin-top: 7px; font-size: 12px; color: #98A2B8; }
.hot-words a { margin-right: 10px; color: #7B869E; transition: color .2s; }
.hot-words a:hover { color: #F97316; }
.cart-entry { float: right; margin-top: 8px; background: linear-gradient(90deg, #06B6D4, #3B82F6 55%, #6366F1); color: #fff; padding: 0 24px; height: 46px; line-height: 46px; border-radius: 24px; font-size: 15px; position: relative; box-shadow: 0 4px 16px rgba(59,130,246,.35); transition: transform .25s, box-shadow .25s, filter .25s; }
.cart-entry:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(99,102,241,.4); filter: brightness(1.05); }
.cart-icon { margin-right: 6px; }
.cart-badge { display: inline-block; min-width: 20px; height: 20px; line-height: 20px; text-align: center; background: linear-gradient(135deg, #FBBF24, #F97316); color: #fff; border-radius: 10px; font-size: 12px; font-weight: bold; padding: 0 5px; margin-left: 4px; box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 0 2px 6px rgba(249,115,22,.45); }

/* ---------- 导航（精细简约：白底 + 圆角胶囊菜单项） ---------- */
.nav { background:#FFF;  height: 52px; position: relative; z-index: 500;   border-bottom: 2px solid #06F; box-shadow: 0 3px 12px rgba(30,58,138,.05);}
.nav .w1200 { position: relative; }
.nav-m-cats { display: none; }
.nav-list { display: flex; height: 50px;  }
.nav-list > li { position: relative; display: flex; align-items: center; }
.nav-list > li.abcd { align-items: flex-end; }
.nav-list > li.abcd > a {
    display: flex; align-items: center;
    color: #fff; font-size: 16px; font-weight: 600; letter-spacing: 1.5px;
    height: 45px; line-height: 50px; padding: 0 26px;
    margin: 0 4px;
    border-radius: 5px 5px 0px 0px; position: relative;
    background: linear-gradient(180deg, #22D3EE 0%, #3B82F6 55%, #4F46E5 100%);
    box-shadow: 0 0 10px rgba(34,211,238,.22);
	border:solid #999 1px;
}
.nav-list > li.abcd > a:hover {
    display: flex; align-items: center;
    color: #fff; font-size: 16px; font-weight: 600; letter-spacing: 1.5px;
    height: 45px; line-height: 50px; padding: 0 26px;
    margin: 0 4px;
    border-radius: 5px 5px 0px 0px;  position: relative;
    background: linear-gradient(180deg, #F59E0B 0%, #F97316 50%, #EF4444 100%);
    box-shadow: 0 0 10px rgba(249,115,22,.32);
}
.nav-list > li.on > a {
    display: flex;  align-items: bottom;
    color: #fff; font-size: 16px; font-weight: 600; letter-spacing: 1.5px;
    height: 50px; line-height: 50px; padding: 0px 26px 0px 26px;
    margin: 4px 8px 4px 4px;
    border-radius: 5px 5px 0px 0px;  position: relative;
    background: linear-gradient(180deg, #8B5CF6 0%, #6D28D9 60%, #4C1D95 100%);
    box-shadow: 0 0 10px rgba(139,92,246,.34);
}
.nav-list > li.abc { margin-left: 130px; margin-top: 7px; }
/* 产品展示分类下拉（三列布局，清爽白底 + 渐变顶线 + 大阴影） */
.nav .cat-dropdown {
    position: absolute; top: 62px; left: 0; width: 860px; max-width: calc(100vw - 24px);
    background: #fff; border: 1px solid #E6ECF5; border-top: 3px solid transparent; border-image: linear-gradient(90deg, #06B6D4, #3B82F6, #8B5CF6) 3;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 12px 32px rgba(30,58,138,.14), 0 28px 64px rgba(59,130,246,.16); display: none; padding: 14px 0 10px;
    column-count: 3; column-gap: 0;
}
.nav .nav-list > li:hover .cat-dropdown { display: block; animation: dropIn .18s ease; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cat-dropdown .cat-group { break-inside: avoid; padding: 6px 20px; }
.cat-dropdown .cat-group .cat-title {
    font-weight: bold; font-size: 14px; color: #1D4ED8;
    border-bottom: 1px dashed #E6ECF5; padding: 0 0 4px 8px; margin-bottom: 6px; position: relative;
}
.cat-dropdown .cat-group .cat-title::before { content: ""; position: absolute; left: 0; top: 4px; width: 3px; height: 14px; background: linear-gradient(90deg, #06B6D4, #3B82F6 55%, #6366F1); border-radius: 2px; }
.cat-dropdown .cat-group .cat-title:hover { color: #6366F1; }
.cat-dropdown .cat-links { display: flex; flex-wrap: wrap; }
.cat-dropdown .cat-links a { color: #5A6577; font-size: 12px; margin: 3px 18px 3px 0; line-height: 20px; transition: color .15s; }
.cat-dropdown .cat-links a:hover { color: #3B82F6; }
.cat-dropdown .cat-links a.cat-more { color: #F97316; font-weight: bold; }

/* ---------- 通用板块 ---------- */
.section { margin: 24px auto; }
.section-head { border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, #06B6D4, #3B82F6, #8B5CF6) 2; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; }
.section-head h3 { font-size: 20px; color: #1D4ED8; padding-left: 14px; border-left: 5px solid transparent; border-image: linear-gradient(180deg, #FBBF24, #F97316, #F472B6) 1; line-height: 1.2; letter-spacing: 1px; }
.section-head .more { font-size: 13px; color: #98A2B8; transition: color .2s; }
.section-head .more:hover { color: #F97316; }
.bread { background: #fff; border: 1px solid #E6ECF5; box-shadow: 0 1px 3px rgba(30,58,138,.06), 0 4px 14px rgba(59,130,246,.06); border-radius: 6px; padding: 9px 16px; font-size: 13px; color: #7B869E; margin-top: 16px; }
.bread a { color: #5A6577; }
.bread a:hover { color: #6366F1; }

/* ---------- 首页 banner（备用组件，清新渐变） ---------- */
.banner { position: relative; width: 100%; height: 300px; background: linear-gradient(105deg, #0EA5E9 0%, #2563EB 50%, #06B6D4 100%); overflow: hidden; color: #fff; }
.banner::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(244,114,182,.35), transparent 65%); top: -140px; right: -80px; }
.banner::after { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(251,191,36,.28), transparent 65%); bottom: -100px; left: 18%; }
.banner-inner { display: flex; height: 100%; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
.banner-text h2 { font-size: 40px; letter-spacing: 4px; margin-bottom: 14px; }
.banner-text h2 b { color: #FBBF24; }
.banner-text p { font-size: 17px; opacity: .95; margin-bottom: 6px; }
.banner-btns { margin-top: 24px; }
.banner-btns a { display: inline-block; padding: 10px 34px; border-radius: 24px; background: linear-gradient(135deg, #FBBF24, #F97316); color: #fff; font-weight: bold; margin-right: 14px; box-shadow: 0 6px 18px rgba(249,115,22,.4); transition: transform .2s, box-shadow .2s; }
.banner-btns a.blue { background: linear-gradient(90deg, #06B6D4, #3B82F6 55%, #6366F1); color: #fff; box-shadow: 0 6px 18px rgba(59,130,246,.4); }
.banner-btns a:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(249,115,22,.5); }
.banner-svg { width: 420px; }

/* ---------- 首页最新产品 ---------- */
.pd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pd-card { position: relative; border: 1px solid #E6ECF5; border-radius: 12px; padding: 14px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(30,58,138,.06), 0 4px 14px rgba(59,130,246,.06); transition: transform .25s, box-shadow .25s, border-color .25s; overflow: hidden; }
.pd-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #06B6D4, #3B82F6 55%, #6366F1); opacity: 0; transition: opacity .25s; }
.pd-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(30,58,138,.10), 0 16px 40px rgba(59,130,246,.12); border-color: #B9D3F7; }
.pd-card:hover::before { opacity: 1; }
.pd-card .pd-img { display: block; height: 140px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #F4F8FF, #EEFAFF); border-radius: 6px; margin-bottom: 10px; overflow: hidden; }
.pd-card .pd-img img { max-width: 100%; max-height: 130px; transition: transform .3s ease; }
.pd-card:hover .pd-img img { transform: scale(1.06); }
.pd-card .pd-name { font-size: 14px; font-weight: bold; height: 22px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pd-card .pd-name a:hover { color: #6366F1; }
.pd-card .pd-desc { font-size: 12px; color: #98A2B8; height: 36px; overflow: hidden; margin: 4px 0; line-height: 18px; }
.pd-card .pd-price { color: #e4393c; font-weight: bold; font-size: 15px; }

/* ---------- 首页公司简介 ---------- */
.about-home { display: flex; gap: 24px; background: linear-gradient(135deg, #F0F6FF, #EDF9FF); border: 1px solid #B9D3F7; border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(30,58,138,.06), 0 4px 14px rgba(59,130,246,.06); }
.about-home .about-img { width: 380px; flex-shrink: 0; border: 1px solid #D3E4FA; border-radius: 6px; overflow: hidden; }
.about-home .about-img img { width: 100%; display: block; }
.about-home h4 { font-size: 20px; color: #3B82F6; margin-bottom: 10px; letter-spacing: 1px; }
.about-home p { text-indent: 2em; color: #55607A; margin-bottom: 8px; }

/* ---------- 首页分类导航 ---------- */
.cat-nav { border: 1px solid #E6ECF5; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(30,58,138,.06), 0 4px 14px rgba(59,130,246,.06); overflow: hidden; }
.cat-nav-item { border-bottom: 1px dashed #DCE3F0; padding: 10px 16px; display: flex; transition: background .2s; }
.cat-nav-item:last-child { border-bottom: 0; }
.cat-nav-item:hover { background: linear-gradient(90deg, #F0F6FF, #F4F8FF); }
.cat-nav-item .cn-big { width: 220px; flex-shrink: 0; }
.cat-nav-item .cn-big a { font-size: 16px; font-weight: bold; color: #1D4ED8; }
.cat-nav-item .cn-big a:hover { color: #F97316; }
.cat-nav-item .cn-big .cn-links { margin-left: 12px; font-size: 12px; }
.cat-nav-item .cn-big .cn-links a { color: #3B82F6; font-weight: normal; margin-right: 6px; }
.cat-nav-item .cn-subs { flex: 1; }
.cat-nav-item .cn-subs a { display: inline-block; color: #5A6577; margin: 3px 10px 3px 0; font-size: 13px; transition: color .15s; }
.cat-nav-item .cn-subs a:hover { color: #6366F1; }

/* 产品分类地图（编号条 + 小类虚线方块流式，清爽 hover） */
.cat-map { background: #fff; border: 1px solid #E6ECF5; border-top: 0; border-radius: 0 0 12px 12px; padding: 12px; box-shadow: 0 1px 3px rgba(30,58,138,.06), 0 4px 14px rgba(59,130,246,.06); }
.cat-map-head { margin-top: 8px; background: linear-gradient(90deg, #F0F6FF, #F8FBFF); border-bottom: 1px dashed #C3D8F2; border-left: 4px solid #F59E0B; padding: 7px 10px; border-radius: 4px 4px 0 0; transition: border-left-color .2s, background .2s; }
.cat-map-head:first-child { margin-top: 0; }
.cat-map-head:hover { border-left-color: #6366F1; background: linear-gradient(90deg, #EDF4FF, #F5F8FF); }
.cat-map-head a { font-weight: bold; color: #1D4ED8; font-size: 14px; }
.cat-map-head a:hover { color: #6366F1; }
.cat-map-list { padding: 8px 2px 10px; overflow: hidden; }
.cat-map-item { float: left; width: 210px; margin: 3px; padding: 4px 6px; border: 1px dashed #D5DCEA; background: #FAFBFE; color: #3B82F6; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; border-radius: 4px; transition: all .2s; }
.cat-map-item:hover { color: #fff; border-color: transparent; background: linear-gradient(90deg, #06B6D4, #3B82F6 55%, #6366F1); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(59,130,246,.3); }

/* ---------- 知识列表 ---------- */
.news-list li { border-bottom: 1px dashed #DCE3F0; padding: 10px 0; display: flex; justify-content: space-between; }
.news-list li a { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
.news-list li a:hover { color: #6366F1; }
.news-list li .date { color: #98A2B8; font-size: 13px; margin-left: 16px; }

/* 合作品牌墙 */
.brand-wall { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
.brand-item { background: #fff; border: 1px solid #E6ECF5; border-radius: 6px; height: 76px;
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
    padding: 6px; text-align: center; box-shadow: 0 1px 3px rgba(30,58,138,.06), 0 4px 14px rgba(59,130,246,.06);
    transition: border-color .25s, box-shadow .25s, transform .25s, background .25s; }
.brand-item:hover { border-color: transparent; box-shadow: 0 8px 22px rgba(99,102,241,.25); transform: translateY(-3px); background: linear-gradient(135deg, #06B6D4, #3B82F6 50%, #8B5CF6); }
.brand-en { font-weight: bold; font-size: 15px; color: #1D4ED8; letter-spacing: .5px; max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: Arial, sans-serif; transition: color .25s; }
.brand-item:hover .brand-en { color: #fff; }
.brand-cn { font-size: 12px; color: #98A2B8; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .25s; }
.brand-item:hover .brand-cn { color: #F3F8FF; }
@media (max-width: 992px) { .brand-wall { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 产品列表页 ---------- */
.pl-wrap { display: flex; gap: 14px; margin-top: 14px; }
.pl-side { width: 250px; flex-shrink: 0; }
.pl-side-link { display: block; margin-bottom: 0; }
.pl-side-link a { display: block; background: linear-gradient(120deg, #0EA5E9 0%, #2563EB 55%, #4F46E5 100%); color: #fff; font-size: 15px; font-weight: bold; text-align: center; padding: 13px; border-radius: 12px 12px 0 0; letter-spacing: 2px; box-shadow: 0 4px 14px rgba(37,99,235,.25); transition: filter .2s; }
.pl-side-link a:hover { filter: brightness(1.1); }
/* 左侧分类树 */
.pl-cat-tree { border: 1px solid #B9D3F7; border-top: 0; border-radius: 0 0 12px 12px; background: #fff; box-shadow: 0 1px 3px rgba(30,58,138,.06), 0 4px 14px rgba(59,130,246,.06); overflow: hidden; }
.pl-cat-big { background: #F2F7FF; color: #1D4ED8; font-weight: bold; padding: 8px 10px; border-bottom: 1px dashed #09C; border-left: 3px solid transparent; font-size: 15px; cursor: pointer; position: relative; transition: background .2s, border-color .2s; }
.pl-cat-big::after { content: '▸'; position: absolute; right: 10px; color: #A9BFE8; transition: transform .2s, color .2s; }
.pl-cat-big.open::after { transform: rotate(90deg); }
.pl-cat-big:hover {  background: #EAF2FF; border-left-color: #F59E0B; }
.pl-cat-big a { color: #1D4ED8; text-decoration: none; }
.pl-cat-big a:hover { color: #6366F1; }
.pl-cat-big.active { background: #E6EFFF; border-left-color: #F59E0B; }
.pl-cat-subs { display: none; }
.pl-cat-subs.open { display: block; }
.pl-cat-sub { height: 36px; line-height: 26px; border-top: 1px dashed #F96; padding-left: 12px; font-size: 13px; padding-top: 8px; transition: background .15s; }
.pl-cat-sub:hover { background: #F2F7FF; }
.pl-cat-sub a {padding-left: 0px; color: #5A6577; font-size: 14px;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all .15s; }
.pl-cat-sub a:hover { color: #6366F1; background: #F0F6FF; font-weight: bold;}
.pl-cat-sub a.on { color: #6366F1; font-weight: bold; }

/* 右侧产品区 */
.pl-main { flex: 1; min-width: 0; }
.pl-main-head { background: linear-gradient(135deg, #22D3EE, #3B82F6); color: #fff; font-size: 15px; font-weight: bold; padding: 10px 20px; border-radius: 12px; letter-spacing: 2px; box-shadow: 0 4px 14px rgba(37,99,235,.22); }
/* 搜索页标题栏（与 .pl-main-head 同风格） */
.pl-title { background: linear-gradient(120deg, #0EA5E9 0%, #2563EB 55%, #4F46E5 100%); color: #fff; font-size: 15px; font-weight: bold; padding: 10px 20px; border-radius: 12px; letter-spacing: 2px; margin-bottom: 8px; box-shadow: 0 4px 14px rgba(37,99,235,.22); }
.pl-bread { background: #fff; padding: 9px 20px; color: #5A6577; font-size: 16px; border: 1px solid #E6ECF5; border-top: 0; border-radius: 0 0 6px 6px; box-shadow: 0 1px 3px rgba(30,58,138,.06), 0 4px 14px rgba(59,130,246,.06); font-weight:bold; }
.pl-bread a { color: #6366F1; }
.pl-filter { padding: 8px 20px; font-size: 13px; color: #7B869E; }
.pl-filter b { color: #e4393c; }

/* 产品卡片网格：白底圆角阴影，hover 上浮 + 渐变顶条 + 图片缩放 */
.pl-grid { padding: 10px 4px; display: flex; flex-wrap: wrap; }
.pl-card { position: relative; width: 280px; margin: 6px; float: none; display: flex; flex-direction: column; padding: 10px 10px 12px; border: 1px solid #E6ECF5; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(30,58,138,.06), 0 4px 14px rgba(59,130,246,.06); box-sizing: border-box; overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; }
.pl-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #06B6D4, #3B82F6 55%, #6366F1); opacity: 0; transition: opacity .25s; z-index: 2; }
.pl-card:hover {  border-color: #B9D3F7; box-shadow: 0 8px 20px rgba(30,58,138,.10), 0 16px 40px rgba(59,130,246,.12); }
.pl-card:hover::before { opacity: 1; }
.pl-card .pc-img { display: block; border: 1px solid #D3E4FA; border-radius: 6px; padding: 2px; background: linear-gradient(135deg, #F4F8FF, #EEFAFF); overflow: hidden; transition: border-color .25s; }
.pl-card .pc-img:hover { border: 1px dashed #F97316; }
.pl-card .pc-img img { width: 100%; height: 250px; object-fit: contain; transition: transform .35s ease; }
.pl-card:hover .pc-img img { transform: scale(1.05); }
.pl-card .pc-name { margin-top: 6px; font-size: 13px; color: #5A6577; }
.pl-card .pc-name a { color: #e4393c; font-weight: bold; transition: color .2s; }
.pl-card .pc-name a:hover { color: #F97316; }
.pl-card .pc-desc { font-size: 12px; color: #8A94A8; word-break: break-all; line-height: 1.5; margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* 卡片内紧凑阶梯价表格 */
.pl-card .pc-price { margin-top: 5px; }
.pl-card .pc-price .tier-table { margin: 0; width: 100%; table-layout: fixed; }
.pl-card .pc-price .tier-table th, .pl-card .pc-price .tier-table td { padding: 2px 0; font-size: 12px; word-break: break-all; height: 22px; }
.pl-card .pc-price .tier-table th { background: linear-gradient(90deg, #EDF5FF, #EAF8FF); color: #3B82F6; font-weight: bold; }
.pl-card .pc-price .tier-table th:first-child, .pl-card .pc-price .tier-table td:first-child { width: 64px; color: #8A94A8; font-weight: normal; background: #FAFBFE; }
.pl-card .pc-price .tier-table td { color: #e4393c; font-weight: bold; }
/* 链接行 + 底部购物车行 */
.pl-card .pc-links { margin-top: 6px; }
.pl-card .pc-links a { display: inline-block; font-size: 12px; color: #3B82F6; margin-right: 8px; transition: color .15s; }
.pl-card .pc-links a:hover { color: #F97316; text-decoration: underline; }
.pl-card .pc-cart { margin-top: auto; padding-top: 8px; border-top: 1px dashed #DCE3F0; display: flex; align-items: center; }
.pl-card .pc-cart .pc-cart-label { font-size: 12px; color: #7B869E; margin-right: 4px; flex-shrink: 0; }
.pl-card .pc-qty { display: inline-flex; flex-shrink: 0; }
.pl-card .pc-qty button { width: 22px; height: 24px; border: 1px solid #C9D8F2; background: #F2F7FF; cursor: pointer; font-size: 12px; line-height: 1; color: #1D4ED8; transition: background .15s, border-color .15s; }
.pl-card .pc-qty button:first-child { border-radius: 4px 0 0 4px; }
.pl-card .pc-qty button:last-child { border-radius: 0 4px 4px 0; }
.pl-card .pc-qty button:hover { background: #E2EDFF; border-color: #6366F1; }
.pl-card .pc-qty input { width: 40px; height: 24px; border: 1px solid #C9D8F2; border-left: 0; border-right: 0; text-align: center; font-size: 12px; box-sizing: border-box; color: #1D4ED8; font-weight: bold; }
.pl-card .pc-cart .btn-cart-sm { background: linear-gradient(90deg, #06B6D4, #3B82F6 55%, #6366F1); color: #fff; border: 0; padding: 4px 12px; border-radius: 12px; cursor: pointer; font-size: 12px; font-weight: bold; margin-left: 8px; white-space: nowrap; box-shadow: 0 3px 10px rgba(59,130,246,.3); transition: transform .2s, box-shadow .2s, filter .2s; }
.pl-card .pc-cart .btn-cart-sm:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 5px 14px rgba(99,102,241,.4); }

/* 阶梯价通用表 */
.tier-table { border-collapse: collapse; margin: 6px 0; }
.tier-table th, .tier-table td { border: 1px solid #E6ECF5; padding: 3px 14px; font-size: 13px; text-align: center; }
.tier-table th { background: linear-gradient(90deg, #EDF5FF, #EAF8FF); color: #3B82F6; font-weight: bold; }
.tier-table td { color: #e4393c; font-weight: bold; }
.btn-pdf { display: inline-block; margin-top: 8px; color: #3B82F6; font-size: 13px; }
.btn-pdf:hover { text-decoration: underline; color: #F97316; }
.btn-detail { display: inline-block; margin-bottom: 8px; padding: 6px 18px; border: 1px solid #3B82F6; border-radius: 18px; color: #3B82F6; font-size: 13px; transition: all .2s; }
.btn-detail:hover { background: linear-gradient(90deg, #06B6D4, #3B82F6 55%, #6366F1); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(59,130,246,.3); }

/* 分页（胶囊样式） */
.pager { margin: 22px 0; text-align: center; font-size: 13px; }
.pager a, .pager span { display: inline-block; padding: 6px 13px; margin: 0 3px; border: 1px solid #D5DFF2; color: #5A6577; border-radius: 16px; background: #fff; transition: all .2s; }
.pager a:hover { border-color: #6366F1; color: #6366F1; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(99,102,241,.16); }
.pager .cur { background: linear-gradient(90deg, #06B6D4, #3B82F6 55%, #6366F1); color: #fff; border-color: transparent; box-shadow: 0 3px 12px rgba(59,130,246,.35); }

/* ---------- 产品详情页 ---------- */
.dt-wrap { margin-top: 16px; }
.dt-head { display: flex; gap: 28px; }
.dt-img { width: 320px; height: 320px; border: 1px solid #E6ECF5; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #F4F8FF, #EEFAFF); box-shadow: 0 1px 3px rgba(30,58,138,.06), 0 4px 14px rgba(59,130,246,.06); flex-shrink: 0; margin-top: 10px; overflow: hidden; }
.dt-img img { max-width: 340px; max-height: 340px; transition: transform .3s; }
.dt-img:hover img { transform: scale(1.04); }
.dt-info { flex: 1; min-width: 0; }
.dt-info h1 { font-size: 22px; color: #1D4ED8; margin-bottom: 10px; letter-spacing: .5px; }
.dt-desc { color: #7B869E; font-size: 14px; margin: 8px 0 10px; line-height: 1.8; }
.dt-price-box { background: linear-gradient(135deg, #FFF8EC, #FFF5FB); border: 1px solid #F5C98A; border-radius: 12px; padding: 14px 18px; margin: 12px 0; box-shadow: 0 4px 16px rgba(249,115,22,.14); }
.dt-price-box table { width: 100%; border-collapse: collapse; }
.dt-price-box th, .dt-price-box td { padding: 5px 10px; text-align: center; font-size: 14px; }
.dt-price-box th { color: #9A6A1F; font-weight: bold; border-bottom: 1px dashed #EDD89A; }
.dt-price-box td.price { color: #e4393c; font-weight: bold; font-size: 18px; }
.dt-price-box td.qty-on { background: #FFF1D6; border-radius: 4px; }
.dt-buy { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.dt-buy .qty-input { display: inline-flex; }
.dt-buy .qty-input button { width: 32px; height: 38px; border: 1px solid #C9D8F2; background: #F2F7FF; cursor: pointer; font-size: 16px; color: #1D4ED8; transition: background .15s; }
.dt-buy .qty-input button:first-child { border-radius: 6px 0 0 6px; }
.dt-buy .qty-input button:last-child { border-radius: 0 6px 6px 0; }
.dt-buy .qty-input button:hover { background: #E2EDFF; }
.dt-buy .qty-input input { width: 80px; height: 38px; border: 1px solid #C9D8F2; border-left: 0; border-right: 0; text-align: center; font-size: 14px; color: #1D4ED8; font-weight: bold; }
.btn-lg { background: linear-gradient(90deg, #06B6D4, #3B82F6 55%, #6366F1); color: #fff; border: 0; padding: 10px 38px; font-size: 16px; border-radius: 22px; cursor: pointer; box-shadow: 0 5px 16px rgba(59,130,246,.35); transition: transform .2s, box-shadow .2s, filter .2s; }
.btn-lg:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(99,102,241,.42); }
.btn-lg.blue { background: linear-gradient(135deg, #FBBF24, #F97316); color: #fff; box-shadow: 0 5px 16px rgba(249,115,22,.4); }
.btn-lg.blue:hover { filter: brightness(1.08); box-shadow: 0 8px 22px rgba(249,115,22,.5); }
.dt-tabs { margin-top: 28px; }
.dt-tabs .tab-head { border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, #06B6D4, #3B82F6, #8B5CF6) 2; display: flex; gap: 6px; }
.dt-tabs .tab-head span { display: inline-block; padding: 9px 28px; font-size: 15px; color: #5A6577; cursor: pointer; border: 1px solid #E6ECF5; border-bottom: 0; margin-right: 6px; background: #F2F7FF; border-radius: 6px 6px 0 0; transition: all .2s; }
.dt-tabs .tab-head span:hover { background: #E2EDFF; color: #6366F1; }
.dt-tabs .tab-head span.on { background: linear-gradient(90deg, #06B6D4, #3B82F6 55%, #6366F1); color: #fff; border-color: transparent; font-weight: bold; box-shadow: 0 -3px 12px rgba(59,130,246,.2); }
.dt-tabs .tab-body { background: #fff; border: 1px solid #E6ECF5; border-top: 0; border-radius: 0 0 12px 12px; padding: 22px 26px; min-height: 120px; line-height: 2; box-shadow: 0 1px 3px rgba(30,58,138,.06), 0 4px 14px rgba(59,130,246,.06); }
.dt-params { width: 100%; border-collapse: collapse; }
.dt-params th, .dt-params td { border: 1px solid #E6ECF5; padding: 8px 14px; font-size: 13px; }
.dt-params th { background: linear-gradient(90deg, #EDF5FF, #EAF8FF); width: 160px; color: #3B82F6; font-weight: bold; }
.dt-related { margin-top: 28px; }
.dt-related .pd-grid { grid-template-columns: repeat(6, 1fr); }
.dt-related .pd-card .pd-img { height: 100px; }

/* ---------- 购物车 ---------- */
.cart-table { width: 100%; border-collapse: collapse; margin-top: 16px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(30,58,138,.06), 0 4px 14px rgba(59,130,246,.06); }
.cart-table th, .cart-table td { border: 1px solid #E6ECF5; padding: 10px 12px; text-align: center; font-size: 14px; }
.cart-table th { background: #F59E0B; color: #fff; font-weight: bold; letter-spacing: 1px; }
.cart-table .ct-prod { text-align: left; }
.cart-table .ct-prod .ct-img { float: left; width: 80px; height: 80px; border: 1px solid #E6ECF5; background: linear-gradient(135deg, #F4F8FF, #EEFAFF); margin-right: 12px; border-radius: 6px; overflow: hidden; }
.cart-table .ct-prod .ct-img img { width: 100%; height: 100%; object-fit: contain; }
.cart-table .ct-prod .ct-name { display: block; font-weight: bold; color: #1D4ED8; }
.cart-table .ct-prod .ct-name:hover { color: #6366F1; }
.cart-table .ct-prod .ct-desc { color: #98A2B8; font-size: 12px; margin: 4px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cart-table .ct-prod .ct-links a { color: #3B82F6; font-size: 12px; margin-right: 14px; }
.cart-table .ct-prod .ct-links a:hover { color: #F97316; text-decoration: underline; }
/* 阶梯价格迷你表 */
.tier-mini { width: 100%; border-collapse: collapse; }
.tier-mini tr { border: 0; }
.tier-mini td { border: 0 !important; padding: 3px 6px !important; font-size: 12px; color: #7B869E; text-align: left; background: transparent !important; }
.tier-mini tr.on td { color: #F97316; font-weight: bold; }
.tier-mini tr.on td:first-child::before { content: '✓ '; }
.cart-table .price { color: #e4393c; font-weight: bold; }
.cart-table .price.inquiry { color: #6B7280; font-weight: normal; }
/* 订单详情：产品描述（无快照列时来自产品表） */
.cart-table .od-desc { color: #5A6577; font-size: 13px; line-height: 1.7; word-break: break-all; }
.cart-table .od-na { color: #C0C8D4; }
/* 产品参数选项（阻值/容值等）：详情页淘宝式参数块、购物车/订单行参数标识、列表价格区间 */
.dt-opt-box { padding: 14px 18px; }
.dt-opt-row { display: flex; align-items: flex-start; }
.dt-opt-label { flex: 0 0 70px; line-height: 34px; color: #8A94A8; font-size: 13px; }
.dt-opt-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 10px; }
.opt-chip { padding: 7px 18px; border: 1px solid #E6ECF5; background: #fff; border-radius: 6px; cursor: pointer; font-size: 14px; color: #000000; transition: all .15s; }
.opt-chip:hover { border-color: #3B82F6; color: #3B82F6; }
.opt-chip.on { border-color: transparent; background: linear-gradient(90deg, #06B6D4, #3B82F6 55%, #6366F1); color: #fff; font-weight: bold; box-shadow: 0 2px 8px rgba(59,130,246,.3); }
.dt-opt-chips.opt-miss { animation: optShake .4s ease; }
@keyframes optShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.dt-opt-meta { margin-top: 12px; display: flex; align-items: baseline; flex-wrap: wrap; }
.dt-opt-price { color: #8A94A8; font-size: 13px; margin-right: 18px; }
.dt-opt-box .price { color: #e4393c; font-weight: bold; font-size: 18px; }
.dt-opt-range { font-size: 12px; color: #8A94A8; }
.ct-opt { margin: 4px 0; font-size: 13px; color: #5A6577; }
.ct-opt b { color: #1D4ED8; }
.od-opt { margin-top: 4px; font-size: 13px; color: #5A6577; }
.od-opt b { color: #1D4ED8; }
.opt-price-tag { display: inline-block; padding: 3px 10px; border-radius: 12px; background: #F2F7FF; color: #3B82F6; font-size: 12px; font-weight: bold; }
.pl-card .tier-range .price-range { color: #e4393c; font-weight: bold; font-size: 12px; }
.pl-card .tier-range .range-note { color: #98A2B8; font-size: 11px; font-weight: normal; }
.pl-card .btn-cart-link { display: inline-block; text-decoration: none; line-height: 20px; margin-left: 0; }
.cart-bar { display: flex; justify-content: space-between; align-items: center; margin: 16px 0; background: #fff; border: 1px solid #E6ECF5; border-radius: 12px; padding: 14px 20px; box-shadow: 0 1px 3px rgba(30,58,138,.06), 0 4px 14px rgba(59,130,246,.06); }
.cart-total { font-size: 16px; color: #5A6577; }
.cart-total b { color: #e4393c; font-size: 26px; }
.cart-actions a, .cart-actions button { margin-left: 10px; }
.btn-outline { border: 1px solid #3B82F6; color: #3B82F6; background: #fff; padding: 8px 24px; border-radius: 20px; cursor: pointer; font-size: 14px; transition: all .2s; }
.btn-outline:hover { background: linear-gradient(90deg, #06B6D4, #3B82F6 55%, #6366F1); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(59,130,246,.3); }
.btn-outline.blue { border-color: #F97316; color: #F97316; }
.btn-outline.blue:hover { background: linear-gradient(135deg, #FBBF24, #F97316); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(249,115,22,.35); }
.btn-outline.gold { border-color: #8B5CF6; color: #8B5CF6; }
.btn-outline.gold:hover { background: linear-gradient(135deg, #06B6D4, #3B82F6 50%, #8B5CF6); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(139,92,246,.35); }
.empty-box { text-align: center; padding: 60px 0; color: #98A2B8; }
.empty-box .icon { font-size: 50px; display: block; margin-bottom: 10px; }

/* ---------- 登录注册 ---------- */
.auth-wrap { display: flex; justify-content: center; margin: 30px 0; }
.auth-box { width: 400px; background: #fff; border: 1px solid #E6ECF5; border-radius: 16px; box-shadow: 0 8px 20px rgba(30,58,138,.10), 0 16px 40px rgba(59,130,246,.12); overflow: hidden; }
.auth-tabs { display: flex; border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, #06B6D4, #3B82F6, #8B5CF6) 2; background: linear-gradient(90deg, #F2F7FF, #F0FAFF); }
.auth-tabs span { flex: 1; text-align: center; padding: 13px 0; cursor: pointer; font-size: 15px; color: #7B869E; transition: all .2s; }
.auth-tabs span:hover { color: #6366F1; }
.auth-tabs span.on { background: linear-gradient(90deg, #06B6D4, #3B82F6 55%, #6366F1); color: #fff; font-weight: bold; }
.auth-body { padding: 26px 30px 30px; }
.auth-body .field { margin-bottom: 16px; }
.auth-body .field label { display: block; font-size: 13px; color: #7B869E; margin-bottom: 6px; }
.auth-body .field input { width: 100%; height: 40px; border: 1px solid #D5DFF2; border-radius: 6px; padding: 0 12px; font-size: 14px; transition: border-color .2s, box-shadow .2s; }
.auth-body .field input:focus { border-color: #6366F1; }
.auth-body .field .inline { display: flex; gap: 10px; }
.auth-body .field .inline input { flex: 1; }
.btn-sms { white-space: nowrap; border: 1px solid #3B82F6; background: #fff; color: #3B82F6; padding: 0 14px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all .2s; }
.btn-sms:hover { background: #EEF4FF; }
.btn-sms:disabled { border-color: #D5DFF2; color: #A7B2C8; cursor: not-allowed; background: #F6F8FC; }
.auth-body .btn-lg { width: 100%; }
.auth-tip { font-size: 12px; color: #98A2B8; margin-top: 10px; text-align: center; }
.sms-code-tip { font-size: 12px; color: #e4393c; margin-top: 6px; }
.wechat-panel { text-align: center; padding: 10px 0 20px; }
.wechat-panel .qr { width: 200px; height: 200px; margin: 0 auto 10px; border: 1px solid #E6ECF5; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: #fff; }
.wechat-panel .qr canvas, .wechat-panel .qr img { width: 180px; height: 180px; }
.wechat-panel p { font-size: 13px; color: #8A94A8; }
.wechat-panel .wx-status { margin-top: 10px; font-size: 14px; color: #6366F1; font-weight: bold; }

/* ---------- 会员中心 ---------- */
.member-head { display: flex; align-items: center; gap: 18px; background: linear-gradient(120deg, #0EA5E9 0%, #2563EB 55%, #4F46E5 100%); color: #fff; padding: 26px 32px; margin-top: 16px; border-radius: 12px; box-shadow: 0 6px 20px rgba(37,99,235,.25); position: relative; overflow: hidden; }
.member-head::after { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(244,114,182,.35), transparent 65%); right: -60px; top: -90px; }
.member-head::before { content: ""; position: absolute; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(34,211,238,.3), transparent 65%); left: 30%; bottom: -80px; }
.member-head .avatar { width: 66px; height: 66px; border-radius: 50%; background: linear-gradient(135deg, #FBBF24, #F97316); color: #fff; font-size: 28px; display: flex; align-items: center; justify-content: center; font-weight: bold; box-shadow: 0 4px 14px rgba(249,115,22,.4); position: relative; z-index: 2; }
.member-head h3 { font-size: 20px; position: relative; z-index: 2; }
.member-head p { font-size: 13px; opacity: .9; position: relative; z-index: 2; }
.member-stats { display: flex; gap: 14px; margin: 16px 0; }
.member-stats .ms-item { flex: 1; background: #fff; border: 1px solid #E6ECF5; border-radius: 12px; padding: 18px; text-align: center; box-shadow: 0 1px 3px rgba(30,58,138,.06), 0 4px 14px rgba(59,130,246,.06); transition: transform .2s, box-shadow .2s; }
.member-stats .ms-item:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(30,58,138,.10), 0 16px 40px rgba(59,130,246,.12); }
.member-stats .ms-item b { display: block; font-size: 28px; color: #3B82F6; }
.member-stats .ms-item span { font-size: 13px; color: #98A2B8; }
.order-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(30,58,138,.06), 0 4px 14px rgba(59,130,246,.06); }
.order-table th, .order-table td { border: 1px solid #E6ECF5; padding: 8px 12px; font-size: 13px; text-align: center; }
.order-table th { background: linear-gradient(90deg, #EDF5FF, #EAF8FF); color: #3B82F6; font-weight: bold; }
.order-status-0 { color: #e4393c; font-weight: bold; }
.order-status-1 { color: #10B981; font-weight: bold; }
.order-status-2 { color: #3B82F6; font-weight: bold; }
.order-status-3 { color: #98A2B8; }

/* ---------- 内容页（关于/联系/知识详情） ---------- */
.page-content { background: #fff; border: 1px solid #E6ECF5; border-radius: 12px; padding: 28px 34px; line-height: 2; box-shadow: 0 1px 3px rgba(30,58,138,.06), 0 4px 14px rgba(59,130,246,.06); }
.page-content h1 { font-size: 24px; color: #1D4ED8; text-align: center; margin-bottom: 10px; letter-spacing: 1px; }
.page-content .meta { text-align: center; color: #98A2B8; font-size: 13px; border-bottom: 1px dashed #DCE3F0; padding-bottom: 10px; margin-bottom: 18px; }
.page-content p { text-indent: 2em; margin-bottom: 12px; color: #4B5568; }
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 10px; }
.contact-item { border: 1px solid #B9D3F7; background: linear-gradient(135deg, #F0F6FF, #EDF9FF); border-radius: 12px; padding: 22px 26px; box-shadow: 0 1px 3px rgba(30,58,138,.06), 0 4px 14px rgba(59,130,246,.06); transition: transform .2s, box-shadow .2s; }
.contact-item:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(30,58,138,.10), 0 16px 40px rgba(59,130,246,.12); }
.contact-item h4 { color: #3B82F6; font-size: 17px; margin-bottom: 8px; }
.contact-item p { text-indent: 0; }
.contact-item p img{ height:175px; width:150px; margin-left:10px; margin-top:10px; }
.news-nav { display: flex; justify-content: space-between; border-top: 1px dashed #DCE3F0; margin-top: 20px; padding-top: 12px; font-size: 13px; }
.news-nav a { color: #6366F1; }
.news-nav a:hover { color: #F97316; }

/* ---------- 右侧悬浮工具栏 ---------- */
.float-bar { position: fixed; right: 0; top: 35%; z-index: 999; width: 66px; background: #fff; border: 1px solid #E6ECF5; border-left: 0; border-radius: 12px 0 0 12px; box-shadow: 0 8px 20px rgba(30,58,138,.10), 0 16px 40px rgba(59,130,246,.12); }
.float-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 66px; border-bottom: 1px solid #F0F3F9; color: #5A6577; font-size: 12px; transition: all .2s; }
.float-item:last-child { border-bottom: 0; }
.float-item:hover { background: linear-gradient(90deg, #06B6D4, #3B82F6 55%, #6366F1); color: #fff; }
.float-item .fi-icon { font-size: 20px; line-height: 1.2; }
.float-item .cart-badge { position: absolute; top: 6px; right: 8px; margin: 0; }
.float-dianhua { display: none; position: absolute; right: 74px; top: 0; width: 210px; padding: 6px; background: #fff; border: 1px solid #E6ECF5; border-radius: 6px; box-shadow: 0 8px 20px rgba(30,58,138,.10), 0 16px 40px rgba(59,130,246,.12); text-align: left; }
.float-item:hover .float-dianhua { display: block; }
.float-dianhua em { display: block; font-style: normal; font-size: 16px; color: #1D4ED8; font-weight: bold; height: 30px; }
.float-kefu { display: none; position: absolute; right: 74px; top: 0; width: 230px; padding: 6px; background: #fff; border: 1px solid #E6ECF5; border-radius: 6px; box-shadow: 0 8px 20px rgba(30,58,138,.10), 0 16px 40px rgba(59,130,246,.12); text-align: left; }
.float-item:hover .float-kefu { display: block; }
.float-kefu em { display: block; font-style: normal; font-size: 16px; color: #1D4ED8; font-weight: bold; height: 35px; }
.float-qr { display: none; position: absolute; right: 74px; top: 0; width: 210px; padding: 6px; background: #fff; border: 1px solid #E6ECF5; border-radius: 6px; box-shadow: 0 8px 20px rgba(30,58,138,.10), 0 16px 40px rgba(59,130,246,.12); text-align: center; }
.float-item:hover .float-qr { display: block; }
.float-qr em { display: block; font-style: normal; font-size: 12px; color: #98A2B8; }

/* ---------- 页脚（深蓝靛清新渐变 + 金色标题） ---------- */
.footer { background: linear-gradient(180deg, #1E3A8A, #312E81); color: #C7D2FE; margin-top: 40px; font-size: 13px; box-shadow: 0 -4px 24px rgba(30,58,138,.16); }
.footer-links { display: flex; padding: 34px 0 22px; }
.footer-col { flex: 1; }
.footer-col h4 { color: #FBBF24; font-size: 15px; margin-bottom: 12px; letter-spacing: 1px; position: relative; padding-bottom: 6px; }
.footer-col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px; background: linear-gradient(135deg, #FBBF24, #F97316); border-radius: 2px; }
.footer-col a { display: block; color: #C7D2FE; margin-bottom: 7px; transition: color .2s, padding-left .2s; }
.footer-col a:hover { color: #0EA5E9; padding-left: 4px; }
.footer-col p { margin-bottom: 7px; }
.footer-contact { flex: 1.4; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); text-align: center; padding: 16px 0; }
.footer-bottom p { margin: 3px 0; color: #93A7DC; }

/* toast 提示 */
#toast { position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%); background: linear-gradient(135deg, #0EA5E9, #4F46E5); color: #fff; padding: 13px 28px; border-radius: 24px; font-size: 15px; display: none; z-index: 9999; box-shadow: 0 10px 32px rgba(30,58,138,.35); }

/* ================================================
   首页布局（左侧分类树 + 右侧内容区）
   ================================================ */
.hm-mid { margin-top: 14px; }

/* ---- 左侧栏（分类树复用产品列表页 .pl-side-link / .pl-cat-* 样式） ---- */
.hm-left { float: left; width: 250px; }
.hm-latest-banner { display: block; margin-top: 12px; height: 46px; line-height: 46px; text-align: center; color: #fff; font-size: 16px; font-weight: bold; letter-spacing: 2px; background: linear-gradient(90deg, #06B6D4, #3B82F6 55%, #6366F1); border-radius: 12px; box-shadow: 0 5px 16px rgba(59,130,246,.3); transition: transform .2s, box-shadow .2s, filter .2s; }
.hm-latest-banner:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 8px 22px rgba(99,102,241,.4); }

/* ---- 右侧主区 ---- */
.hm-right { float: right; width: 930px; }

/* 关于禾邦 + 联系我们 */
.hm-ac-about { float: left; width: 645px; border: 1px solid #E6ECF5; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(30,58,138,.06), 0 4px 14px rgba(59,130,246,.06); overflow: hidden; }
.hm-ac-contact { float: right; width: 265px; border: 1px solid #E6ECF5; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(30,58,138,.06), 0 4px 14px rgba(59,130,246,.06); overflow: hidden; }
.hm-ac-bar { height: 40px; line-height: 40px; padding-left: 16px; color: #1D4ED8; font-weight: bold; font-size: 17px; border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, #06B6D4, #3B82F6, #8B5CF6) 2; background: linear-gradient(90deg, #F2F7FF, #fff); position: relative; letter-spacing: 1px; }
.hm-ac-bar::before { content: ""; position: absolute; left: 8px; top: 10px; width: 4px; height: 20px; background: linear-gradient(90deg, #06B6D4, #3B82F6 55%, #6366F1); border-radius: 2px; }
.hm-ac-body { padding: 12px 14px; }
.hm-ac-body img { float: left; width: 220px; height: 122px; object-fit: cover; margin: 4px 12px 4px 2px; border: 1px solid #E6ECF5; border-radius: 6px; padding: 2px; background: #fff; }
.hm-ac-body p { margin: 0 0 8px; font-size: 13px; line-height: 1.9; color: #55607A; }
.hm-ac-addr { font-size: 18px; font-weight: bold; color: #1D4ED8; }
.hm-contact-list { margin: 0; padding: 14px 0 14px 18px; }
.hm-contact-list li { height: 25px; line-height: 28px; font-size: 15px; color: #4B5568; list-style: none; font-weight: bold; transition: color .15s, padding-left .15s; }
.hm-contact-list li:hover { color: #6366F1; padding-left: 4px; }

/* 通栏服务条 → 元器件宣传横幅（青蓝紫渐变 + 元件插画 + CTA） */
.hm-strip {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 12px; height: 118px; padding: 0 30px 0 34px; border-radius: 16px;
    background: linear-gradient(105deg, #0EA5E9 0%, #2563EB 48%, #7C3AED 100%);
    color: #fff; position: relative; overflow: hidden; text-decoration: none;
    box-shadow: 0 8px 24px rgba(37,99,235,.28);
    transition: transform .25s, box-shadow .25s;
}
.hm-strip:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 14px 34px rgba(124,58,237,.32); }
.hm-strip .hs-svg { position: absolute; right: 0; top: 0; bottom: 0; width: 55%; pointer-events: none; opacity: .95; }
.hm-strip .hs-svg svg { width: 100%; height: 100%; }
.hm-strip .hs-text { position: relative; z-index: 2; max-width: 58%; }
.hm-strip .hs-text b { display: block; font-size: 26px; letter-spacing: 2px; text-shadow: 0 2px 12px rgba(2,6,23,.18); }
.hm-strip .hs-text span { display: block; margin-top: 8px; font-size: 14px; color: #DBEAFE; letter-spacing: 1px; }
.hm-strip .hs-btn {
    position: relative; z-index: 2; flex-shrink: 0;
    background: linear-gradient(135deg, #FBBF24, #F97316); color: #fff;
    font-size: 15px; font-weight: bold; padding: 12px 30px; border-radius: 26px;
    box-shadow: 0 6px 18px rgba(249,115,22,.45);
    transition: transform .2s, box-shadow .2s, filter .2s;
}
.hm-strip:hover .hs-btn { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(249,115,22,.55); filter: brightness(1.05); }

/* 标题条（产品展示等） */
.hm-sec-bar { margin-top: 14px; height: 42px; background: #fff; border: 1px solid #E6ECF5; border-radius: 12px; border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, #06B6D4, #3B82F6, #8B5CF6) 2; display: flex; align-items: center; box-shadow: 0 1px 3px rgba(30,58,138,.06), 0 4px 14px rgba(59,130,246,.06); }
.hm-sec-title { padding-left: 16px; font-size: 16px; font-weight: bold; color: #1D4ED8; letter-spacing: 2px; position: relative; }
.hm-sec-title::before { content: ""; position: absolute; left: 8px; top: 3px; width: 4px; height: 17px; background: linear-gradient(90deg, #06B6D4, #3B82F6 55%, #6366F1); border-radius: 2px; }
.hm-sec-more { margin-left: auto; margin-right: 12px; font-size: 13px; color: #3B82F6; transition: color .2s; }
.hm-sec-more:hover { color: #F97316; }

/* 产品展示区：27 大类块（编号标题 + 4 图 + 悬停小类面板） */
.hm-cpd { margin-top: 10px; }
.hm-cpd-item { position: relative; float: left; width: 455px; margin: 5px 0 5px 10px; background: #fff; border: 1px solid #E6ECF5; border-radius: 12px; box-shadow: 0 1px 3px rgba(30,58,138,.06), 0 4px 14px rgba(59,130,246,.06); overflow: visible; transition: transform .25s, box-shadow .25s; }
.hm-cpd-item:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(30,58,138,.10), 0 16px 40px rgba(59,130,246,.12); }
.hm-cpd-head { background: linear-gradient(90deg, #F2F7FF, #F8FBFF); border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, #06B6D4, #3B82F6) 2; padding: 6px 0 6px 14px; border-radius: 12px 12px 0 0; }
.hm-cpd-head .no { color: #F97316; font-weight: bold; margin-right: 2px; font-size: 15px; }
.hm-cpd-head a { color: #1D4ED8; font-weight: bold; font-size: 14px; letter-spacing: .5px; }
.hm-cpd-head a:hover { color: #6366F1; text-decoration: underline; }
.hm-cpd-imgs { display: flex; gap: 5px; padding: 8px 6px; background: #fff; }
.hm-cpd-imgs a { flex: 1; display: block; }
.hm-cpd-imgs img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid #D3E4FA; border-radius: 4px; padding: 2px; background: #fff; box-sizing: content-box; transition: border-color .2s, transform .2s; }
.hm-cpd-imgs a:hover img { border: 1px dashed #F97316; transform: scale(1.02); }
.hm-cpd-subs { display: none; position: absolute; left: 0; right: 0; top: 32px; z-index: 20; background: linear-gradient(135deg, rgba(14,116,230,.98), rgba(99,102,241,.98)); border-radius: 0 0 12px 12px; padding: 10px 12px; max-height: 260px; overflow-y: auto; box-shadow: 0 12px 32px rgba(37,99,235,.35); }
.hm-cpd-item:hover .hm-cpd-subs { display: block; animation: dropIn .18s ease; }
.hm-cpd-subs a { display: block; float: left; width: 48%; line-height: 27px; font-size: 12px; color: #EAF4FF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
.hm-cpd-subs a i { color: #FBBF24; font-style: normal; margin-right: 4px; }
.hm-cpd-subs a:hover { color: #FBBF24; }

/* 热卖产品标题条（全宽） */
.hm-hot-bar { margin-top: 14px; height: 38px; line-height: 36px; border: 1px solid #F3C9A8; background: linear-gradient(90deg, #FFF4EC, #FFF5FB); border-radius: 12px; border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, #F97316, #F472B6) 2; display: flex; align-items: center; box-shadow: 0 1px 3px rgba(30,58,138,.06), 0 4px 14px rgba(59,130,246,.06); }
.hm-hot-title { padding-left: 14px; font-size: 15px; font-weight: bold; color: #C2410C; letter-spacing: 1px; white-space: nowrap; }
.hm-hot-links { padding: 0 10px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-hot-links a { color: #3B82F6; }
.hm-hot-links a:hover { color: #F97316; text-decoration: underline; }
.hm-hot-links em { color: #E5B8A8; font-style: normal; margin: 0 5px; }

/* 热卖产品网格（推荐产品） */
.hm-remai { margin-top: 10px; }
.hm-cpa { position: relative; float: left; width: 225px; margin-left: 10px; margin-top: 10px; background: #fff; border: 1px solid #E6ECF5; border-radius: 12px; padding: 5px 5px 10px; box-shadow: 0 1px 3px rgba(30,58,138,.06), 0 4px 14px rgba(59,130,246,.06); overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; }
.hm-cpa::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(135deg, #F97316, #F472B6); opacity: 0; transition: opacity .25s; z-index: 2; }
.hm-cpa:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(30,58,138,.10), 0 16px 40px rgba(59,130,246,.12); border-color: #F5C4D6; }
.hm-cpa:hover::before { opacity: 1; }
.hm-cpa-img { position: relative; display: block; width: 213px; margin: 0 auto; overflow: hidden; border-radius: 6px; }
.hm-cpa-img img { width: 210px; height: 210px; object-fit: cover; border: 1px solid #D3E4FA; border-radius: 6px; padding: 2px; background: #fff; box-sizing: content-box; transition: transform .35s; }
.hm-cpa:hover .hm-cpa-img img { transform: scale(1.05); }
.hm-cpa-img:hover img { border: 1px dashed #F97316; }
.hm-cpa-re { position: absolute; left: -1px; top: -1px; width: 44px; height: 44px; line-height: 44px; text-align: center; color: #fff; font-size: 12px; font-weight: bold; background: linear-gradient(135deg, #F97316, #F472B6); border-radius: 0 0 12px 0; box-shadow: 0 3px 10px rgba(244,114,182,.35); z-index: 3; }
.hm-cpa-name { margin-top: 8px; width: 213px; margin-left: auto; margin-right: auto; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-cpa-name span { color: #8A94A8; }
.hm-cpa-name a { color: #e4393c; font-weight: bold; }
.hm-cpa-name a:hover { color: #F97316; text-decoration: underline; }
.hm-cpa-desc { width: 213px; margin: 2px auto 0; height: 34px; font-size: 12px; color: #8A94A8; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hm-cpa-desc span { color: #A7AEC8; }

/* 品牌展示 */
.hm-brands { margin-top: 16px; }
.hm-brands-title { height: 34px; line-height: 32px; padding-left: 16px; color: #1D4ED8; font-weight: bold; font-size: 15px; border: 1px solid #B9D3F7; border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, #06B6D4, #3B82F6, #8B5CF6) 2; background: #F2F7FF; border-radius: 12px 12px 0 0; position: relative; letter-spacing: 1px; }
.hm-brands-title::before { content: ""; position: absolute; left: 8px; top: 8px; width: 4px; height: 16px; background: linear-gradient(90deg, #06B6D4, #3B82F6 55%, #6366F1); border-radius: 2px; }
.hm-brands-row { padding: 10px 0 10px 8px; border-left: 1px solid #B9D3F7; border-right: 1px solid #B9D3F7; background: #fff; }
.hm-brands-row:last-of-type { border-bottom: 1px solid #B9D3F7; border-radius: 0 0 12px 12px; padding-bottom: 14px; }
.hm-brand-item { float: left; width: 133px; height: 46px; margin-left: 12px; border: 1px dashed #C9D8F2; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-direction: column; cursor: default; background: #fff; transition: all .25s; }
.hm-brand-item .en { font-size: 13px; font-weight: bold; color: #3B82F6; line-height: 1.3; transition: color .25s; }
.hm-brand-item .cn { font-size: 11px; color: #98A2B8; line-height: 1.3; transition: color .25s; }
.hm-brand-item:hover { background: linear-gradient(90deg, #06B6D4, #3B82F6 55%, #6366F1); border-color: transparent; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(59,130,246,.3); }
.hm-brand-item:hover .en, .hm-brand-item:hover .cn { color: #fff; }

/* 搜索关键词高亮 */
.kw-hl { color: #F97316; font-weight: bold; font-style: normal; background: rgba(249,115,22,.13); padding: 0 2px; border-radius: 2px; }

/* ===== 联系我们：微信二维码点击放大（灯箱） ===== */
.contact-item img.wx-qr { cursor: zoom-in; transition: transform .18s ease, box-shadow .18s ease; }
.contact-item img.wx-qr:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 8px 20px rgba(30,58,138,.25); }
.wx-lightbox {
    display: none;
    position: fixed;
    left: 0; top: 0; right: 0; bottom: 0;
    z-index: 9999;
    background: rgba(15,23,42,.72);
    cursor: zoom-out;
}
.wx-lightbox.on { display: block; }
.wx-lightbox-inner {
    position: absolute;
    left: 50%; top: 50%;
    width: 340px;
    margin: -230px 0 0 -186px;
    padding: 16px 16px 14px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
    text-align: center;
    cursor: default;
}
.wx-lightbox-inner img { display: block; width: 300px; height: 300px; margin: 0 auto; border: 1px solid #E6ECF5; border-radius: 10px; }
.wx-lightbox-cap { margin: 12px 0 4px; font-size: 15px; font-weight: bold; color: #1D4ED8; }
.wx-lightbox-tip { margin: 0; font-size: 12px; color: #94A3B8; }
.wx-lightbox-close {
    position: absolute; right: 8px; top: 6px;
    width: 26px; height: 26px; line-height: 24px;
    font-size: 20px; color: #94A3B8; text-align: center;
    cursor: pointer; border-radius: 50%;
}
.wx-lightbox-close:hover { color: #EF4444; background: #F1F5F9; }