/* ============================================================
   components.css — 公共组件库（Task 3 · Direction D）
   全部包在 @layer components；颜色全走 var(--*)，0 处硬编码 hex。
   rgba() tint 仅用于 badge 半透明底（基于语义色十进制写法，
   不含 # 前缀，grep 不会命中，见 task-3-report.md 说明）。
   ============================================================ */

@layer components {

  /* ================================================================
     1. 按钮族
     ================================================================ */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font: inherit;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: var(--transition-base);
    text-decoration: none;
    line-height: 1;
  }

  .btn--primary { background: var(--color-primary); color: var(--color-text-white); }
  .btn--primary:hover { background: var(--color-primary-dark); color: var(--color-text-white); }

  .btn--cta { background: var(--color-accent); color: var(--color-text-white); }
  .btn--cta:hover { background: var(--color-accent-dark); color: var(--color-text-white); }

  .btn--ghost {
    background: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
  .btn--ghost:hover { background: var(--color-primary); color: var(--color-text-white); }

  .btn--sm { padding: 6px 12px; font-size: var(--font-size-xs); }
  .btn--lg { padding: 13px 26px; font-size: var(--font-size-md); }
  .btn--block { display: flex; width: 100%; }


  /* ================================================================
     2. 分区标题（左色条）
     ================================================================ */
  .section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
  }

  .section-head__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-strong);
  }
  /* 伪元素色条（无额外标签的写法） */
  .section-head__title::before {
    content: "";
    width: 4px;
    height: 20px;
    border-radius: 2px;
    background: var(--color-primary);
    flex-shrink: 0;
  }
  .section-head--cta .section-head__title::before { background: var(--color-accent); }

  /* 标题下的一句说明（可选，$shDesc）；与左色条对齐，缩进 = 色条 4px + gap 10px */
  .section-head__main { min-width: 0; }
  .section-head__desc {
    margin: var(--space-xs) 0 0 14px;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: var(--color-text-muted);
  }

  .section-head__more {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    transition: var(--transition-fast);
    /* 标题一长（手机端折两行）就会把它挤成"More / ›"上下两行（2026-09-18 快捷入口问句标题实测），钉死不换行不收缩 */
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: var(--space-sm);
  }
  .section-head__more:hover { color: var(--color-primary-dark); }


  /* ================================================================
     3. 通用卡片
     ================================================================ */
  .card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }
  .card__body { padding: var(--space-md); }


  /* ================================================================
     4. 产品卡
     ================================================================ */
  .product-card {
    display: block;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: var(--transition-base);
    text-decoration: none;
    position: relative;
  }
  .product-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
  }

  .product-card__img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    background: var(--color-gray-100);
    display: block;
  }

  .product-card__body {
    padding: var(--space-sm) var(--space-md) var(--space-md);
  }

  .product-card__name {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: 1.4;
    min-height: 2.8em;
  }

  .product-card__price {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
    margin: 4px 0 2px;
  }

  .product-card__moq {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
  }

  /* 徽标占位在卡片右上角（绝对定位） */
  .product-card__badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
  }


  /* ================================================================
     5. 徽标
     ================================================================ */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
  }

  .badge--verified {
    background: var(--color-bg-white);
    color: var(--color-success);
    border: 1px solid var(--color-success);
    box-shadow: var(--shadow-xs);
  }

  .badge--rank {
    background: var(--color-accent);
    color: var(--color-text-white);
    min-width: 18px;
    height: 18px;
    justify-content: center;
    padding: 0;
    border-radius: var(--radius-xs);
  }


  /* ================================================================
     6. 搜索条
     搜索条根元素是白底容器，内部并排三段：分类下拉 / 关键词输入 / 橙红按钮。
     站头（白底）里的那份额外带一圈边框，见第 13 节。
     ================================================================ */
  .search-bar {
    display: flex;
    align-items: stretch;
    background: var(--color-bg-white);
    border-radius: var(--radius-md);
    /* 不能 overflow:hidden——会把类型下拉的 .dropdown-menu 整个裁掉（菜单展开了但不可见）；
       圆角裁切改由首末子元素（__cat / __btn）各自的 border-radius 承担 */
    overflow: visible;
    box-shadow: var(--shadow-sm);
  }

  .search-bar__cat {
    flex-shrink: 0;
    padding: 10px 12px;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    background: var(--color-bg-light);
    border: none;
    border-right: 1px solid var(--color-border);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    cursor: pointer;
    /* 80px 刚好容下较长的 "Supplier"（实测 80.3px）——不设就会在 Product↔Supplier
       切换时左右跳 2.5px；也别设更大，那是在白占输入框的宽度 */
    min-width: 80px;
    font-family: var(--font-base);
    appearance: none;
    -webkit-appearance: none;
    outline: none;
  }
  .search-bar__cat:focus { outline: none; }
  /* 分类按钮外面套着 Bootstrap 的 .dropdown（block）。容器被 flex 拉满，但里面的 inline-block 按钮
     按自己 12px 字号算高（38.6px），比输入框（41.7px）矮 3px、底下漏一条缝。
     把 .dropdown 也做成 flex，按钮才成为被拉伸的 flex 项 */
  .search-bar > .dropdown { display: flex; }

  .search-bar__input {
    flex: 1;
    padding: 10px 14px;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: var(--color-bg-white);
    border: none;
    outline: none;
    font-family: var(--font-base);
    min-width: 0; /* prevent flex overflow */
  }
  .search-bar__input::placeholder { color: var(--color-text-muted); }

  /* 按钮只放一个放大镜图标（无文案）——宽度全让给输入框。
     无障碍靠 header.phtml 上的 aria-label/title，别把 <i> 换成有文本的内容 */
  .search-bar__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    background: var(--color-accent);
    color: var(--color-text-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-base);
    border: none;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    cursor: pointer;
    transition: var(--transition-base);
    white-space: nowrap;
    line-height: 1;
  }
  /* 图标比正文大一号，撑起没有文案后的视觉重量 */
  .search-bar__btn i { font-size: 16px; line-height: 1; }
  .search-bar__btn:hover { background: var(--color-accent-dark); }


  /* ================================================================
     7. 信任条（4 列卡片，圆形图标底 + 右文字；hover 微浮起）
     ================================================================ */
  .trust-strip {
    display: grid;
    /* minmax(0,1fr) 而不是裸 1fr：1fr 下限是 min-content，长单词（Specification / coordination）
       会撑破列——2026-09-18 手机端、2026-09-19 平板 820 各实测溢出一次 */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-md);
  }

  /* 2026-10-21 起整卡是 <a>：color: inherit 免得正文字变链接蓝；悬停保留上浮，标题变色与全站 a:hover 同色 */
  .trust-strip__item {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: var(--transition-base);
    color: inherit;
    text-decoration: none;
  }
  .trust-strip__item:hover,
  .trust-strip__item:focus-visible {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: inherit;
    outline: none;
  }
  .trust-strip__item:hover .trust-strip__title,
  .trust-strip__item:focus-visible .trust-strip__title { color: var(--color-primary-dark); }

  /* 图标：首子节点（<span>/<i>）渲染成圆形浅蓝底 + 主色图标 */
  .trust-strip__item > :first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    font-size: 22px;
    color: var(--color-primary);
    background: var(--color-primary-light);
    border-radius: var(--radius-pill);
    line-height: 1;
  }

  .trust-strip__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-strong);
    margin: 0 0 2px;
    line-height: 1.3;
  }

  .trust-strip__desc {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.3;
    margin: 0;
  }

  .trust-strip__item > :last-child { min-width: 0; }   /* 文字盒也要能收缩，否则 flex 项拒绝变窄 */

  /* ≤991 切 2 列（与 hero 同一断点）：4 列在 820 宽下每列只剩约 190px，英文两行标题也装不下 */
  @media (max-width: 991px) {
    .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
    .trust-strip__item { padding: var(--space-sm) var(--space-md); gap: var(--space-sm); }
  }

  /* <480 保持 2 列、图标移到文字上方：2 列横排时图标 46 + 间距 + 内边距吃掉 86px，320 屏文字区只剩 52px，
     而英文标题有不可断的长词（Specification 91px、coordination 86px）——minmax(0,1fr) 只保证列不被撑破，
     挡不住文字越出卡片；视口 < 约 394 都会越界，320 下冲出卡片 39px 并把整页撑到 321px。
     沿革：2026-09-22 用户先选了「1 列」；2026-09-29 手机端重排在 pages/home.css 的 <768 段写回 2×2
     （pages 层压过本层），把那条盖掉、溢出复发；2026-09-30 用户改选本方案——信任区比 1 列矮
     70~110px（320 en +62 / zh +36，相对重排后的 2×2）。**文字溢出不体现在任何元素的 rect 上**，
     量这类问题要看 scrollWidth > clientWidth，光扫元素边界扫不出来。 */
  @media (max-width: 479.98px) {
    .trust-strip__item { flex-direction: column; align-items: flex-start; }
    .trust-strip__item > :first-child { width: 36px; height: 36px; font-size: 18px; }
  }


  /* ================================================================
     8. 分类菜单（左侧竖列）
     ================================================================ */
  .category-menu {
    background: var(--color-bg-white);
    border-right: 1px solid var(--color-border);
    position: relative;
  }

  .category-menu__head {
    padding: 8px 14px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--color-bg-light);
  }

  .category-menu__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    font-size: var(--font-size-xs);
    color: var(--color-text);
    border-left: 3px solid transparent;
    transition: var(--transition-fast);
    cursor: pointer;
    text-decoration: none;
  }
  .category-menu__item:hover,
  .category-menu__item--active {
    background: var(--color-bg-light);
    border-left-color: var(--color-accent);
    color: var(--color-text-strong);
  }

  /* ----------------------------------------------------------------
     CSS-only hover flyout submenu (Alibaba/MIC mega style)
     Flyout is a child of .category-menu__item (a div wrapper).
     position:absolute is relative to .category-menu (position:relative).
     Hovering the flyout keeps the parent :hover alive → no JS needed.
     ---------------------------------------------------------------- */
  .category-menu__flyout {
    position: absolute;
    left: 100%;
    top: 0;
    min-height: 100%;
    width: 300px;
    display: none;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    padding: var(--space-lg);
    z-index: 30;
  }
  .category-menu__item:hover .category-menu__flyout {
    display: block;
  }

  .category-menu__flyout-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--color-border);
  }

  .category-menu__flyout-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xs) var(--space-sm);
    margin-top: var(--space-sm);
  }

  .category-menu__flyout-link {
    font-size: var(--font-size-xs);
    color: var(--color-text);
    text-decoration: none;
    padding: 5px var(--space-sm);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-bg-light);
    display: block;
    transition: var(--transition-fast);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .category-menu__flyout-link:hover {
    color: var(--color-primary);
    background: var(--color-primary-lightest);
    border-color: var(--color-primary-light);
  }


  /* ================================================================
     9. 分类卡（缩略图 + 名称）
     ================================================================ */
  .category-card {
    display: block;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 10px;
    text-align: center;
    background: var(--color-bg-white);
    transition: var(--transition-base);
    text-decoration: none;
  }
  .category-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--color-primary-light);
  }

  .category-card__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 60px;
    object-fit: contain;
    background: var(--color-bg-light);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    display: block;
  }

  .category-card__name {
    font-size: var(--font-size-xs);
    color: var(--color-text);
    line-height: 1.3;
  }


  /* ================================================================
     10. 表单字段
     ================================================================ */
  .form-field { margin-bottom: var(--space-md); }

  .form-field__label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
  }

  /* .form-control 适用于 <input> <select> <textarea> */
  .form-control {
    display: block;
    width: 100%;
    padding: 9px 12px;
    font-size: var(--font-size-sm);
    font-family: var(--font-base);
    color: var(--color-text);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
    outline: none;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    line-height: var(--line-height-base);
  }
  .form-control::placeholder { color: var(--color-text-muted); }
  .form-control:focus {
    border-color: var(--color-primary);
    background: var(--color-bg-white);
    box-shadow: 0 0 0 3px var(--color-primary-light);
  }
  .form-control:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }

  textarea.form-control {
    resize: vertical;
    min-height: 90px;
  }

  .form-field__error {
    display: block;
    margin-top: 4px;
    font-size: var(--font-size-xs);
    color: var(--color-danger);
  }

  /* 防刷诱饵字段（FormGuard::HONEYPOT_FIELD）：对真人不可见，自动填表的机器人会填上它。
     移出屏幕而不是 display:none——有的机器人会跳过 display:none 的框。
     标签配合 aria-hidden + tabindex=-1，读屏与 Tab 键都碰不到。 */
  .form-hp {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }


  /* ================================================================
     11. 分页
     ================================================================ */
  .pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
  }

  .page-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: var(--color-bg-white);
    cursor: pointer;
    transition: var(--transition-fast);
    text-decoration: none;
    line-height: 1;
    user-select: none;
  }
  .page-item:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }

  .page-item--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-white);
    font-weight: var(--font-weight-semibold);
    cursor: default;
  }
  .page-item--active:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-white);
  }

  .page-item[disabled],
  .page-item[aria-disabled="true"] {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
  }


  /* ================================================================
     12. 面包屑
     ================================================================ */
  .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
  }

  .breadcrumb a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: var(--transition-fast);
  }
  .breadcrumb a:hover { color: var(--color-primary); }

  .breadcrumb__sep {
    color: var(--color-text-muted);
    margin: 0 2px;
    user-select: none;
  }

  /* 最后一段（当前页）用更深色、稍粗 */
  .breadcrumb > :last-child {
    color: var(--color-text-strong);
    font-weight: var(--font-weight-medium);
  }


  /* ================================================================
     13. 站头（白底）+ 主导航链接
     ================================================================
     ★ 站头是白底，logo 原色直出，不做任何颜色处理（2026-09-21 用户拍板）。
       后台那张 logo（isl_setting.logo）是**浅底专用素材**：深蓝字标 + 灰 tagline + 橙蓝盾牌。
       2026-08-04~09-21 站头是主蓝底，为了让它读得出先后上过两套处理——
       `filter: brightness(0) invert(1)` 纯白剪影、以及把 logo 当 CSS 遮罩刷橙渐变——
       两套都改掉了品牌原色，现已整体移除（连同 BrandLogo 类与同源遮罩副本那套机制）。
     ★ **别把站头改回深色底**：原图的深蓝字标在蓝底上对比度不足，必然又得回到"给 logo 变色"。
       同理深色底上新放这张 logo 也别垫白底板——2026-08-04 逐版截图比过，怎么调圆角阴影都
       读成"贴上去的补丁"。要在深色底上用，就得另备一张深底专用素材。
     ★ 旺铺页的站头也是白的：此前 background 取 var(--color-primary)，会被供应商主色顶掉；
       现在供应商主色只体现在 .supplier-navbar 与企业头部。
     ★ 登录/注册页同一张 logo，配套规则在 pages/auth.css（顶栏同样是白条）。 */
  .site-header-d {
    background: var(--color-bg-white);
    border-bottom: 1px solid var(--color-border);
  }
  .site-header-d__row { padding: 12px 0; }

  .main-nav__link {
    color: var(--color-text-strong);
    text-decoration: none;
    transition: var(--transition-fast);
  }
  .main-nav__link:hover { color: var(--color-primary); }
  .main-nav__link--active {
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 2px;
  }

  /* 白底上搜索条靠阴影衬不出来（原先是蓝底衬白框），补一圈边框 */
  .site-header-d .search-bar { box-shadow: none; border: 1px solid var(--color-border-strong); }
  /* 补了这圈边框后，首末子元素原本按"无边框容器"设计的 8px 圆角就和外框不同心了：
     右侧橙色按钮上下各露 1px 灰线、圆角处漏白色月牙，看起来像"按钮比输入框矮、被边框包住"。
     按钮用负 margin 吃掉边框，与外框外沿齐平（量过：41.69 → 43.69px，与外框同高）；
     左侧分类按钮仍在边框内，圆角改成 8-1=7px 与外框内沿同心 */
  .site-header-d .search-bar__btn { margin: -1px -1px -1px 0; }
  .site-header-d .search-bar__cat { border-radius: 7px 0 0 7px; }

  /* 站头 logo 尺寸：源图走 ImageHelper 的 **brand 预设** 而非 logo(w200)——
     46px 高对应约 211px 宽，w200 在 2 倍屏下只够 0.5 倍采样会发虚，别退回 logo 预设。
     max-width 是防后台换上比例古怪的 logo 时撑破布局的兜底(当前素材用不满)，
     object-fit:contain 保证不变形。

     ⚠ object-position:left 不能删。dim() 输出的 width="800" 是**表现属性提示**，会把盒子撑到
     max-width(220px)，而 contain 只按高度缩放到 211px 宽——默认 center 会在左侧留死区，
     logo 与下方容器左边缘对不齐。改 width:auto 也能对齐，但图未加载时盒宽为 0、加载后右侧
     导航整体横移，等于拿 CLS 换对齐；object-position 是零代价的那条路。 */
  .site-header-d__logo img {
    height: 46px;
    max-width: 220px;
    object-fit: contain;
    object-position: left center;
    display: block;
  }
  /* 无图时的文字兜底 */
  .site-header-d__logo-text {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: .5px;
  }


  /* ================================================================
     14. 站脚（D 风格）— 用 -d 后缀（site-footer-d），与早期 .site-footer 命名区隔
     ================================================================ */
  .site-footer-d {
    color: var(--color-text-white);
  }

  .site-footer-d__nav-section {
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    padding: 32px 0 24px;
  }
  /* 空状态品牌条（footerNav 为空时）紧凑版 */
  .site-footer-d__nav-section--slim {
    padding: 28px 0;
  }

  .site-footer-d__brand {
    font-size: var(--font-size-lg);    /* 20px，原 19px */
    font-weight: var(--font-weight-black);  /* 800 */
    letter-spacing: .5px;
    margin-bottom: 12px;
  }
  /* 品牌块里的后台 logo：尺寸口径与站头 .site-header-d__logo img 完全一致（46px 高 / brand 预设），
     object-position:left 的理由见第 13 节。素材是浅底专用的，压在藏青底上 tagline 偏暗——2026-10-15 用户看过对比图后接受 */
  .site-footer-d__brand img {
    height: 46px;
    max-width: 220px;
    object-fit: contain;
    object-position: left center;
    display: block;
  }
  /* 空状态品牌名无需底部间距 */
  .site-footer-d__brand--no-gap {
    margin-bottom: 0;
  }

  .site-footer-d__brand-desc {
    font-size: var(--font-size-sm);    /* 14px，原 13px */
    color: rgba(255, 255, 255, .6);
    line-height: 1.7;
    margin: 0;
  }

  .site-footer-d__title {
    font-size: var(--font-size-sm);    /* 14px，原 13px */
    font-weight: var(--font-weight-bold);
    color: var(--color-text-white);
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
  }

  .site-footer-d__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .site-footer-d__list-item {
    margin-bottom: 6px;
  }

  .site-footer-d__link {
    font-size: var(--font-size-sm);    /* 14px，原 13px */
    color: rgba(255, 255, 255, .65);
    text-decoration: none;
    transition: color .2s;
  }
  .site-footer-d__link:hover {
    color: var(--color-text-white);
  }

  .site-footer-d__copyright-bar {
    padding: 14px 0;
  }

  .site-footer-d__copyright {
    font-size: var(--font-size-xs);    /* 12px */
    color: rgba(255, 255, 255, .5);
  }

  .site-footer-d__copyright-link {
    color: rgba(255, 255, 255, .5);
    text-decoration: none;
    margin-right: 14px;
  }
  .site-footer-d__copyright-link:last-child {
    margin-right: 0;
  }


  /* ================================================================
     15. 下拉菜单可读性（覆盖 Bootstrap vendor 层）
     ================================================================ */
  /* 下拉项可读性（覆盖 Bootstrap vendor 层） */
  .dropdown-menu .dropdown-item { color: var(--color-text); }
  .dropdown-menu .dropdown-item:hover,
  .dropdown-menu .dropdown-item:focus {
    background: var(--color-bg-light);
    color: var(--color-primary);
  }

  /* 语言按钮（partials/lang_dropdown.phtml）：语言名取自 isl_language.name，旺铺 topbar 在 320 下放不下
     「Português (Brasil)」（越出 3px，2026-10-23）。整条链允许收缩、放不下才省略号，放得下的语言名不变；
     完整名称仍在按钮 aria-label 与国旗 alt 上 */
  .lang-dropdown,
  .lang-dropdown__btn { min-width: 0; max-width: 100%; }
  .lang-dropdown__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* D 风格下拉（.dropdown-menu--d，语言切换 .lang-menu 同款）：项内留白 + 圆角，悬停浅灰 */
  .lang-menu,
  .dropdown-menu--d { padding: 6px; }
  .lang-menu .dropdown-item,
  .dropdown-menu--d .dropdown-item {
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    color: var(--color-text);
  }
  .lang-menu .dropdown-item:hover,
  .lang-menu .dropdown-item:focus,
  .dropdown-menu--d .dropdown-item:hover,
  .dropdown-menu--d .dropdown-item:focus {
    background: var(--color-bg-light);
    color: var(--color-primary);
  }
  /* 选中项：浅蓝底 + 主色字 + 右侧勾选，去掉 Bootstrap 实心蓝框 */
  .lang-menu .dropdown-item.active,
  .lang-menu .dropdown-item.active:hover,
  .lang-menu .dropdown-item.active:focus,
  .dropdown-menu--d .dropdown-item.active,
  .dropdown-menu--d .dropdown-item.active:hover,
  .dropdown-menu--d .dropdown-item.active:focus {
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
  }
  .lang-menu .dropdown-item.active::after,
  .dropdown-menu--d .dropdown-item.active::after {
    content: "✓";
    margin-left: auto;
    padding-left: 10px;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
  }

  /* ================================================================
     16. 移动端顶部适配(<992px 搜索条整行 / <768px topbar 精简+底部导航条)
     ================================================================ */
  /* 站头搜索条在头内的桌面定位(靠右、限宽) */
  /* min-width:0 桌面也要：≥992px 站头一行不换行，flex 项默认 min-width:auto 让它缩不到内容最小宽度（351px）以下，
     992px（带滚动条时窗口 992–1010）会越出行尾 3px、整页横向滚动。下面 <992px 那条是同一个坑的换行版 */
  .search-bar--header { max-width: 520px; margin-left: auto; min-width: 0; }

  /* 手机站头工具区与页脚折叠的桌面默认（2026-09-29） */
  .site-header-d__m-tools { display: none; }
  .site-footer-d__summary { list-style: none; pointer-events: none; }   /* 桌面：标题不可点，分组恒展开 */
  .site-footer-d__summary::-webkit-details-marker { display: none; }

  /* 底部固定导航条:移动端主导航,替代站头里被隐藏的 nav。桌面默认隐藏 */
  .mobile-bottom-nav {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--color-bg-white);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 8px rgba(10, 42, 82, .08);
    z-index: 1020;
    padding-bottom: env(safe-area-inset-bottom);   /* iOS 底部安全区 */
  }
  .mobile-bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 7px 4px;
    text-decoration: none;
    color: var(--color-text-secondary);
    font-size: 11px;
    line-height: 1.1;
  }
  .mobile-bottom-nav__item i { font-size: 19px; }
  .mobile-bottom-nav__item--active {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
  }

  /* 含平板(<992px):蓝头一行塞不下 logo+主导航+搜索条,搜索条整行下沉铺满
     (修 768-991 搜索条溢出屏幕、Search 按钮在屏外);热线隐藏给 topbar 右侧让位 */
  @media (max-width: 991.98px) {
    .topbar__tagline { display: none; }
    .site-header-d__row { flex-wrap: wrap; }
    .search-bar--header {
      flex: 0 0 100%;
      max-width: none;
      margin-left: 0;
      min-width: 0;   /* flex 项默认 min-width:auto 会按内容最小宽度撑破窄屏(390px 曾溢出 49px) */
    }
  }

  @media (max-width: 767.98px) {
    /* topbar:收紧右侧间距,防换行 */
    .topbar__right { gap: 12px !important; }

    /* 收窄类目下拉与按钮内距,把宽度让给输入框,减少 placeholder 被截断。
       ⚠ 这条曾长期是死规则:header.phtml 上有内联 style="min-width:110px;padding-right:28px",
       内联优先级高于媒体查询,手机端从没真正收窄过。内联已删,改宽度只改这里 */
    .search-bar--header .search-bar__cat { padding: 10px 8px; }
    .search-bar--header .search-bar__btn { padding: 10px 14px; }

    /* 底部导航条显示 + 给内容底部留白,避免固定条遮住 footer */
    .mobile-bottom-nav { display: flex; }
    body { padding-bottom: 58px; }

    /* 主站页 topbar 隐藏，语言与账户进站头（旺铺页 topbar 不带 --mall，保留） */
    .topbar--mall { display: none; }
    .site-header-d__m-tools {
      display: flex;
      align-items: center;
      gap: var(--space-md);
      margin-left: auto;
    }
    .site-header-d__m-icon {
      display: inline-flex;
      align-items: center;
      padding: 0;
      background: none;
      border: none;
      color: var(--color-text);
      font-size: 22px;
      text-decoration: none;
    }
    .site-header-d__m-icon.dropdown-toggle::after { display: none; }

    /* 页脚：品牌列与分组整宽，分组折叠。
       fix round 1（2026-09-29）：
       1) 主站页与旺铺页都生效（.site-footer-d--fold；2026-09-29 前只作用于主站页）
       2) 去掉了 margin-bottom:0 !important——@layer 里最早声明的层（vendor/Bootstrap 的 .mb-4）
          在 !important 优先级反转下仍然赢，这条声明从来没生效过（实测 390px 量到 24px）。
          真正的 margin 归零改在 footer.phtml 侧：主站页把列的 Bootstrap 间距类从
          mb-4 mb-lg-0 换成 mb-0 mb-md-4 mb-lg-0（≥768 间距不变，<768 归零），不跟 vendor 层拼权重。 */
    .site-footer-d--fold .site-footer-d__col { flex: 0 0 100%; max-width: 100%; }
    .site-footer-d--fold .site-footer-d__summary {
      pointer-events: auto;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--space-sm) 0;
      border-bottom: 1px solid rgba(255, 255, 255, .12);
    }
    .site-footer-d--fold .site-footer-d__summary::after { content: "+"; color: var(--color-text-white); }
    .site-footer-d--fold .site-footer-d__group[open] .site-footer-d__summary::after { content: "−"; }
    .site-footer-d--fold .site-footer-d__summary .site-footer-d__title { margin: 0; }
    .site-footer-d--fold .site-footer-d__group .site-footer-d__list { padding-top: var(--space-sm); }
  }

  /* ---------- 17. 注册后首个页面弹一次的「联系你的客户经理」弹窗（_partial/welcome_contact.phtml）----------
     z-index 压在右侧悬浮窗（1000/1001）与聊天面板（1099/1100）之上、低于 2000 的遮罩层级。
     桌面居中小卡；<768 变成底部弹层（手机才是展会现场的主设备）。
     WhatsApp 品牌绿与 right-sidebar.css 的图标同一个值，这是唯一允许的非 token 颜色。 */
  .welcome-contact {
    position: fixed; inset: 0; z-index: 1500;
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-md);
  }
  .welcome-contact[hidden] { display: none; }
  .welcome-contact__mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
  .welcome-contact__card {
    position: relative;
    width: min(420px, 100%);
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    background: var(--color-bg-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    text-align: center;
    outline: none; /* 卡片只是脚本聚焦的落点，不画焦点环；键盘用户 Tab 到按钮上仍有各自的焦点环 */
  }
  .welcome-contact__close {
    position: absolute; top: var(--space-sm); right: var(--space-sm);
    width: 32px; height: 32px;
    border: none; background: transparent; border-radius: var(--radius-pill);
    color: var(--color-text-muted); font-size: var(--font-size-xl); line-height: 1; cursor: pointer;
  }
  .welcome-contact__close:hover { background: var(--color-bg-gray); color: var(--color-text); }
  .welcome-contact__icon { color: #25D366; margin-bottom: var(--space-sm); }
  .welcome-contact__title {
    margin: 0 0 var(--space-xs);
    font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-text-strong);
  }
  .welcome-contact__text { margin: 0 0 var(--space-lg); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); }
  .welcome-contact__cta {
    display: block; width: 100%;
    padding: var(--space-sm) var(--space-lg);
    background: #25D366; color: var(--color-text-white);
    border-radius: var(--radius-pill);
    font-weight: var(--font-weight-semibold); text-decoration: none;
    transition: var(--transition-fast);
  }
  .welcome-contact__cta:hover, .welcome-contact__cta:focus-visible { background: #1EBE5A; color: var(--color-text-white); }
  .welcome-contact__later {
    display: block; width: 100%; margin-top: var(--space-sm);
    padding: var(--space-xs);
    border: none; background: transparent;
    color: var(--color-text-muted); font-size: var(--font-size-sm); cursor: pointer;
  }
  .welcome-contact__later:hover { color: var(--color-text); }
  .welcome-contact-open { overflow: hidden; }

  @media (max-width: 767.98px) {
    .welcome-contact { align-items: flex-end; padding: 0; }
    .welcome-contact__card {
      width: 100%;
      border-radius: var(--radius-xl) var(--radius-xl) 0 0;
      padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
    }
  }

} /* end @layer components */