@charset "UTF-8";
/* ==========================================================================
   DPJ Wholesale · 前台主题 · 首屏左侧分类栏
   --------------------------------------------------------------------------
   首页首屏左栏的商品分类模块：一级分类行式列表 + 二级/三级右展浮层。
   从 storefront-home.css 拆出（该文件有 600 行上限），在 storefront-home.css
   之后加载，只覆盖与首屏左栏相关的选择器。

   层级表达：
   - 一级：左栏每一行（缩略图 + 名称 + 计数 + 展开按钮）
   - 二级：行右侧浮层里的卡片列表，带商品数徽标
   - 三级：二级卡片下方缩进列表，左侧细竖线标识从属关系
   ========================================================================== */

/* --------------------------------------------------------------------------
   4b. 首屏左侧分类栏（一级行内列表 + 二级/三级右展浮层）
   --------------------------------------------------------------------------
   与下方分类栅格共用同一套卡片标记（.home-category-card），这里只把它压缩成
   单列行式列表：一级分类一行一个（缩略图 + 名称 + 计数 + 展开按钮），
   二级/三级放到右边的浮层里，因此首屏纵向只需要 12 行的高度就能放下整棵目录。
   -------------------------------------------------------------------------- */
.hero-departments {
  position: relative;
  z-index: 2;                                   /* 浮层要盖住右栏内容 */
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--sf-surface);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius-lg);
  box-shadow: var(--sf-shadow-xs);
  overflow: visible;                            /* 右展浮层不能被裁剪 */
}

.hero-departments-head { display: flex; flex-direction: column; gap: 2px; }
.hero-departments-head .eyebrow { margin: 0; font-size: 10.5px; }
.hero-departments-head h2 { margin: 0; font-size: 17px; }
.hero-departments-note {
  margin: 0;
  color: var(--sf-muted);
  font-size: 10.5px;
  line-height: 1.35;
}

/* 一级列表：覆盖栅格，改成单列紧凑行 */
.hero-departments .intent-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  align-items: start;
}

.hero-departments .home-category-card {
  display: grid;
  /* 名称列必须放得下最长的一级分类名（Tools & Home Improvement / Cell Phones &
     Accessories 实测约 172px @13px），否则会被省略号截断。
     展开按钮压到 34px 就是为了把这 22px 让给名称列。 */
  grid-template-columns: 28px minmax(0, 1fr) auto;
  grid-template-areas:
    "thumb name toggle"
    "thumb meta toggle";
  gap: 1px 8px;
  align-items: center;
  min-height: 36px;                        /* +1px 透明描边 = 38px 行高 */
  padding: 3px 8px;
  /* 默认无描边无阴影，靠 hover/focus 显形，避免 12 行描边堆成噪声 */
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--sf-radius-sm) !important;
  box-shadow: none !important;
}
.hero-departments .home-category-card:hover,
.hero-departments .home-category-card:focus-within {
  background: var(--sf-accent-soft);
  border-color: var(--sf-accent-line);
  transform: none;                              /* 行式列表不做位移，否则整列会抖动 */
  box-shadow: none !important;
}
.hero-departments .home-category-card > a:first-child {
  grid-area: thumb;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 2px;
  border: 1px solid var(--sf-line-soft);
  border-radius: var(--sf-radius-xs);
  background: var(--sf-soft);
}
.hero-departments .home-category-card > a:first-child img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
}
.hero-departments .home-category-card:hover > a:first-child img { transform: none; }
.hero-departments .home-category-card h3 {
  grid-area: name;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.2;
  /* 超长类目名截断，保证每行等高、按钮列对齐 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero-departments .home-category-card .category-meta {
  grid-area: meta;
  margin: 0;
  gap: 4px;
  /* 行式列表里必须保持单行：一旦换行每行会多出 20px，12 行就超出首屏 */
  flex-wrap: nowrap;
  overflow: hidden;
}
.hero-departments .home-category-card .category-pill,
.hero-departments .home-category-card .category-meta span {
  padding: 0 !important;
  color: var(--sf-muted);
  background: transparent;
  border-color: transparent !important;
  /* 旧层用 !important 锁了 11px/1.15，这里同样提权 */
  font-size: 10.5px !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}
.hero-departments .home-category-card .category-pill .icon { display: none; }
/* 子类目数量已由右侧展开按钮上的徽标承担，行内不再重复一遍。
   旧层把 .category-pill 的 display 锁成了 inline-flex!important，这里同样要提权。 */
.hero-departments .home-category-card .category-pill-children { display: none !important; }
/* 整行本身就是入口，去掉重复的"Browse category"按钮 */
.hero-departments .home-category-card > .button { display: none; }

.hero-departments .home-category-card .subcategory-panel {
  grid-area: toggle;
  /* 面板只负责折叠状态与展开按钮；浮层是它的兄弟节点（见渲染层注释） */
  position: static;
  /* 旧层给面板留了 margin:4px 0 12px，行式列表必须清零，否则每行凭空高 16px */
  margin: 0;
  border: 0;
  background: none;
}
.hero-departments .home-category-card { position: relative; }

/* 展开态：旧层是靠 `.subcategory-panel[open] .subcategory-flyout` 选的，
   浮层移出 <details> 之后改用 :has() 保持同样的显隐行为 */
