/* 独立静态文件：与 /_next/static/css 分包解耦，Windows dev chunk 丢失时顶栏仍可读。
 * 重要：勿在此写 padding/max-width/margin 简写，否则该文件在 body 中晚于 Tailwind 加载，
 * 会覆盖 Navbar 上的 px-4/md:px-7 等，导致 Logo 与 Hero（仍用 Tailwind 水槽）左右对不齐。
 *
 * 下列规则与 `globals.css` 中同名选择器一致：chunk 丢失时避免
 * - 绿条搜索框占位符呈深色（误似「乱码/糊版」）
 * - Logo 呈浏览器默认紫链
 * - 原料筛选面板退回原生灰按钮 */

/**
 * 勿对 `html` 设 `overflow-x: hidden`：在 Chromium 系里会破坏 `position: sticky` 的滚动容器，
 * 顶栏会像「浮在正文上」并盖住首屏标题；横向溢出应靠版式约束解决，不靠裁切根节点。
 */
.dexin-app-header {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  background-color: #ffffff;
  /* 与 AppHeader 内联一致：必须高于 `ProductNavigatorPanel` 桌面遮罩 z-40，否则语言/导航点击被挡 */
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.dexin-navbar-chrome {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  background-color: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
  /* 与 Navbar.tsx 内联一致：须高于下方 `.dexin-search-subheader`（z-index:1） */
  z-index: 20;
}

/* 顶栏绿条：与 SearchSubHeader 内联一致；勿依赖 Tailwind `z-0`，否则 chunk 丢失时盖导航 */
.dexin-search-subheader {
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  width: 100%;
  flex-shrink: 0;
}

/* Logo（不在 .dexin-nav-primary 内，须单独兜底） */
.dexin-navbar-shell > a.dexin-navbar-logo {
  color: var(--dexin-search-bar, #5a8246);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
}

/* 顶栏产品搜索：占位符颜色必须写进真实 CSS，勿只靠 Tailwind placeholder 工具类 */
#dexin-global-product-search {
  box-sizing: border-box;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-family: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
}
#dexin-global-product-search::placeholder {
  color: rgba(255, 255, 255, 0.72);
  opacity: 1;
}
#dexin-global-product-search::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.72);
}
#dexin-global-product-search::-moz-placeholder {
  color: rgba(255, 255, 255, 0.72);
  opacity: 1;
}

/* 原料目录筛选浮层：Tailwind 未加载时的可读按钮与选中态（依赖 data-selected）
 * 勿对底栏工具条按钮设 width:100%，否则会各占一行变成「四行」崩版。 */
.dexin-product-navigator-root button[type='button']:not([data-products-navigator-fab]):not([data-filter-toolbar-action]) {
  box-sizing: border-box;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  margin-bottom: 0.45rem;
  width: 100%;
  cursor: pointer;
  text-align: left;
  border: 1px solid #c8d4c4;
  background: #ffffff;
  color: #374151;
}
.dexin-product-navigator-root button[type='button'][data-selected='true']:not([data-filter-toolbar-action]) {
  background: #e8efe9;
  border: 1px solid #b8c9b4;
  color: #4a6d58;
  font-weight: 500;
  box-shadow: inset 2px 0 0 0 #4a6d58;
}
.dexin-product-navigator-root [data-filter-toolbar] button[type='button'][data-filter-toolbar-action] {
  box-sizing: border-box;
  font-family: inherit;
  width: auto;
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  text-align: center;
}
.dexin-product-navigator-root [data-filter-toolbar] button[type='button'][data-filter-toolbar-action='reset'] {
  border: 1px solid #d4d4d4;
  background: #ffffff;
  color: #737373;
  font-weight: 500;
}
.dexin-product-navigator-root [data-filter-toolbar] button[type='button'][data-filter-toolbar-action='apply'] {
  border: 1px solid var(--dexin-brand, #4a6d58);
  background: var(--dexin-brand, #4a6d58);
  color: #ffffff;
}

.dexin-navbar-shell {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  background: #fff;
}

.dexin-nav-primary {
  display: none;
  flex: 1 1 12rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  min-width: 0;
  padding-top: 2px;
}

.dexin-nav-primary a,
.dexin-nav-primary button {
  color: var(--dexin-text-nav, #2a2824);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 6px 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}

.dexin-nav-burger {
  display: inline-flex;
  align-items: center;
  align-self: center;
}

.dexin-navbar-lang-slot {
  display: none;
}

.dexin-nav-mobile-drawer {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding: 16px;
}

@media (min-width: 1024px) {
  .dexin-nav-primary {
    display: flex;
  }

  .dexin-nav-burger {
    display: none;
  }

  .dexin-navbar-lang-slot {
    display: block;
  }

  .dexin-nav-mobile-drawer {
    display: none !important;
  }
}

/* 语言：原生 select（与 src/app/dexin-lang.css 一致要点） */
.dexin-lang-select-wrap {
  position: relative;
  z-index: 60;
  display: inline-block;
  vertical-align: middle;
}
.dexin-lang-select {
  box-sizing: border-box;
  min-height: 32px;
  min-width: 7.5rem;
  padding: 6px 28px 6px 10px;
  border: 1px solid #d4d4d4;
  border-radius: 2px;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #404040;
}