/* ============================================================
   pages/home.css — 首页专属样式（D 风格）
   Task 8 · Phase A
   依赖：variables.css, base.css, components.css, utilities.css
   原则：0 硬编码 hex；全部 var(--*) token；不重复 components.css 已有类。
   ============================================================ */

@layer pages {

  /* ================================================================
     1. Section Head 补充
        components.css 已有 .section-head / __title / __more；
        __eyebrow 为首页各节区用到的眉标，补在此。
     ================================================================ */
  .section-head__eyebrow {
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
  }


  /* ================================================================
     2. Hero D — 首屏三栏布局
        左栏：.category-menu (component)
        中栏：蓝色 banner + .search-bar (component) + 信任徽章行
        右栏：登录卡 + RFQ 快速入口卡
     ================================================================ */
  .hero-d {
    display: grid;
    grid-template-columns: 200px 1fr 210px;
    border-bottom: 1px solid var(--color-border);
    min-height: 300px;
  }

  /* 左栏 — 高度锁死与 Hero 行一致，分类全部显示靠内部滚动。
     .category-menu 绝对填充本栏（不撑高网格行），并作为 flyout 的包含块；
     真正滚动的是 .category-menu__list。flyout 包含块在滚动容器之外的祖先，
     故子菜单可向右溢出而不被滚动容器裁剪。 */
  .hero-d__left {
    position: relative;
    overflow: visible;
  }
  .hero-d__left .category-menu {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
  }
  .hero-d__left .category-menu__head {
    flex-shrink: 0;
  }
  .hero-d__left .category-menu__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: visible;
  }
  /* 细滚动条，悬停才明显 */
  .hero-d__left .category-menu__list::-webkit-scrollbar {
    width: 6px;
  }
  .hero-d__left .category-menu__list::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
  }
  .hero-d__left .category-menu__list:hover::-webkit-scrollbar-thumb {
    background: var(--color-text-muted);
  }

  /* 中栏 — Bootstrap 轮播容器 */
  .hero-d__center {
    padding: 0;
    overflow: hidden;
    position: relative;
    min-height: 300px;
    display: flex;
    flex-direction: column;
  }

  /* Carousel fills the center column */
  .hero-d__carousel {
    flex: 1;
    min-height: 300px;
  }
  .hero-d__carousel .carousel-inner {
    height: 100%;
    min-height: 300px;
  }
  .hero-d__carousel .carousel-item {
    height: 100%;
  }

  /* Slide content — gradient banner */
  .hero-d__slide {
    /* 左右边距让开 Bootstrap 的 15% 宽箭头区（2026-09-18 实测：9% 时标题左沿 86px 仍压在箭头区 0–144px 内） */
    padding: var(--space-xl) max(var(--space-xl), 15%);
    min-height: 300px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-md);
    color: var(--color-text-white);
  }
  .hero-d__slide-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-black);
    color: var(--color-text-white);
    line-height: var(--line-height-tight);
    margin: 0;
  }
  .hero-d__slide-desc {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.85);
    max-width: 440px;
    margin: 0;
    line-height: var(--line-height-relaxed);
  }

  /* 图上叠字分支（2026-09-18 起，数据来自 isl_banner）：底图铺满 + 左深右浅遮罩 + 复用 .hero-d__slide 文字层。
     判据（说明与按钮都空 = 纯图）在 app/support/BannerSlide.php，这里只管样式。 */
  .hero-d__photo {
    position: relative;
    height: 100%;
    min-height: 300px;
    overflow: hidden;
  }
  .hero-d__photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .hero-d__photo-mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 31, 67, 0.8), rgba(5, 31, 67, 0.12) 72%);
  }
  .hero-d__slide--photo {
    position: relative;
    z-index: 1;
  }

  /* 右栏 */
  .hero-d__right {
    background: var(--color-bg-gray);
    border-left: 1px solid var(--color-border);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
  .hero-d__login-card,
  .hero-d__rfq-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
  }
  .hero-d__welcome {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-sm);
  }
  .hero-d__login-btns {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }
  /* 未登录信任数字卡：数字在上、标签在下（2026-09-19 起）。
     此前是左数字右标签，数字列占 64px、标签只剩约 106px，英文 "Spot resources" 都折两行、
     "or sample order to discuss" 折三行；改竖排后 176px 全给标签，英文桌面 2/2/3 行 → 1/1/2 行，
     卡高几乎不变（237 → 239）。代价是中文桌面卡高 +40px（标签本来就一行），已量过、用户接受。 */
  .hero-d__stats {
    list-style: none;
    margin: 0 0 var(--space-sm);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .hero-d__stats li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  /* 前两格整格是 <a>（2026-10-21）：和 li 同样竖排，color: inherit 防标签被染成链接蓝；
     悬停只把数字加深到 primary-dark，与全站 a:hover 同一套，标签色不动 */
  .hero-d__stats-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: inherit;
    text-decoration: none;
  }
  .hero-d__stats-link:hover .hero-d__stats-num,
  .hero-d__stats-link:focus-visible .hero-d__stats-num {
    color: var(--color-primary-dark);
  }
  .hero-d__stats-num {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-black);
    line-height: 1.15;
    color: var(--color-primary);
  }
  .hero-d__stats-label {
    font-size: var(--font-size-xs);
    line-height: 1.3;
    color: var(--color-text-muted);
  }
  .hero-d__join-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin: 0;
  }
  .hero-d__join-hint a {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
  }
  /* 悬停只加深颜色，不加下划线——与 base.css 的全局 a:hover 及 section-head__more 同一套（2026-09-19 统一） */
  .hero-d__join-hint a:hover { color: var(--color-primary-dark); }
  /* 已登录个人问候卡 */
  .hero-d__user-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-strong);
    margin: 0;
    word-break: break-word;
  }
  .hero-d__user-email {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-sm);
    word-break: break-all;
  }
  .hero-d__rfq-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-strong);
    margin: 0 0 var(--space-xs);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .hero-d__rfq-desc {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-sm);
    line-height: var(--line-height-base);
  }
  /* 按钮下面的第二入口（市场参考），2026-09-19 起 */
  .hero-d__rfq-link {
    display: block;
    margin-top: var(--space-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-align: center;
    text-decoration: none;
  }
  .hero-d__rfq-link:hover { color: var(--color-primary-dark); }


  /* ================================================================
     3. Quick Nav — 快捷服务入口（4 图标格）
     ================================================================ */
  .quick-nav-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
  }

  .quick-nav-item {
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: var(--transition-base);
    display: flex;
    flex-direction: column;
  }
  .quick-nav-item:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
  }

  /* icon 版（静态预览用 bi 图标） */
  .quick-nav-item__icon-wrap {
    background: linear-gradient(135deg, var(--color-primary-lightest) 0%, var(--color-primary-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    font-size: 36px;
    color: var(--color-primary);
    transition: var(--transition-base);
  }
  .quick-nav-item:hover .quick-nav-item__icon-wrap {
    background: var(--color-primary-grad);
    color: var(--color-text-white);
  }

  /* img 版（phtml 中用 <img>） */
  .quick-nav-item__img-wrap {
    background: linear-gradient(135deg, var(--color-primary-lightest) 0%, var(--color-primary-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    padding: var(--space-md);
    transition: var(--transition-base);
  }
  .quick-nav-item:hover .quick-nav-item__img-wrap {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
  }
  .quick-nav-item__img-wrap img {
    max-height: 56px;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
  }
  .quick-nav-item:hover .quick-nav-item__img-wrap img {
    transform: scale(1.08);
  }

  .quick-nav-item__label {
    background: var(--color-bg-white);
    padding: var(--space-sm) var(--space-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--transition-fast);
  }
  .quick-nav-item:hover .quick-nav-item__label {
    color: var(--color-primary);
  }

  /* 副标题：列举该族下在架的二级分类，最多两行截断（2026-09-18 起） */
  .quick-nav-item__sub {
    padding: 0 var(--space-sm) var(--space-sm);
    font-size: var(--font-size-xs);
    line-height: 1.35;
    color: var(--color-text-muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }


  /* ================================================================
     3b. Process — 从需求到发运五步（2026-09-19）
        桌面 5 列，≤991 3 列，≤767 单列（数字在左，避免 2 列时第五格落单）
     ================================================================ */
  .process-section {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }
  .process-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-md);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .process {
    min-width: 0;
    padding: var(--space-md);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }
  .process__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: var(--space-sm);
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-text-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
  }
  .process__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-strong);
    margin: 0 0 var(--space-xs);
  }
  .process__desc {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-base);
    color: var(--color-text-muted);
    margin: 0;
  }

  /* ================================================================
     4. (Browse by Category section removed — see task-8A revision)
     ================================================================ */

  /* ================================================================
     8b. Proof — 可索取的资料 + 价格参考提示（2026-09-19）
        左清单 / 右提示框，≤991 上下堆叠
     ================================================================ */
  .proof-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
  }
  .proof-list {
    display: grid;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .proof-list__item {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: var(--color-text);
  }
  .proof-list__item .bi {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-success);
  }
  .proof-notice {
    padding: var(--space-lg);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
  }
  .proof-notice__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-strong);
    margin: 0 0 var(--space-sm);
  }
  .proof-notice__text {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-sm);
  }
  .proof-notice__link {
    display: block;
    margin-top: var(--space-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-decoration: none;
  }
  .proof-notice__link:hover { color: var(--color-primary-dark); }


  /* ================================================================
     5. Featured Product Grid — Recommended for you
     ================================================================ */
  .featured-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-md);
  }

  .featured-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: var(--transition-base);
    display: flex;
    flex-direction: column;
    text-decoration: none;
  }
  .featured-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }

  .featured-card__img-wrap {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-bg-gray);
  }
  .featured-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
  }
  .featured-card:hover .featured-card__img {
    transform: scale(1.06);
  }

  .featured-card__body {
    padding: var(--space-sm) var(--space-sm) var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
  }

  .featured-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px var(--space-sm);
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    width: fit-content;
  }

  .featured-card__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
  }

  .featured-card__price {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
    letter-spacing: -0.01em;
  }

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


  /* ================================================================
     7b. Section Box Head — 新品发布 / 排行榜内部标题行
     ================================================================ */
  .section-box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-bg-light);
  }

  .section-box-head__title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-strong);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .section-box-head__title::before {
    content: "";
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: var(--color-primary);
    flex-shrink: 0;
  }

  .section-box-head__sub {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-regular);
    margin-left: 2px;
  }

  .section-box-head__more {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
  }
  .section-box-head__more:hover { color: var(--color-primary-dark); }


  /* ================================================================
     6. New Product + Leaderboard — 两列容器
     ================================================================ */
  /* 8/4 两列布局（不依赖 Bootstrap） */
  .home-split {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-md);
    /* 两栏等高：左侧新品区是正方形卡片网格、高度随视口宽度变，右侧排行榜靠 .rank-list 均匀分布跟着它走 */
    align-items: stretch;
  }

  .product-section-box {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
  }

  /* 排行榜栏：纵向 flex，.rank-list 吃掉剩余高度，9 条在里面均匀分布，底边对齐左栏。
     前提是 9 条的自然高度在所有两栏宽度（≥992px）下都不超过左栏，否则反过来把左栏撑高、
     左侧底部留白。左栏最矮在 992px 窗口带滚动条时（布局宽 977），9 条排完只剩约 14px 余量，没有再加一行的空间：
     条目高度由右侧文字行数决定（不是缩略图），所以只放名称+价格两行（2026-09-22 起去掉了 MOQ 行，
     三行文字就有 64px）。条数（控制器里的 9）、文字行数、条目内边距是一套，改其一要在 992/1100/1280/1440 重新量 */
  .product-section-box--rank {
    display: flex;
    flex-direction: column;
  }
  .rank-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  /* 新品发布内部 4 列产品格。minmax(0,1fr) 不能写回 1fr：产品卡主图是 width:100% + aspect-ratio，
     auto 下限会按每张图各自给出最小宽度，均分不到约 150px 时（992–1060px）四列宽度不等，992 时首列 112 其余 150 */
  .new-product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-sm);
    margin-top: var(--space-md);
  }

  /* 排行榜条目 */
  .rank-list-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    /* 纵向间距主要由 .rank-list 的 space-between 分配，这里只留底线 */
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--color-bg-light);
    text-decoration: none;
    transition: var(--transition-fast);
  }
  /* 序号类选择器必须按外层 <a> 计数：.rank-list-item 是各自 <a> 里唯一的子元素，
     直接写 .rank-list-item:last-child / :nth-child(n) 会命中每一条（曾导致分隔线全无、第 2/3 名配色从不生效） */
  .rank-list > a:last-child .rank-list-item {
    border-bottom: none;
    padding-bottom: 0;
  }
  .rank-list-item:hover .rank-list-item__name {
    color: var(--color-primary);
  }

  .rank-badge {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: var(--color-text-white);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
    line-height: 1;
  }
  .rank-list > a:nth-child(2) .rank-badge { background: var(--color-warning); }
  .rank-list > a:nth-child(3) .rank-badge { background: var(--color-gray-400); }

  .rank-list-item__img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    background: var(--color-bg-light);
    display: block;
  }

  .rank-list-item__name {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: 1.4;
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
  }

  .rank-list-item__price {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
  }


  /* ================================================================
     7. Category Showcase Floors — 大分类卡 + 小分类网格
     ================================================================ */
  .category-showcase {
    display: flex;
    gap: var(--space-md);
    align-items: stretch;
  }

  .big-category-card {
    flex-shrink: 0;
    width: 200px;
    min-height: 280px;
    background: var(--color-bg-gray) center/cover no-repeat;
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: var(--transition-base);
    text-decoration: none;
    border: 1px solid var(--color-border);
  }
  .big-category-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
  }
  /* 背景叠色层（有背景图时压暗） */
  .big-category-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
      rgba(14, 77, 164, 0.06) 0%,
      rgba(14, 77, 164, 0.42) 100%);
    pointer-events: none;
    border-radius: var(--radius-md);
  }

  .big-category-card__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-strong);
    line-height: 1.4;
    margin: 0 0 var(--space-sm);
    position: relative;
    z-index: 2;
  }
  /* 有背景图时标题变白 */
  .big-category-card[style*="background-image"] .big-category-card__title {
    color: var(--color-text-white);
  }

  .big-category-card__btn-wrap {
    position: relative;
    z-index: 2;
    align-self: flex-start;
  }

  .small-categories {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    flex: 1;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .small-category-card {
    min-height: 140px;
    background: var(--color-bg-white) center/cover no-repeat;
    padding: var(--space-sm);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    transition: var(--transition-base);
    text-decoration: none;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }
  .small-category-card:nth-child(4n) { border-right: none; }
  .small-category-card:hover {
    transform: scale(1.02);
    z-index: 1;
    box-shadow: var(--shadow-md);
  }
  .small-category-card:hover .category-tag { background: rgba(10, 42, 82, 0.72); }

  .category-tag {
    font-size: var(--font-size-xs);
    color: var(--color-text-white);
    font-weight: var(--font-weight-medium);
    padding: 3px var(--space-sm);
    display: inline-block;
    background: rgba(10, 42, 82, 0.55);
    border-radius: var(--radius-sm);
    position: relative;
    z-index: 2;
    transition: background 0.2s ease;
    backdrop-filter: blur(2px);
  }


  /* ================================================================
     8. Steel Mill Logo Grid — 钢厂合作方
     ================================================================ */
  .steel-mill-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg);
    box-shadow: var(--shadow-sm);
  }

  .steel-mill-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-lg);
    align-items: center;
    justify-items: center;
  }

  .steel-mill-grid__img {
    width: auto;
    max-height: 48px;
    object-fit: contain;
    filter: grayscale(0.5) opacity(0.72);
    transition: var(--transition-base);
    cursor: pointer;
  }
  .steel-mill-grid__img:hover {
    filter: grayscale(0) opacity(1);
    transform: scale(1.06);
  }

  /* 静态预览中用图标占位 */
  .steel-mill-placeholder {
    width: 100%;
    height: 40px;
    background: var(--color-bg-gray);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
  }


  /* ================================================================
     9. RFQ Module — 询盘双列布局
     ================================================================ */
  .rfq-module {
    background: var(--color-primary-grad);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl) var(--space-xl);
    overflow: hidden;
    box-shadow: var(--shadow-brand);
    position: relative;
  }
  /* 微网格纹理叠层 */
  .rfq-module::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
      linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 70%);
    pointer-events: none;
  }

  /* 两列内容（不用 Bootstrap .row） */
  .rfq-module__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: center;
    position: relative;
    z-index: 1;
  }

  /* 左侧文案 */
  .rfq-content__title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-2xl);
    color: var(--color-text-white);
    margin: 0 0 var(--space-sm);
    line-height: var(--line-height-tight);
  }

  .rfq-content__subtitle {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 var(--space-lg);
    line-height: var(--line-height-base);
  }

  .rfq-content__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--color-accent);
    border-radius: var(--radius-pill);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-text-white);
    padding: var(--space-sm) var(--space-xl);
    text-decoration: none;
    transition: var(--transition-base);
    margin-bottom: var(--space-lg);
    box-shadow: var(--shadow-accent);
  }
  .rfq-content__btn::after {
    content: "→";
    transition: transform 0.25s ease;
  }
  .rfq-content__btn:hover {
    background: var(--color-accent-dark);
    color: var(--color-text-white);
    transform: translateY(-2px);
  }
  .rfq-content__btn:hover::after {
    transform: translateX(4px);
  }

  .rfq-features {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .rfq-features__item {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: var(--space-sm);
    padding-left: var(--space-lg);
    position: relative;
    line-height: var(--line-height-relaxed);
  }
  .rfq-features__item::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-text-white);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  /* 右侧表单卡 */
  .rfq-form {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg);
    box-shadow: var(--shadow-xl);
  }

  .rfq-form__title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
    color: var(--color-text-strong);
    margin: 0 0 var(--space-lg);
  }

  .rfq-form__field {
    margin-bottom: var(--space-md);
  }

  /* qty + unit 联排 */
  .rfq-form__qty-row {
    display: flex;
    gap: var(--space-sm);
  }
  .rfq-form__qty-row .form-control:first-child {
    flex: 1;
  }
  .rfq-form__qty-row .form-control + .form-control {
    flex: 0 0 130px;
  }

  .rfq-form__submit {
    width: 100%;
    background: var(--color-accent);
    color: var(--color-text-white);
    border: none;
    border-radius: var(--radius-pill);
    padding: var(--space-md) var(--space-lg);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-base);
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: var(--shadow-accent);
  }
  .rfq-form__submit:hover {
    background: var(--color-accent-dark);
    transform: translateY(-2px);
  }


  .home-sec--catm { display: none; }

  /* ================================================================
     10. 响应式
     ================================================================ */
  @media (max-width: 1199px) {
    .hero-d { grid-template-columns: 180px 1fr 190px; }
    /* 推荐产品固定 6 个：3 列排成 3+3，4 列会留两格空 */
    .featured-grid { grid-template-columns: repeat(3, 1fr); }
    .steel-mill-grid { grid-template-columns: repeat(5, 1fr); }
  }

  @media (max-width: 991px) {
    .hero-d { grid-template-columns: 1fr; }
    .hero-d__left { display: none; }
    .hero-d__right {
      border-left: none;
      border-top: 1px solid var(--color-border);
      flex-direction: row;
    }
    .hero-d__login-card,
    .hero-d__rfq-card { flex: 1; }
    .quick-nav-grid { grid-template-columns: repeat(2, 1fr); }
    /* 两列时卡宽约 175px，英文副标题 52–58 字符两行装不下（2026-09-18 实测前两张被截），放到三行 */
    .quick-nav-item__sub { -webkit-line-clamp: 3; }
    .process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .proof-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
    .featured-grid { grid-template-columns: repeat(3, 1fr); }
    .home-split { grid-template-columns: 1fr; }
    .category-showcase { flex-direction: column; }
    .big-category-card { width: 100%; min-height: auto; }
    .small-categories { grid-template-columns: repeat(4, 1fr); }
    .rfq-module__inner { grid-template-columns: 1fr; }
    .steel-mill-grid { grid-template-columns: repeat(4, 1fr); }
  }

  @media (max-width: 767px) {
    .hero-d__slide { padding: var(--space-lg) var(--space-md); }
    .hero-d__slide-title { font-size: var(--font-size-xl); }
    /* 触摸端靠滑动切换,隐藏多余的左右箭头(指示点仍保留) */
    .hero-d__carousel .carousel-control-prev,
    .hero-d__carousel .carousel-control-next { display: none; }
    .featured-grid { grid-template-columns: repeat(2, 1fr); }
    /* minmax(0,1fr) 不能写回 1fr：1fr = minmax(auto,1fr)，列的下限由内容定，卡片里 nowrap 的
       Verified 徽章会把每列撑到 150px，320px 屏两列放不下 → 整页布局视口被撑到 373px
       （实测：底部导航每格 75px 而不是 64px，就是这么发现的）。其它页 320px 无此问题 */
    .new-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rfq-module { padding: var(--space-lg) var(--space-md); }
    .rfq-content__title { font-size: var(--font-size-xl); }
    .rfq-form { padding: var(--space-lg) var(--space-md); }

    /* ---- 手机重排（2026-09-29，spec 第 5 节）----
       main 改 flex 列按 order 排：产品在前、信任内容在后。
       ★ 没有 home-sec 钩子类的新区块走 main > * 的 999，排到最后——新加首页区块时要给它一个钩子类并在这里排位 */
    main { display: flex; flex-direction: column; }
    main > * { order: 999; min-width: 0; }
    .home-sec { padding-top: var(--space-lg); padding-bottom: var(--space-lg); min-width: 0; }

    /* flex 列布局下每个区块默认 min-width:auto，内容（横滑网格用百分比列宽时尤为明显）的
       min-content 会把整行撑宽进而横向溢出全页；显式清零，交给各区块自己的 overflow-x 去处理横滑 */
    .home-sec--newrank .home-split,
    .home-sec--newrank .product-section-box,
    .home-sec--newrank .new-product-grid,
    .home-sec--newrank .rank-list,
    .hero-d__center,
    .hero-d__right { min-width: 0; }

    /* hero 三栏容器拆开：轮播留在最前，右侧数字卡/询价卡沉到信任区 */
    .home-sec--hero,
    .home-sec--hero .hero-d { display: contents; }
    .hero-d__center { order: 10; }
    .home-sec--quicknav { order: 20; }
    .home-sec--featured { order: 30; }
    .home-sec--newrank  { order: 40; }
    .home-sec--catm     { order: 50; display: block; }
    .home-sec--rfq      { order: 60; }
    .hero-d__right      { order: 70; padding: 0 var(--space-md); }
    .home-sec--trust    { order: 80; }
    .home-sec--process  { order: 90; }
    .home-sec--mill     { order: 100; }
    .home-sec--proof    { order: 110; }
    .home-sec--floor    { display: none; }

    /* 轮播压到约 200px（.hero-d__slide 自身有 height:100%，撑到 200px 还得连带压掉链上其余
       min-height:300px 的祖先/同级：.hero-d__center / .hero-d__carousel / .carousel-inner / .hero-d__photo，
       CDP 实测钉住，见 task-6-report.md） */
    .hero-d__center,
    .hero-d__carousel,
    .hero-d__carousel .carousel-inner,
    .hero-d__slide,
    .hero-d__photo { min-height: 200px; }

    /* 「能帮你采购什么」四卡 → 一行四个图标入口 */
    .quick-nav-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); }
    .quick-nav-item { padding: var(--space-sm) 2px; }
    .quick-nav-item__sub { display: none; }
    .quick-nav-item__label { font-size: var(--font-size-xs); }

    /* 新品横滑、排行榜只露前 5 */
    .new-product-grid {
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: 44%;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .rank-list > a:nth-child(n + 6) { display: none; }

    /* 分类紧凑区 */
    .home-catm__heading { font-size: var(--font-size-lg); margin-bottom: var(--space-sm); }
    .home-catm__row { padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border); }
    .home-catm__name {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: var(--font-weight-semibold);
      color: var(--color-text);
      text-decoration: none;
    }
    .home-catm__chips {
      display: flex;
      gap: var(--space-xs);
      margin-top: var(--space-xs);
      overflow-x: auto;
      scrollbar-width: none;
    }
    .home-catm__chip {
      flex: 0 0 auto;
      padding: 4px 10px;
      border-radius: var(--radius-pill);
      background: var(--color-bg-light);
      color: var(--color-text-secondary);
      font-size: var(--font-size-xs);
      text-decoration: none;
      white-space: nowrap;
    }

    /* 信任区压缩：四项 2×2、去说明文字；流程横滑；钢厂 logo 横滑 */
    .trust-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
    .trust-strip__desc { display: none; }
    .process-grid { display: flex; gap: var(--space-sm); overflow-x: auto; scrollbar-width: none; }
    .process { flex: 0 0 72%; }
    .steel-mill-grid { display: flex; gap: var(--space-sm); overflow-x: auto; scrollbar-width: none; }
    .steel-mill-grid img { flex: 0 0 96px; }
  }

} /* end @layer pages */