/* ==========================================================================
   Chip-Easy · Western Distributor Theme — theme-west.css
   对标 DigiKey / Mouser / RS Components / Richardson RFPD / Farnell 的专业
   元器件分销站设计语言。只改视觉，不改结构与内容。
   原则：扁平、克制、发丝线边框、单一品牌蓝、无渐变、无大圆角、
         卡片不悬浮，阴影只用于下拉/浮层。
   ========================================================================== */

:root {
  --ce-primary: #0B63CE;        /* 分销站专业蓝（接近 Mouser 系） */
  --ce-primary-hover: #084FA6;
  --ce-primary-soft: #EEF4FC;   /* 品牌蓝浅底，用于 hover/active 底 */
  --ce-navy: #12263A;           /* 深藏青：顶部条/导航/页脚 */
  --ce-navy-deep: #0B1B2B;
  --ce-ink: #1A2733;            /* 标题 */
  --ce-slate: #3D4A57;          /* 正文 */
  --ce-muted: #7A8794;          /* 次级 */
  --ce-border: #DCE3EA;         /* 发丝线 */
  --ce-soft: #F4F7FA;           /* 浅底区块 */
  --ce-r: 4px;                  /* 统一小圆角 */
}

/* ---------- 字体与基调 ---------- */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body, button, input, select, textarea {
  font-family: 'Helvetica Neue', Helvetica, Arial, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
}
body {
  color: var(--ce-slate) !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  background: #fff !important;
}
body.lang-ar { font-family: Tahoma, 'Segoe UI', Arial, sans-serif !important; }
h1, h2, h3, h4, h5 { color: var(--ce-ink) !important; }
a { color: var(--ce-primary); text-decoration: none; }
a:hover { color: var(--ce-primary-hover); text-decoration: underline; }

