/* 11-04 Shawn 二改：回到「灰階、滑鼠移到該品牌才顯示原色」，經銷大磚也一樣（之前大金常駐原色不一致）。
   觸控裝置沒有滑鼠 → 維持原色（否則手機永遠是灰的）。日立 logo 原廠就是黑字，滑過去看起來變化小是正常的。
   授權經銷：日立、大金（大磚）＋米多力、台達電、華菱（小磚掛「授權經銷」）*/
/* ===== 首頁「服務品牌」logo 牆（2026-11-04，fable 評估 B 方案；優力無官方檔已拿掉、加 Honeywell）
   r2（獨立評審第 1 輪）：桌機 7 欄剛好兩列、手機 3 欄最後兩顆置中、logo 依長寬比算等面積高度（--h）、
   非連結格不再上浮（看起來能點卻不能點） ===== */
.bw{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(14,minmax(0,1fr))}
.bw li{grid-column:span 2;position:relative;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;
  box-shadow:0 1px 2px rgba(20,30,45,.06),0 0 0 1px var(--line-2,#DCD5BA);min-height:64px;
  opacity:0;transform:translateY(10px) scale(.96)}
.bw-dealer{margin-top:12px}
.bw-dealer li{grid-column:span 7;min-height:80px}
.bw li a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:inherit;text-decoration:none;color:inherit;border-radius:8px}
.bw img{display:block;width:auto;height:var(--h,20px);max-width:80%;object-fit:contain;
  transition:transform .25s}
.bw-dealer img{height:24px;max-width:70%}
.bw-tag{position:absolute;right:8px;top:6px;font:500 11px/1.4 'IBM Plex Mono',monospace;letter-spacing:.06em;color:var(--sky,#2C6AA8)}
/* 進場：外層 data-reveal="fade" 掛 .is-revealed 後，子磚依 --i 每 40ms 一顆 */
.bw.is-revealed li{opacity:1;transform:none;
  transition:opacity .5s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*40ms),transform .5s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*40ms),box-shadow .2s}
@media (hover:hover){
  .bw-all li:has(a):hover::after{opacity:1;transform:none}
  /* 有連結的格子才會浮起（米多力沒有保固頁錨點，不浮） */
  .bw.is-revealed li:has(a):hover{box-shadow:0 10px 24px -12px rgba(20,30,45,.35),0 0 0 1px var(--line-2,#DCD5BA);transform:translateY(-2px);transition:transform .2s,box-shadow .2s}
}
.bw li a:focus-visible{outline:2px solid var(--sky,#2C6AA8);outline-offset:3px}
/* 品牌格右下角小字「保固」：hover／focus 才出現，提示點了會去保固頁 */
.bw-all li:has(a)::after{content:'保固 →';position:absolute;right:8px;bottom:5px;font:500 11px/1 var(--f-sans,sans-serif);color:var(--sky,#2C6AA8);
  opacity:0;transform:translateY(3px);transition:opacity .2s,transform .2s;pointer-events:none}
.bw-all li:focus-within::after{opacity:1;transform:none}
.bw-note{margin-top:10px!important;font-size:13px}
/* 中寬：7 欄放不下時改 4 欄（14＝4×3＋2，最後兩顆置中） */
@media (max-width:1100px){
  .bw{grid-template-columns:repeat(8,minmax(0,1fr))}
  .bw-dealer li{grid-column:span 4}
  .bw-all li:nth-child(13){grid-column:3/span 2}
}
/* 手機：3 欄（14＝3×4＋2，最後兩顆置中） */
@media (max-width:768px){
  .bw{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
  .bw li{min-height:56px}
  .bw-dealer li{grid-column:span 3;min-height:64px}
  .bw-all li:nth-child(13){grid-column:2/span 2}
  .bw img{height:calc(var(--h,20px)*.9)}
  .bw-dealer img{height:22px}
}
@media (prefers-reduced-motion:reduce){
  .bw li,.bw.is-revealed li{opacity:1;transform:none;transition:opacity .3s}
  .bw img{transition:none}
}
/* 米多力連到吊隱式除濕機頁，不是保固頁 */
.bw-all li:has(a[href^="ducted-dehumidifier"])::after{content:'除濕機 →'}
.bw-all .bw-tag{right:6px;top:4px;font-size:10px}
/* 有滑鼠的裝置：灰階，滑過／鍵盤聚焦才回原色 */
@media (hover:hover){
  .bw img{filter:grayscale(1);opacity:.8;transition:filter .25s,opacity .25s,transform .25s}
  .bw li:hover img,.bw li:focus-within img{filter:none;opacity:1}
}
/* 日立：官網 logo 檔是黑字，但品牌紅是 #C3002F（hitachiaircon.com/tw 主色，2026-11-04 查），Shawn 指定用純紅字 → hitachi.svg 已改成 #C3002F */