.hero-departments .home-category-card:has(.subcategory-panel[open]) .subcategory-flyout {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.hero-departments .subcategory-panel > summary {
  gap: 3px;
  padding: 3px 7px;
  border-radius: var(--sf-pill) !important;
  font-size: 10.5px;
  /* 固定窄宽度：名称列需要 172px 才不截断，按钮每省 1px 就直接变成名称宽度 */
  min-width: 34px;
  justify-content: center;
}
/* "Subcategories" 文案视觉隐藏，只留数字徽标；标签仍保留给读屏 */
.hero-departments .subcategory-panel > summary .subcategory-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 二级/三级：向右展开的浮层，不再把卡片撑高 */
.hero-departments .subcategory-flyout {
  left: calc(100% + 8px);
  right: auto;
  top: 0;
  /* 宽度要放得下"Computers & Accessories""Headphones, Earbuds & Accessories"
     这类长二级名 + 商品数徽标，否则二级名会被省略号截断，层级反而看不清 */
  width: min(620px, 50vw);
  max-height: min(74vh, 620px);
  overflow-y: auto;
  padding: 14px;
  border-radius: var(--sf-radius) !important;
  box-shadow: var(--sf-shadow-lg) !important;
}
.hero-departments .subcategory-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 6px;
  padding: 0 !important;
}
.hero-departments .subcategory-item { min-width: 0; }
.hero-departments .subcategory-list > .subcategory-item > a {
  padding: 7px 9px;
  border-color: var(--sf-line-soft);
  background: var(--sf-surface);
}
.hero-departments .subcategory-list > .subcategory-item > a:hover {
  border-color: var(--sf-accent-line);
  background: var(--sf-accent-soft);
}
/* 三级分类：缩进 + 左侧细竖线表达层级，字号再降一档 */
.hero-departments .subcategory-sublist {
  display: grid;
  gap: 1px;
  margin: 4px 0 2px 9px;
  padding: 0 0 0 9px;
  border-left: 2px solid var(--sf-accent-line);
  list-style: none;
}
.hero-departments .subcategory-sublist a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 3px 4px;
  color: var(--sf-ink-soft);
  background: transparent;
  border: 0;
  border-radius: var(--sf-radius-xs);
  text-decoration: none;
}
.hero-departments .subcategory-sublist a:hover {
  color: var(--sf-accent-dark);
  background: var(--sf-accent-soft);
  transform: none;
  box-shadow: none;
  text-decoration: none;
}
.hero-departments .subcategory-sublist .subcategory-name {
  font-size: 11.5px;
  font-weight: 600;
}
.hero-departments .subcategory-sublist .count-badge {
  min-width: 0;
  padding: 0;
  color: var(--sf-muted);
  background: transparent;
  font-size: 10.5px;
}

/* 底部：折叠目录开关 + 全站搜索并排成一行，省下原来两行的高度 */
.hero-departments-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--sf-line);
}
.hero-departments .department-directory-more {
  margin: 0;
  border-top: 0;
  border-bottom: 0;
  padding: 0;
}
.hero-departments .department-directory-more > summary {
  justify-content: flex-start;
  width: 100%;
  padding: 5px 8px;
  font-size: 12px;
}
/* 折叠目录自己滚动，避免 40+ 个部门把左栏拉得比首屏还高 */
.hero-departments .department-directory-more > div {
  grid-template-columns: 1fr;
  max-height: 264px;
  overflow-y: auto;
  gap: 2px;
  margin-top: 8px;
  padding: 8px;
}
.hero-departments .department-directory-more a { padding: 5px 8px; font-size: 12.5px; }

.hero-departments-all {
  display: block;
  padding: 5px 8px;
  border: 1px solid var(--sf-line-soft);
  border-radius: var(--sf-radius-xs);
  color: var(--sf-accent-dark);
  font-size: 12px;
  font-weight: 750;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
}
.hero-departments-all:hover { color: var(--sf-ink); border-color: var(--sf-accent-line); }

/* --------------------------------------------------------------------------
   响应式：分类栏自身
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .hero-departments { padding: 12px; }
  /* 窄屏名称列只有 171px，字号降半号留出截断余量 */
  .hero-departments .home-category-card h3 { font-size: 12px; }
}

/* 退回单栏后左栏占满整行，右展浮层会溢出视口 —— 改为在本行下方展开。
   一级列表保持单列：卡片占满整栏宽度，浮层的 left/right:0 才等于"整栏宽"，
   在双列排布下浮层只会覆盖半栏、看起来像错位。 */
@media (max-width: 980px) {
  .hero-departments { order: -1; }
  .hero-departments .subcategory-flyout {
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    width: auto;
    /* 旧层在 700px 以下塞了 min-width:min(86vw,320px)，窄屏会把浮层撑出视口 */
    min-width: 0;
    max-height: 62vh;
  }
}

@media (max-width: 700px) {
  .hero-departments .subcategory-list { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .hero-departments { padding: 12px; }
  .hero-departments .intent-grid { grid-template-columns: 1fr; }
  .hero-departments .home-category-card .category-meta { display: none !important; }
  .hero-departments-foot { grid-template-columns: 1fr; gap: 6px; }
  .hero-departments-all { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-departments .home-category-card,
  .hero-departments .subcategory-list > .subcategory-item > a { transition: none; }
}