@charset "UTF-8";
/* ==========================================================================
   DPJ Wholesale · 前台主题 · 首页板块
   --------------------------------------------------------------------------
   只承载首页专属区块：主视觉、买家说明条、分类栅格与目录、商品栅格与卡片。
   设计令牌与页眉页脚等全站外框见 storefront-theme.css；本文件在其后加载，
   因此对旧内联层的同特异性声明同样凭"后加载"取胜。

   与旧层的冲突处理原则：
   - 旧层用 !important 锁死的属性（卡片圆角/阴影、商品栅格列数），
     这里也显式 !important，并就近注释，避免"改了没生效"的隐性问题。
   - 旧层用 `.home-product-card>a:first-child`（特异性 0,2,1）写的封面描边，
     这里用 `> a.home-product-media` 取同特异性靠后加载取胜。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 首页主视觉（Hero）
   -------------------------------------------------------------------------- */
/* 首页主视觉：左栏 = 商品分类导航（首屏可见），右栏 = 文案 + 推荐商品。
   两栏布局把原来独占一屏下方整条的分类区块收进首屏，纵向高度因此省出一整段。 */
.home-hero {
  display: grid;
  /* 左栏最小值要 ≥320px：一级分类名最长需 172px，扣掉缩略图/展开按钮/间距后
     316px 会把 "Tools & Home Improvement" 截断（用户截图反馈）。 */
  grid-template-columns: minmax(320px, 344px) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
  align-items: start;
  padding-block: clamp(20px, 2.2vw, 34px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--sf-surface);
  min-height: 0;
}
.home-hero:before { display: none; }           /* 关闭旧层的网格纹理 */

.hero-main {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(288px, .96fr);
  gap: clamp(22px, 2.6vw, 40px);
  /* stretch：文案列与精选卡等高，文案内部再用 space-between 把
     eyebrow/标题/摘要（上）、数据（中）、按钮（下）撑满整列。
     旧层把 .hero-copy 设成 justify-content:center，会让文案块悬在
     列中间、上下各留一截空白（用户截图反馈的"很多留白"）。 */
  align-items: stretch;
}

.hero-copy {
  position: relative;
  /* 与左栏/精选卡等高：标题块贴顶，操作按钮压到底（与精选卡的 View product 对齐），
     中间只留一段呼吸，而不是上下各留一截空白。 */
  justify-content: space-between;
}
.hero-copy-lead { display: flex; flex-direction: column; }
.hero-copy-lead > .eyebrow { margin-bottom: 12px; }
/* 底部单元：数据 + 主行动按钮贴底，与精选卡的 View product 形成一条基准线 */
.hero-copy-foot { display: flex; flex-direction: column; gap: 18px; }
.hero-copy-foot .catalog-stats { margin: 0; }
/* 精选卡按自身高度贴顶，不被 stretch 拉长 */
.hero-pick { align-self: start; }
.home-hero h1 { margin-bottom: 16px; }

.hero-summary,
.hero-copy > p:not(.eyebrow):first-of-type {
  max-width: 620px;
  font-size: 17px;
  line-height: 1.68;
  color: var(--sf-ink-soft);
}

/* 商品数 / 类目数：内联数据条，用粗体数字承担视觉重点 */
.catalog-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 24px 0 28px;
  padding: 0;
}
.catalog-stats strong {
  color: var(--sf-ink);
  font-size: 26px;
  font-weight: 850;
  letter-spacing: -.02em;
}
.catalog-stats span { color: var(--sf-muted); font-size: 13.5px; font-weight: 600; }
.catalog-stats span + strong { margin-left: 16px; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* 右侧推荐商品卡 */
.hero-pick {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 14px;
  background: var(--sf-soft);
  border: 1px solid var(--sf-line);
  /* 旧层用 !important 把卡片圆角锁成 4px、阴影锁成 none，这里必须同样提权才能接管 */
  border-radius: var(--sf-radius-lg) !important;
  box-shadow: var(--sf-shadow-sm) !important;
}
.hero-pick .product-media {
  margin: 0;
  border: 0;
  border-radius: var(--sf-radius);
  background: var(--sf-surface);
}
.hero-pick .product-media img {
  /* 高度让精选卡与左栏（12 行 ≈640px）基本等高：右侧不再比左栏矮一截，
     也不会高出一段把文案列拉长、在文案内部留下空洞 */
  height: 225px;
  width: 100%;
  object-fit: contain;
  display: block;
  margin: auto;
  padding: 12px;
}
.hero-pick .product-media figcaption {
  padding: 0 12px 10px;
  color: var(--sf-muted);
  font-size: 11.5px;
  text-align: center;
}
.hero-pick-details {
  margin-top: 12px;
  padding: 16px 8px 6px;
  border-top: 1px solid var(--sf-line);
}
.hero-pick-details h2 { margin: 6px 0 10px; font-size: 20px; }
.hero-pick-details .price { margin: 0 0 8px; font-size: 22px; }
.hero-pick-details .button { margin-top: 14px; width: 100%; }

/* --------------------------------------------------------------------------
   2. 区块与区块标题
   -------------------------------------------------------------------------- */
.band { padding-block: clamp(32px, 4vw, 56px); }

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sf-line);
}
.section-heading h2 { margin-bottom: 0; }
.section-heading .eyebrow { margin-bottom: 6px; }
.section-heading .text-link,
.section-heading .freshness { padding-bottom: 4px; white-space: nowrap; }

