/* ===== Firefly Visual · 统一头部 v2 · Products 面板（2026-11-09，按 Lincoln 裁定重做）
   核心：预览位 = 固定高度的「台面」，图不裁不拉，横竖各自保持原生比例，统一坐一条基线。
   Lincoln：「为什么没办法随着产品形态进行横竖变化……很多形态没办法改成横向图片。」
   → 规格不再是 16:9，改为「固定台面 + 原生比例 + 底部对齐」：
      竖机（Flare 0.92 / Focus 0.75 / Forge Podium 0.67）站满台面高、自然变窄；
      横机（Fortis / Fort 1.78）铺满台面宽、自然变矮；底边同一条线。
   零 JS 做法：链接保持 position:static，img 绝对定位到台面，只在 a:hover 时 opacity:1。
   13 张全部 loading="lazy"，面板默认关闭，首屏不下载。 */
.ffh-panel--prod{
  position:relative;
  padding-right:356px;         /* 台面 320 + 右边距 26 + 间隙 10 */
  min-height:246px;            /* 台面 224 + 上 14 + 地面线 8 */
  align-items:start;
}
.ffh-p{ position:static }
.ffh-p img{
  position:absolute; right:26px; top:14px;
  width:320px; height:224px;
  object-fit:contain;
  object-position:center bottom;   /* ★ 竖机站满高、横机铺满宽，底边对齐 */
  opacity:0; transition:opacity .16s ease;
  pointer-events:none; z-index:3;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.6));
}
.ffh-p:hover img,
.ffh-p:focus-visible img{ opacity:1 }

/* 台面地面线：竖机落地、横机有依托，不悬空 */
.ffh-panel--prod::after{
  content:""; position:absolute; right:26px; top:238px;
  width:320px; height:1px; z-index:2;
  background:linear-gradient(90deg,transparent,rgba(245,240,232,.16) 12%,rgba(245,240,232,.16) 88%,transparent);
}

/* 空态：未悬停时台面里写提示 */
.ffh-pv{
  position:absolute; right:26px; top:14px; width:320px; height:224px; z-index:1;
  border:1px dashed rgba(245,240,232,.14);
  display:flex; align-items:center; justify-content:center;
}
/* 台面背光：深色产品在 #0E1015 上读不出轮廓（2026-11-11 望舒，A/B 实测取 B 版）
   ⚠️ right 用 -26px 而不是 -40px：-40 时 .ffh-pv(右侧 26px) 的 ::before 会伸出容器 13px，
   1280 档 documentElement.scrollWidth = 1293 > 1280，横向溢出断言假失败。改 -26 后四档溢出 0。 */
.ffh-pv::before{
  content:""; position:absolute; left:-40px; right:-26px; top:-28px; bottom:-14px;
  background:radial-gradient(ellipse 60% 80% at 50% 90%,
    rgba(245,240,232,.075) 0%, rgba(245,240,232,.04) 45%, rgba(245,240,232,0) 72%);
  pointer-events:none; z-index:0;
}
.ffh-pv span{
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(245,240,232,.26); text-align:center; line-height:1.9;
}
/* 有悬停时隐掉空态提示（用 :has，纯 CSS，全绿） */
.ffh-panel--prod:has(.ffh-p:hover) .ffh-pv span{ opacity:0 }

@media (max-width:1279px){
  .ffh-panel--prod{ padding-right:0; min-height:0 }
  .ffh-panel--prod::after{ display:none }
  .ffh-p img, .ffh-pv{ display:none }   /* 1280 以下不显示预览，避免挤窄四列 */
  /* 桌面四列网格 min 150×4=600px，在 390 会撑出 324px 假溢出（站上有 overflow-x:hidden 遮住，
     但 scrollWidth 仍超标 → 断言假失败）。1280 以下直接摘掉桌面下拉，溢出归 0。 */
  .ffh-drop{ display:none }
}