/*!
 * category-flyout.css —— 目录页「产品与服务类目」侧栏的二级/三级悬停浮层
 * ---------------------------------------------------------------------------
 * 配套 category-flyout.js。参考稿是阿里风格的「一级行 → 右侧大面板」，本文件只负责
 * 两件事：
 *   一、把一级行改成两行式（名称 + 一行「二级代表项」小字），对齐参考稿的行样式
 *   二、面板本身的皮（标题 / 英文式副标题 / 右侧红色「查看全部」/ 二级分组 + 三级药丸）
 *
 * 配色一律走站点既有变量（--c-primary #c93628 / --c-line / --c-ink-*），
 * 药丸的 hover 也用站点既有的 #fff0ea 底 + 主色字，和侧栏现在的 hover 完全同款。
 *
 * ⚠️ 侧栏在 ≤640px 会变成两列网格、且 `.category-item i` 被隐藏（bundle css 里就有），
 *    所以行内徽章只在 ≥641px 生效；面板本身由 js 按「视口宽 + 右侧剩余空间」决定出不出。
 *
 * 移除方式：删 index.html 里 category-flyout.css / .js 两行即可，侧栏立刻回原样。
 */

/* ==========================================================================
 * 一、一级行：两行式（图标 | 名称 + 二级代表项 | ›）
 * ========================================================================== */
@media (min-width: 641px) {
  .category-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 18px;
    align-items: center;
    row-gap: 1px;
    /* 多了一行小字，内边距回收一点，别让 62 行整体变高太多 */
    padding: 8px 10px;
  }
  .category-item > span {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: auto;
  }
  .category-item > b {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  .category-item > i {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  /* 二级代表项（由 js 按接口数据写入，最多 2 个二级名） */
  .category-item > .cfly-badge {
    grid-column: 2;
    grid-row: 2;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 500;
    color: #ab9f92;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 长尾渐隐：比突然断在半个词上干净。文本没溢出时这段是透明的，看不出差别 */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 16px), transparent);
  }
  .category-item.active > .cfly-badge,
  .category-item:hover > .cfly-badge {
    color: #d4756a;
  }
}

/* ==========================================================================
 * 二、浮层面板
 * ========================================================================== */
.cfly-panel {
  position: fixed;
  z-index: 70;                 /* < header 的 1000，不能盖住顶栏 */
  display: none;
  max-height: min(78vh, 700px);
  padding: 0 22px 20px;
  background: #fff;
  border: 1px solid var(--c-line);
  /* ⚠️ 左边两角必须是 0 圆角 + 去掉左边框 —— 用户 2026-09-24 明确要求
     「一级菜单和右侧的菜单别留间隙」：
       · 留 14px 圆角 → 左上/左下会露出页面底色的弧形缺口，看着就是一道缝；
       · 留左边框 → 和侧栏的右边框贴在一起变成 2px 粗线，也是一道缝。
     左边缘做成直线、和侧栏共用侧栏自己那条右边框，两块才真正连成一片。 */
  border-left: 0;
  border-radius: 0 14px 14px 0;
  /* ⚠️ 投影必须往右偏（正的 x 偏移），否则左侧那段会盖到侧栏上，
     在接缝处压出一道暗边 —— 那同样会被看成「有间隙」。 */
  box-shadow:
    12px 18px 46px -20px rgba(38, 33, 29, .34),
    5px 4px 12px -7px rgba(38, 33, 29, .12);
  overflow: auto;
  overscroll-behavior: contain;
}
.cfly-panel.on {
  display: block;
  animation: cfly-in .16s ease-out;
}
/* 从侧栏方向轻轻推出来，不弹、不跳 */
@keyframes cfly-in {
  from { opacity: 0; transform: translateX(-7px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cfly-panel.on { animation: none; }
}
.cfly-panel::-webkit-scrollbar { width: 9px; }
.cfly-panel::-webkit-scrollbar-track { background: transparent; }
.cfly-panel::-webkit-scrollbar-thumb {
  background: #e2d8cc;
  border-radius: 99px;
  border: 3px solid #fff;
}
.cfly-panel::-webkit-scrollbar-thumb:hover { background: #d3c5b5; }

/* 头部：一级标题 + 所属大类 + 右侧「查看全部」。
   ⚠️ 吸顶（用户 2026-09-24 定稿「回到区块上面」之后加）：面板贴区块顶 → 变高 → 二级分组
   可能到 15 组、必须内部滚动，标题跟着滑走的话，滚到下半屏就不知道自己在看哪个类目了。
   负 margin 把它拉成通栏，白色底盖住从下面滚过去的药丸。 */
.cfly-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0 -22px;
  padding: 18px 22px 14px;
  background: #fff;
  border-bottom: 1px solid var(--c-line);
}
.cfly-title { min-width: 0; }
.cfly-title > b {
  display: block;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--c-ink);
}
/* 参考稿这里是英文副标题；我们接口没有英文字段，就用「所属大类」占这个位，
   既补上了同样的视觉节奏，又是真信息（用户一看就知道这属于工业品还是消费品） */
.cfly-title > span {
  display: block;
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  color: #b3a698;
}
.cfly-all {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: -4px -6px 0 0;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: var(--c-primary);
  white-space: nowrap;
  transition: background .15s;
}
.cfly-all:hover { background: #fff0ea; }
/* 箭头单独成元素才能做位移动效（文案在 js 里，见 ARROW） */
.cfly-all > i {
  font-style: normal;
  transition: transform .16s ease-out;
}
.cfly-all:hover > i { transform: translateX(3px); }

/* 主体：一行一个二级分组。
   组与组之间用一条极淡的虚线分隔 —— 面板变高之后同屏能看到 10+ 组，
   光靠标签列的竖向节奏已经不够，密排的分组行容易看串行；
   虚线（而不是实线）足够轻，不会把 15 组的面板切碎。 */
.cfly-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 14px;
}
/* 二级名自成一列右对齐到同一竖线，三级药丸从同一 x 起 —— 参考稿就是这个对齐方式。 */
.cfly-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 16px;
  align-items: baseline;
}
.cfly-row + .cfly-row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #f1e9df;
}
.cfly-key {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--c-primary);
  white-space: nowrap;
  transition: color .14s;
}
.cfly-key:hover { color: var(--c-primary-deep); }
.cfly-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.cfly-chip {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  background: #f5f1eb;
  font-size: 12px;
  line-height: 1.45;
  color: #5d5349;
  white-space: nowrap;
  transition: background .14s, color .14s, box-shadow .14s;
}
.cfly-chip:hover {
  background: #fff0ea;
  color: var(--c-primary);
  box-shadow: 0 1px 5px -1px rgba(201, 54, 40, .28);
}