.category-directory-intro {
  max-width: 760px;
  margin: -6px 0 24px;
  color: var(--sf-muted);
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   3. 买家类型条（Built for resale）
   -------------------------------------------------------------------------- */
.buyer-band {
  border-top: 1px solid var(--sf-line);
  border-bottom: 1px solid var(--sf-line);
}
.buyer-intro {
  display: grid;
  grid-template-columns: minmax(240px, .72fr) minmax(320px, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: end;
  margin-bottom: 28px;
}
.buyer-intro p { margin: 0; color: var(--sf-ink-soft); font-size: 16px; }
.buyer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--sf-line);
}
.buyer-grid > div {
  padding: 22px 22px 22px 0;
  border-right: 1px solid var(--sf-line);
}
.buyer-grid > div:last-child { border-right: 0; }
.buyer-grid > div:not(:first-child) { padding-left: 22px; }
.buyer-grid strong {
  display: block;
  margin-bottom: 6px;
  color: var(--sf-ink);
  font-size: 15.5px;
  font-weight: 800;
}
.buyer-grid span { color: var(--sf-muted); font-size: 14px; line-height: 1.55; }

/* --------------------------------------------------------------------------
   4. 分类卡片栅格与目录
   -------------------------------------------------------------------------- */
.intent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
  margin: 0;
}

.home-category-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  overflow: visible !important;                 /* 子类目浮层需要溢出可见 */
}
.home-category-card:hover { z-index: 30; }

.home-category-card > a:first-child {
  display: grid;
  place-items: center;
  margin: 0 0 10px;
  padding: 8px;
  border: 1px solid var(--sf-line-soft);
  border-radius: var(--sf-radius);
  background: var(--sf-soft);
}
.home-category-card > a:first-child img {
  width: 100%;
  height: 132px;
  object-fit: contain;
  border-radius: var(--sf-radius-xs);
  background: transparent;
  transition: transform var(--sf-slow) var(--sf-ease);
}
.home-category-card:hover > a:first-child img { transform: scale(1.045); }

.home-category-card h3 { margin: 0; min-height: 0; font-size: 16.5px; }
.home-category-card h3 a { color: var(--sf-ink); }
.home-category-card h3 a:hover { color: var(--sf-accent-dark); text-decoration: none; }
.home-category-card .button { margin-top: auto; }

.category-meta { display: flex !important; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.category-meta span,
.category-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  width: auto !important;
  height: auto !important;
  padding: 5px 9px !important;
  color: var(--sf-accent-dark);
  background: var(--sf-accent-soft);
  border: 1px solid var(--sf-accent-line) !important;
  border-radius: var(--sf-pill) !important;
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.2;
}
.category-pill .icon { width: 13px; height: 13px; }

/* 子类目浮层（展开面板由旧层的内联样式定位，这里只保证视觉一致） */
.subcategory-panel { position: relative; overflow: visible !important; }
.subcategory-panel > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  color: var(--sf-ink-soft);
  background: var(--sf-surface);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius-xs);
  font-size: 12.5px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
  transition: border-color var(--sf-fast) var(--sf-ease), background var(--sf-fast) var(--sf-ease);
}
.subcategory-panel > summary::-webkit-details-marker { display: none; }
.subcategory-panel > summary::marker { content: ""; }
.subcategory-panel > summary:hover { border-color: var(--sf-accent-line); background: var(--sf-accent-soft); }
.subcategory-panel > summary strong { color: var(--sf-muted); font-weight: 750; }

/* 完整类目目录（details 折叠） */
.department-directory-more { margin-top: 22px; }
.department-directory-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  color: var(--sf-accent-dark);
  background: var(--sf-accent-soft);
  border: 1px solid var(--sf-accent-line);
  border-radius: var(--sf-radius-sm);
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}
.department-directory-more > summary::-webkit-details-marker { display: none; }
.department-directory-more > summary::marker { content: ""; }
.department-directory-more > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px;
  margin-top: 14px;
  padding: 14px;
  background: var(--sf-soft);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
}
.department-directory-more a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  color: var(--sf-ink-soft);
  font-size: 14px;
  border-radius: var(--sf-radius-xs);
}
.department-directory-more a:hover { background: var(--sf-surface); color: var(--sf-accent-dark); text-decoration: none; }
.department-directory-more a span { color: var(--sf-muted); font-size: 12.5px; }


