/**
 * header-v2.css —— 顶部信息条 + 头部（2026-10-23）
 *
 * 只改「导航条以上」（#top-bar 与 #header），#nav 及页面主体不动。
 *
 * ⚠️ Next 侧（codes/enogene-web）和 PHP 侧都用这一份，两端各引一次：
 *      PHP ：protected/config/themes_manager.php（common.css，排在 responsive.css 之后）
 *      Next：lib/site.ts 的 THEME_CSS（同一 uri + 同一 ver）
 *    改的时候两边版本号一起 bump，否则一端拿到新文件、另一端还在吃 7 天缓存。
 *
 * ⚠️ 全部用 `#wrap-inner #xxx` 双前缀。
 *    style.css / responsive.css 里 #header / #site-ad / #site-logo 都是单 id，
 *    本文件只要排在它们之后、再加一层 #wrap-inner，就不需要 !important。
 *    （唯一例外见 #site-ad 那条的说明。）
 */

/* ---------- 信息条 ---------- */
#wrap-inner #top-bar {
  height: auto;
  background: #fff;
  border-bottom: 1px solid #e6ebe6;
}

#wrap-inner #top-bar .t-inner {
  width: 100%;
  /* 跟随 responsive.css 的容器变量：宽屏下它被改成 1400，写死 1200 会让
     头部比下面的 banner / 三栏内缩 100px，一眼就看出来不齐。 */
  max-width: var(--eno-container);
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  height: 34px;
  line-height: 34px;
  color: #6f7b73;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#wrap-inner #top-bar .eno-slogan {
  font-size: 12px;
  color: #6f7b73;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#wrap-inner #top-bar .eno-slogan b {
  color: #1f2a22;
  font-weight: 600;
}

#wrap-inner #top-bar .eno-toplinks {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
}

/* 老表把 .t_p 定成 float:left + 850px，这里退回自然宽度 */
#wrap-inner #top-bar .t_p {
  float: none;
  display: block;
  width: auto;
  font-size: 12px;
}

#wrap-inner #top-bar .t_p p {
  float: none;
  margin: 0;
  font-size: 12px;
}

#wrap-inner #top-bar .t_p a,
#wrap-inner #top-bar .t_p a:hover {
  font-size: 12px;
}

/* 购物车：保留老表的 cart 小图标（背景图在 style.css 里，20px 宽） */
#wrap-inner #top-bar .shopping-cart {
  float: none;
  display: block;
  width: auto;
  padding-left: 21px;
  background-position: 0 50%;
  font-size: 12px;
  line-height: 34px;
}

#wrap-inner #top-bar .shopping-cart a {
  font-size: 12px;
}

/* ---------- 头部 ---------- */
#wrap-inner #header {
  width: 100%;
  max-width: var(--eno-container);
  height: auto;
  /* 92 = logo 原尺寸 241x60 + 上下各 16px 内边距。logo 不缩水，
     否则品牌识别被削弱（比原来的 115px 头还是矮了 23px） */
  min-height: 92px;
  margin: 0 auto;
  padding: 16px 20px;
  box-sizing: border-box;
  background: #fff;
  border-bottom: 1px solid #e6ebe6;
  display: flex;
  align-items: center;
  gap: 26px;
}

#wrap-inner #site-logo {
  float: none;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  margin: 0;
}

/* <a> 是行内盒时基线下方的 9px 也算高度，头部会莫名多出一截 */
#wrap-inner #site-logo a {
  display: block;
  line-height: 0;
}

#wrap-inner #site-logo img {
  /* logo 原图就是 241x60，按原尺寸显示，不做缩放 */
  width: 241px;
  height: auto;
  display: block;
}

#wrap-inner #site-ad {
  float: none;
  /* ⚠️ 必须带 !important：responsive.css 里是 `display:inline-block !important`，
     不加就压不住 —— 搜索框被压窄、CTA 掉到下一行。 */
  display: flex !important;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
  width: auto;
  height: auto;
  max-width: none;
  margin: 0;
}

/* 搜索框：替换掉老表那张 35px 高的 table 皮肤 */
#wrap-inner #site-ad .eno-hsearch {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  /* 不设上限：容器是 --eno-container（宽屏 1400），搜索框要一直撑到按钮前，
     中间不留空白。 */
  max-width: none;
  height: 44px;
  box-sizing: border-box;
  border: 1.5px solid #dfe6df;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}

#wrap-inner #site-ad .eno-hsearch:focus-within {
  border-color: #77a14d;
  box-shadow: 0 0 0 3px rgba(119, 161, 77, .14);
}

#wrap-inner #site-ad .st_searchinput {
  float: none;
  flex: 1 1 auto;
  width: 100%;
  height: 41px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: #1f2a22;
}

#wrap-inner #site-ad .st_searchinput::placeholder {
  color: #9aa69d;
  font-size: 13.5px;
}

#wrap-inner #site-ad .eno-hsearch-btn {
  flex: 0 0 auto;
  width: 52px;
  height: 100%;
  border: 0;
  padding: 0;
  background: #388d3b;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease;
}

#wrap-inner #site-ad .eno-hsearch-btn:hover {
  background: #2c7130;
}

/* 右侧两个 CTA */
#wrap-inner #site-ad .eno-hcta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex: 0 0 auto;
}

#wrap-inner #site-ad .eno-hbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 40px;
  padding: 0 18px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

#wrap-inner #site-ad .eno-hbtn-g {
  background: #fff;
  border: 1px solid #dfe6df;
  color: #3d4a40;
}

#wrap-inner #site-ad .eno-hbtn-g:hover {
  border-color: #77a14d;
  color: #388d3b;
}

#wrap-inner #site-ad .eno-hbtn-p {
  background: #388d3b;
  border: 1px solid #388d3b;
  color: #fff;
}

#wrap-inner #site-ad .eno-hbtn-p:hover {
  background: #2c7130;
  border-color: #2c7130;
  color: #fff;
}

/* ---------- 断点 ---------- */
/* 1024 以下先收掉幽灵按钮，把宽度让给搜索框 —— 搜索是主入口 */
@media (max-width: 1024px) {
  #wrap-inner #site-ad .eno-hcta .eno-hbtn-g {
    display: none;
  }
}

/* 768 以下：logo 居中，搜索与 CTA 各占一行（沿用 responsive.css 的折叠思路） */
@media (max-width: 768px) {
  #wrap-inner #top-bar .eno-slogan {
    display: none;
  }

  #wrap-inner #top-bar .t-inner {
    padding: 0 14px;
    justify-content: space-between;
  }

  #wrap-inner #header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    min-height: 0;
    padding: 12px 14px 14px;
  }

  #wrap-inner #site-logo {
    margin: 0 auto;
  }

  /* <a> 是行内盒时基线下方的 9px 也算高度，头部会莫名多出一截 */
#wrap-inner #site-logo a {
  display: block;
  line-height: 0;
}

#wrap-inner #site-logo img {
    width: 168px;
  }

  #wrap-inner #site-ad {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  #wrap-inner #site-ad .eno-hsearch {
    max-width: none;
    height: 42px;
  }

  #wrap-inner #site-ad .st_searchinput {
    height: 39px;
  }

  #wrap-inner #site-ad .eno-hcta {
    width: 100%;
    margin-left: 0;
    gap: 8px;
  }

  #wrap-inner #site-ad .eno-hcta .eno-hbtn-g {
    display: inline-flex;
  }

  #wrap-inner #site-ad .eno-hbtn {
    flex: 1 1 0;
    height: 38px;
    padding: 0 10px;
    font-size: 13px;
  }
}