/* 吸底提示：只在内容被面板高度截断时才出现（js 控制 display）。
   ⚠️ 必须有 —— 面板上边缘改成跟一级栏目持平之后，靠下的行只剩 ~200px 高，
   不提示的话用户会以为「这个类目就只有这三组」。负 margin 用来破开面板内边距，
   做成一条通栏。 */
.cfly-more {
  position: sticky;
  bottom: -1px;
  margin: 13px -22px -20px;
  padding: 9px 22px 11px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .86), #fff 46%);
  border-top: 1px solid var(--c-line);
  font-size: 11.5px;
  letter-spacing: .02em;
  color: #9a8e82;
  text-align: center;
}

/* ==========================================================================
 * 三、面板展开时，把侧栏右侧两角压成直角
 * ==========================================================================
 * 侧栏本身是 border-radius:15px 的圆角卡片。面板的上边缘永远和区块顶齐平，
 * 而侧栏右上那 15px 圆弧会在接缝处露出一小块页面底色 —— 明明 gap 已经是 0，
 * 看着却仍像有一道缝。所以右上角一直削平。
 * ⚠️ 右下角只在 js 量到「面板够到了侧栏底边」（<html> 同时带 .cfly-over）时才削：
 *    面板比侧栏矮的时候（首屏实测只有 284px），右下角旁边空无一物，削平了会跟左下的
 *    圆角不对称。js 展开时挂类、收起立刻摘掉，所以侧栏平时还是原来的圆角。
 * ⚠️ 只削角，不动 border-right —— 面板压住的那一段本来就看不见它，而面板没覆盖到的
 *    上下两段还需要它来收边，抹掉反而让侧栏轮廓断开。 */
html.cfly-open .category-aside {
  border-top-right-radius: 0;
}
html.cfly-open.cfly-over .category-aside {
  border-bottom-right-radius: 0;
}

/* ≤640px：侧栏已是两列网格，没有悬停浮层的位置 */
@media (max-width: 640px) {
  .cfly-panel { display: none !important; }
  /* ⚠️ 这个必须写：上面的两行式只在 ≥641px 生效，窄屏 `.category-item` 仍是 flex，
     我追加的 <small> 会变成第 4 个 flex 项（`i` 在那里是 display:none），
     而且没有省略号，长文本会把行高撑爆。 */
  .category-item > .cfly-badge { display: none !important; }
}