/* --------------------------------------------------------------------------
   5. 商品栅格与卡片
   -------------------------------------------------------------------------- */
.home-product-grid {
  display: grid;
  /* 旧层在 1050/700/560 三档都用 !important 写了列数，这里同步提权 */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
  gap: 18px;
  margin: 0;
}

.card {
  padding: 14px;
  background: var(--sf-surface);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius) !important;    /* 覆盖旧层 border-radius:4px!important */
  box-shadow: var(--sf-shadow-xs) !important;   /* 覆盖旧层 box-shadow:none!important */
  transition: border-color var(--sf-base) var(--sf-ease),
    box-shadow var(--sf-base) var(--sf-ease),
    transform var(--sf-base) var(--sf-ease);
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--sf-accent-line);
  box-shadow: var(--sf-shadow-md) !important;
}

.home-product-card,
.home-category-card,
.recommendation-card { position: relative; }
/* 关闭旧层在卡片左上角画的渐变短横线 */
.home-product-card:before,
.home-category-card:before,
.recommendation-card:before { display: none; }

.home-product-card { display: flex; flex-direction: column; gap: 0; }

/* 商品卡封面：旧层用 `.home-product-card>a:first-child`（特异性 0,2,1）设置描边与内边距，
   这里用 `> a.home-product-media` 取同特异性并靠后加载取胜，避免旧的浅蓝描边残留。 */
.home-product-card > a.home-product-media {
  display: block;
  margin: 0 0 12px;
  padding: 0;
  border: 1px solid var(--sf-line-soft);
  border-radius: var(--sf-radius);
  background: var(--sf-soft);
  overflow: hidden;
}
.home-product-media img,
.home-product-card img {
  width: 100%;
  height: 172px;
  object-fit: contain;
  display: block;
  padding: 10px;
  background: transparent;
  border-radius: 0;
  transition: transform var(--sf-slow) var(--sf-ease);
}
.home-product-card:hover .home-product-media img { transform: scale(1.05); }

/* 多图堆叠容器：主图铺满，副图悬停切换（交互逻辑由内联脚本驱动） */
.product-media-stack { position: relative; display: block; width: 100%; height: 172px; }
.product-media-stack .product-primary-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-product-card .eyebrow { margin: 0 0 6px; font-size: 11px; }
.home-product-card h3 { margin: 0 0 6px; font-size: 15.5px; }
.home-product-card h3 a { color: var(--sf-ink); }
.home-product-card h3 a:hover { color: var(--sf-accent-dark); text-decoration: none; }
.home-product-card .price { margin: 0 0 4px; font-size: 17px; }
.home-product-card .mini-score { margin: 0 0 4px; font-size: 12.5px; }
.home-product-card .freshness {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--sf-muted);
}
.home-product-card .button { margin-top: auto; width: 100%; }

/* --------------------------------------------------------------------------
   6. 响应式（首页部分）
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  /* 窄下来之后左栏也不能低于 300px，否则又回到截断问题 */
  .home-hero { grid-template-columns: minmax(300px, 312px) minmax(0, 1fr); gap: 22px; }
  .hero-main { grid-template-columns: minmax(0, 1fr) minmax(248px, .84fr); gap: 20px; }
  .hero-pick .product-media img { height: 260px; }
}

/* 左栏 + 右双栏已经放不下时改为上下堆叠：分类栏仍在首屏最上方。
   （分类栏自身的响应式规则在 storefront-departments.css，那里加载更晚，
     同特异性的媒体规则必须跟在自己的基础规则之后才不会被覆盖。） */
@media (max-width: 980px) {
  .home-hero { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 1050px) {
  .buyer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buyer-grid > div:nth-child(2n) { border-right: 0; }
  .buyer-grid > div:nth-child(n + 3) { border-top: 1px solid var(--sf-line); }
  .home-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 900px) {
  .buyer-intro { grid-template-columns: 1fr; align-items: start; gap: 12px; }
  .hero-summary,
  .hero-copy > p:not(.eyebrow):first-of-type { font-size: 16px; }
}

@media (max-width: 700px) {
  .home-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .catalog-stats strong { font-size: 22px; }
  .hero-main { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 560px) {
  .home-product-grid { grid-template-columns: 1fr !important; }
  .buyer-grid { grid-template-columns: 1fr; }
  .buyer-grid > div { padding: 16px 0 !important; border-right: 0; border-top: 1px solid var(--sf-line); }
  .buyer-grid > div:first-child { border-top: 0; }
  .actions .button { width: 100%; }
  .hero-pick .product-media img { height: 200px; }
}

/* --------------------------------------------------------------------------
   7. 动效降级
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .card:hover { transform: none; }
  .home-product-card:hover .home-product-media img,
  .home-category-card:hover > a:first-child img { transform: none; }
}