/* ---------- 顶部细条（DigiKey 式窄条） ---------- */
.top-bar .top-left .welcome { color: rgba(255, 255, 255, .68) !important; }
.top-bar {
  height: 32px !important;
  line-height: 32px !important;
  background: var(--ce-navy) !important;
  color: rgba(255, 255, 255, .68) !important;
  font-size: 12px !important;
  border-bottom: none !important;
}
.top-bar a { color: rgba(255, 255, 255, .68) !important; }
.top-bar a:hover { color: #fff !important; text-decoration: none !important; }
.top-bar .top-right .top-phone .phone-num { color: #fff !important; font-weight: 600; }
.top-bar .top-left .login-links a {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 3px;
  padding: 0 10px;
  margin-left: 6px;
  line-height: 20px;
  height: 20px;
  display: inline-block;
  font-size: 11.5px;
  transition: border-color .15s;
}
.top-bar .top-left .login-links a:hover { border-color: rgba(255, 255, 255, .7); }
.top-bar .lang-switch .lang-current { color: #fff !important; }
.top-bar .lang-dropdown {
  border-radius: 3px;
  border: 1px solid var(--ce-border) !important;
  box-shadow: 0 4px 14px rgba(10, 27, 43, .16);
  overflow: hidden;
}
.top-bar .lang-dropdown a { color: var(--ce-slate) !important; }
.top-bar .lang-dropdown a:hover, .top-bar .lang-dropdown a.active { color: var(--ce-primary) !important; background: var(--ce-primary-soft); }

/* ---------- 头部（Mouser 式：白底、方形搜索框、实心搜索键） ---------- */
.header-main { height: 120px !important; background: #fff !important; border-bottom: 1px solid var(--ce-border); }
.header-main .logo-area { height: 120px !important; }
.header-main .logo-area .logo-img-wrap img { max-height: 52px; width: auto; }
.header-main .search-area { top: 24px !important; }

.header-main .search-box { box-shadow: none !important; }
.header-main .search-box form { display: flex; }
.header-main .search-box .search-input {
  height: 42px !important;
  border: 1px solid #B9C4CF !important;
  border-right: none !important;
  border-radius: 3px 0 0 3px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  color: var(--ce-ink) !important;
  background: #fff !important;
  box-shadow: inset 0 1px 3px rgba(10, 27, 43, .05);
}
.header-main .search-box .search-input:focus { outline: none; border-color: var(--ce-primary) !important; box-shadow: inset 0 1px 3px rgba(10,27,43,.05), 0 0 0 2px rgba(11, 99, 206, .15) !important; }
.header-main .search-box .search-btn-submit {
  height: 42px !important;
  width: 96px !important;
  background: var(--ce-primary) !important;
  color: #fff !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  border-radius: 0 3px 3px 0 !important;
  padding: 0 28px !important;
}
.header-main .search-box .search-btn-submit:hover { background: var(--ce-primary-hover) !important; }
.header-main .search-box .search-btn-inquiry {
  height: 42px !important;
  width: auto !important;
  padding: 0 16px !important;
  background: #fff !important;
  color: var(--ce-primary) !important;
  border: 1px solid var(--ce-primary) !important;
  border-radius: 3px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 0 18px !important;
  margin-left: 10px;
}
.header-main .search-box .search-btn-inquiry:hover { background: var(--ce-primary-soft) !important; color: var(--ce-primary-hover) !important; }
.header-main .search-hot { margin-top: 7px !important; }
.header-main .search-hot .hot-label { color: var(--ce-muted) !important; font-size: 11.5px !important; text-transform: uppercase; letter-spacing: .5px; }
.header-main .search-hot a { color: var(--ce-slate) !important; font-size: 12px !important; }
.header-main .search-hot a:hover { color: var(--ce-primary) !important; }

/* ---------- 导航条（深藏青，扁平） ---------- */
.nav-bar { background: var(--ce-navy) !important; height: 46px !important; }
.nav-bar .nav-inner { height: 46px !important; }
.nav-bar .all-cat-btn {
  background: var(--ce-primary) !important;
  height: 46px !important;
  line-height: 46px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
.nav-bar .all-cat-btn:hover { filter: brightness(1.08); }
.nav-bar .nav-list li {
  height: 46px !important;
  line-height: 46px !important;
  padding: 0 22px !important;
}
.nav-bar .nav-list li a {
  display: block !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, .85) !important;
}
.nav-bar .nav-list li a:hover { color: #fff !important; text-decoration: none !important; }
.nav-bar .nav-list li:hover { background: rgba(255, 255, 255, .06); }
.nav-bar .nav-list li.active { background: rgba(255, 255, 255, .10); box-shadow: inset 0 -3px 0 var(--ce-primary); }
.nav-bar .nav-list li.active a { color: #fff !important; }

/* ---------- 左侧分类栏 ---------- */
.left-sidebar { border: none !important; }
.left-sidebar .cat-header {
  background: var(--ce-navy) !important;
  border-radius: 3px 3px 0 0;
  font-weight: 600;
  letter-spacing: .3px;
}
.left-sidebar .cat-menu-list {
  border: 1px solid var(--ce-border) !important;
  border-top: none !important;
  border-radius: 0 0 3px 3px;
  background: #fff;
}
.left-sidebar .cat-group-title .cat-group-name { color: var(--ce-ink) !important; font-weight: 600; font-size: 13px !important; }
.left-sidebar .cat-group-item { border-bottom: 1px solid #EDF1F5 !important; }
.left-sidebar .cat-group-item:hover { background: var(--ce-primary-soft) !important; }
.left-sidebar .cat-group-item:hover .cat-group-name { color: var(--ce-primary) !important; }
.cat-dropdown-panel .cat-col-title { color: var(--ce-ink) !important; font-weight: 600 !important; }
.cat-dropdown-panel .cat-col-items a { color: var(--ce-slate) !important; }
.cat-dropdown-panel .cat-col-items a:hover { color: var(--ce-primary) !important; }

/* ---------- Banner ---------- */
.banner-area { border-radius: 3px; overflow: hidden; border: 1px solid var(--ce-border); }
.banner-area .banner-arrow { background: rgba(10, 27, 43, .35); border-radius: 2px; }
.banner-dots span { border-radius: 1px !important; }
.banner-dots span.active { background: var(--ce-primary) !important; width: 20px !important; }

/* ---------- 区块标题（RS 式：竖线 + 深色标题 + 大写灰标） ---------- */
.rfz-section-title h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--ce-ink) !important;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.rfz-section-title h2::before {
  content: '';
  width: 4px;
  height: 17px;
  background: var(--ce-primary);
}
.rfz-section-en, .rfz-section-sub {
  color: var(--ce-muted) !important;
  font-size: 11.5px !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-left: 2px;
}
.rfz-more-btn {
  color: var(--ce-primary) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  border-radius: 3px;
}
.rfz-more-btn::after { content: ' ›'; font-size: 15px; line-height: 1; }
.rfz-more-btn:hover { background: transparent !important; text-decoration: underline !important; }

/* ---------- 产品卡片（扁平发丝线，hover 只变色，不悬浮） ---------- */
.rfz-adv-card, .rfz-prod-card {
  background: #fff !important;
  border: 1px solid var(--ce-border) !important;
  border-radius: var(--ce-r) !important;
  box-shadow: none !important;
  transition: border-color .15s !important;
  overflow: hidden;
}
.rfz-adv-card:hover, .rfz-prod-card:hover { border-color: var(--ce-primary) !important; transform: none !important; box-shadow: none !important; }
.rfz-prod-model a, .rfz-adv-card-name, .rfz-adv-card-name a {
  color: var(--ce-ink) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}
.rfz-prod-model a:hover { color: var(--ce-primary) !important; }
.rfz-prod-brand { color: var(--ce-muted) !important; font-size: 11.5px !important; }
.rfz-prod-price, .rfz-adv-card-price { color: var(--ce-primary) !important; font-weight: 700 !important; font-size: 14.5px !important; }
.rfz-prod-tag { border-radius: 2px !important; font-weight: 600 !important; font-size: 10.5px !important; letter-spacing: .4px; }
.rfz-tag-own { background: var(--ce-primary) !important; }
.rfz-tag-new { background: #12805C !important; }

/* 品牌 tab：方形小芯片 */
.rfz-adv-tab-item {
  border-radius: 3px !important;
  color: var(--ce-slate) !important;
  font-weight: 500 !important;
  border: 1px solid transparent;
}
.rfz-adv-tab-item:hover { color: var(--ce-primary) !important; background: var(--ce-primary-soft); }
.rfz-adv-tab-item.active { background: var(--ce-primary) !important; color: #fff !important; border-color: var(--ce-primary) !important; }

/* 品牌墙 */
.rfz-brand-item {
  background: #fff !important;
  border: 1px solid var(--ce-border) !important;
  border-radius: var(--ce-r) !important;
  box-shadow: none !important;
  transition: border-color .15s !important;
}
.rfz-brand-item:hover { border-color: var(--ce-primary) !important; transform: none !important; box-shadow: none !important; }
.rfz-brand-name { color: var(--ce-slate) !important; font-weight: 500; }

/* 右侧登录/服务/目录卡 */
.rfz-login-box, .rfz-service-box, .rfz-catalog-box {
  border: 1px solid var(--ce-border) !important;
  border-radius: var(--ce-r) !important;
  box-shadow: none !important;
  background: #fff !important;
}
.rfz-btn-login {
  background: var(--ce-primary) !important;
  border-radius: 3px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
.rfz-btn-login:hover { background: var(--ce-primary-hover) !important; }
.rfz-btn-register {
  border: 1px solid #B9C4CF !important;
  color: var(--ce-slate) !important;
  background: #fff !important;
  border-radius: 3px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
.rfz-btn-register:hover { border-color: var(--ce-primary) !important; color: var(--ce-primary) !important; background: var(--ce-primary-soft) !important; }
.rfz-service-phone { color: var(--ce-primary) !important; font-weight: 700 !important; font-size: 16px !important; }
.rfz-catalog-title { color: var(--ce-ink) !important; font-weight: 700 !important; border-bottom: 1px solid var(--ce-border) !important; }

/* ---------- 列表页 PLP ---------- */
.plp-filter-btn {
  border-radius: 3px !important;
  border: 1px solid var(--ce-border) !important;
  color: var(--ce-slate) !important;
  background: #fff !important;
}
.plp-filter-btn:hover { border-color: var(--ce-primary) !important; color: var(--ce-primary) !important; }
.plp-filter-btn.active { background: var(--ce-primary) !important; border-color: var(--ce-primary) !important; color: #fff !important; }
.plp-card {
  background: #fff !important;
  border: 1px solid var(--ce-border) !important;
  border-radius: var(--ce-r) !important;
  box-shadow: none !important;
  transition: border-color .15s !important;
}
.plp-card:hover { border-color: var(--ce-primary) !important; transform: none !important; box-shadow: none !important; }
.plp-card-price { color: var(--ce-primary) !important; font-weight: 700 !important; }
.plp-search-btn { background: var(--ce-primary) !important; border-radius: 0 3px 3px 0 !important; font-weight: 600; }
.page-btn {
  border: 1px solid var(--ce-border) !important;
  border-radius: 3px !important;
  color: var(--ce-slate) !important;
  background: #fff !important;
}
.page-btn:hover { border-color: var(--ce-primary) !important; color: var(--ce-primary) !important; }
.page-btn.active { background: var(--ce-primary) !important; border-color: var(--ce-primary) !important; color: #fff !important; }

/* ---------- 详情页 PDP ---------- */
.pdp-breadcrumb, .plp-breadcrumb { color: var(--ce-muted) !important; font-size: 12px !important; }
.pdp-breadcrumb a, .plp-breadcrumb a { color: var(--ce-slate) !important; }
.pdp-breadcrumb a:hover, .plp-breadcrumb a:hover { color: var(--ce-primary) !important; }
.pdp-price-value { color: var(--ce-primary) !important; font-weight: 700 !important; }
.pdp-price-note { color: var(--ce-muted) !important; font-size: 11.5px !important; }
.btn-inquiry, .btn-sample { border-radius: 3px !important; font-weight: 600 !important; }
.btn-inquiry { background: var(--ce-primary) !important; }
.btn-inquiry:hover { background: var(--ce-primary-hover) !important; box-shadow: none !important; }
.btn-inquiry, .btn-inquiry a, .btn-inquiry span { color: #fff !important; }
.btn-sample {
  background: #fff !important;
  border: 1px solid #B9C4CF !important;
  color: var(--ce-slate) !important;
}
.btn-sample:hover { border-color: var(--ce-primary) !important; color: var(--ce-primary) !important; }
.btn-sample, .btn-sample a, .btn-sample span { color: inherit !important; }

/* 详情页左侧栏目标题（原为青色，统一深藏青） */
.pdp-left-title { background: var(--ce-navy) !important; color: #fff !important; }
.btn-datasheet {
  border: 1px solid #B9C4CF !important;
  color: var(--ce-slate) !important;
  background: #fff !important;
  border-radius: 3px !important;
  font-weight: 600 !important;
}
.btn-datasheet:hover { border-color: var(--ce-primary) !important; color: var(--ce-primary) !important; }
.btn-datasheet.btn-disabled { color: var(--ce-muted) !important; background: var(--ce-soft) !important; }

/* ---------- 面包屑通用 ---------- */
.breadcrumb { color: var(--ce-muted) !important; font-size: 12px !important; }
.breadcrumb a { color: var(--ce-slate) !important; }
.breadcrumb a:hover { color: var(--ce-primary) !important; }

/* ---------- 页脚 ---------- */
.footer-service { background: var(--ce-soft) !important; border-top: 1px solid var(--ce-border) !important; border-bottom: 1px solid var(--ce-border) !important; padding: 22px 0 !important; }
.footer-service .fs-title { color: var(--ce-ink) !important; font-size: 14.5px !important; }
.footer-links { background: var(--ce-navy) !important; border-top: none !important; padding: 34px 0 28px !important; }
.footer-links .fl-col h4 { color: #fff !important; font-size: 13.5px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 12px !important; }
.footer-links .fl-col ul li { height: 26px !important; line-height: 26px !important; }
.footer-links .fl-col ul li a { color: rgba(255, 255, 255, .62) !important; font-size: 12.5px !important; }
.footer-links .fl-col ul li a:hover { color: #fff !important; }
.footer-links .fl-col p { color: rgba(255, 255, 255, .62) !important; }
.copyright { background: var(--ce-navy-deep) !important; color: rgba(255, 255, 255, .55) !important; padding: 16px 0 !important; }
.copyright a { color: rgba(255, 255, 255, .75) !important; }
.copyright a:hover { color: #fff !important; text-decoration: underline !important; }

/* ---------- FAQ ---------- */
.home-faq h2 { display: flex; align-items: center; gap: 9px; font-size: 18px !important; }
.home-faq h2::before { content: ''; width: 4px; height: 15px; background: var(--ce-primary); }
.home-faq [style*="background:#f8fafc"] {
  background: var(--ce-soft) !important;
  border: 1px solid var(--ce-border) !important;
  border-radius: var(--ce-r) !important;
}

/* ---------- 悬浮工具条 ---------- */
.ce-chat-head { background: var(--ce-primary) !important; }

/* ---------- 表单聚焦 ---------- */
input[type="text"]:focus, input[type="email"]:focus, textarea:focus { border-color: var(--ce-primary) !important; }

/* ---------- 残留旧配色清理（PLP 卡片 hover 橙色） ---------- */
.plp-product-card:hover { border-color: var(--ce-primary) !important; box-shadow: none !important; }

/* ==========================================================================
   移动端适配（≤768px）—— 堆叠式布局
   ========================================================================== */
@media (max-width: 768px) {
  /* 全局防横向溢出 */
  body { overflow-x: hidden !important; }

  /* 主容器全宽 */
  .w1200 { width: 100% !important; padding: 0 12px; box-sizing: border-box; }
  .index-main, .rfz-advantage-section, .rfz-product-section, .rfz-brand-section,
  .rfz-news-section, .plp-container, .pdp-container, .brand-page-full .plp-container,
  .home-faq { width: 100% !important; padding-left: 12px; padding-right: 12px; box-sizing: border-box; }

  /* 顶条精简 */
  .top-bar { height: auto !important; min-height: 32px; }
  .top-bar .w1200 { display: flex; justify-content: space-between; align-items: center; }
  .top-bar .top-left .welcome, .top-bar .top-phone { display: none !important; }

  /* 头部：logo 在上，搜索框通栏在下 */
  .header-main { height: auto !important; padding: 10px 12px 12px; }
  .header-main .w1200 { display: flex; flex-direction: column; }
  .header-main .logo-area { position: static !important; height: auto !important; }
  .header-main .logo-area .logo-img-wrap img { max-height: 40px; }
  .header-main .search-area { position: static !important; transform: none !important; width: 100% !important; margin-top: 10px; }
  .header-main .search-box { width: 100% !important; }
  .header-main .search-box .search-input { height: 40px !important; }
  .header-main .search-box .search-btn-submit { height: 40px !important; width: 74px !important; padding: 0 12px !important; }
  .header-main .search-box .search-btn-inquiry { height: 40px !important; padding: 0 12px !important; margin-left: 8px; }
  .header-main .search-hot { display: none !important; }

  /* 导航：横向滑动 */
  .nav-bar { height: auto !important; }
  .nav-bar .nav-inner { display: flex; align-items: stretch; height: auto !important; }
  .nav-bar .all-cat-btn { width: auto !important; flex: none; padding: 0 14px; height: 44px !important; line-height: 44px !important; }
  .nav-bar .nav-list { float: none !important; flex: 1; display: flex; overflow-x: auto; margin-left: 0 !important; height: 44px !important; -webkit-overflow-scrolling: touch; }
  .nav-bar .nav-list::-webkit-scrollbar { display: none; }
  .nav-bar .nav-list li { flex: none; height: 44px !important; line-height: 44px !important; padding: 0 14px !important; }

  /* 首页三栏纵向堆叠 */
  .index-main { display: flex; flex-direction: column; }
  .left-sidebar { flex: none !important; width: 100% !important; min-width: 0 !important; }
  .left-sidebar .cat-header { width: 100% !important; }
  .left-sidebar .cat-menu-list { max-height: 300px; overflow-y: auto; }
  .cat-dropdown-panel { display: none !important; }
  .banner-area { margin: 10px 0 0 !important; min-height: 0 !important; width: 100% !important; aspect-ratio: 16 / 10; }
  .banner-slide, .slide-item { height: 100%; }
  .right-sidebar { display: none !important; }

  /* 隐藏竖版广告，产品网格两列/三列 */
  .rfz-adv-left-ad, .rfz-prod-left-ad { display: none !important; }
  .rfz-adv-body, .rfz-adv-tab-content.active { display: flex; flex-wrap: wrap; }
  .rfz-adv-grid { flex: 1 1 100%; min-width: 0; }
  .rfz-adv-grid-inner { display: flex !important; flex-wrap: wrap; height: auto !important; width: 100% !important; }
  .rfz-adv-card { width: 33.33% !important; height: auto !important; min-height: 110px; box-sizing: border-box; float: none; }
  .rfz-prod-right-grid { width: 100% !important; float: none !important; display: flex; flex-wrap: wrap; }
  .rfz-prod-card { width: 50% !important; height: auto !important; min-height: 180px; box-sizing: border-box; float: none; }
  .rfz-section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .rfz-adv-tabs { width: 100%; order: 3; margin-top: 4px; }
  .rfz-adv-tabs-inner { overflow-x: auto; white-space: nowrap; display: flex; padding-bottom: 4px; }
  .rfz-more-btn { margin-left: auto; }
  .rfz-brand-wall { display: flex; flex-wrap: wrap; }
  .rfz-brand-item { width: 33.33% !important; box-sizing: border-box; }
  .home-seo-h1 { font-size: 18px !important; margin-top: 18px !important; }

  /* 列表页 */
  .plp-main { flex-direction: column; }
  .plp-right-col { width: 100% !important; }
  .plp-product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .plp-card-img { height: 130px !important; }

  /* 详情页 */
  .pdp-container { flex-direction: column; }
  .pdp-main { flex-direction: column; gap: 16px; }
  .pdp-gallery { width: 100% !important; }
  .pdp-main-img { min-height: 240px !important; }
  .pdp-left { width: 100% !important; }
  .pdp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .pdp-actions .btn-inquiry, .pdp-actions .btn-datasheet, .pdp-actions .btn-sample { flex: 1; min-width: 110px; text-align: center; }

  /* 页脚 */
  .footer-service .fs-item { width: 100%; justify-content: flex-start; padding: 6px 12px; box-sizing: border-box; }
  .footer-links .fl-col { width: 50% !important; padding-right: 12px !important; }
}

/* ---------- 移动端补充修复（第二轮） ---------- */
@media (max-width: 768px) {
  /* header-main 100% 宽 + padding 导致横向溢出，补 box-sizing */
  .header-main { box-sizing: border-box; }
  .header-main .search-area { box-sizing: border-box; }
  .header-main .search-box form { width: 100%; }
  .header-main .search-box .search-input { min-width: 0; }

  /* 产品索引页（/products）容器 */
  .container, .product-row { width: 100% !important; box-sizing: border-box; padding-left: 12px; padding-right: 12px; }
  .product-row { display: flex; flex-direction: column; }
  .col-left, .col-right { width: 100% !important; float: none !important; }
  .product-list, .cat-col { display: flex; flex-wrap: wrap; }
  .cat-item { width: 50% !important; box-sizing: border-box; }
}