/**
 * 手機選單子項目收合（對應 cms-nav-mobile.js，全系統共用）。
 * 只在 ≤1023px 生效；桌機完全不碰各版型自己的下拉。
 * html.cms-navm--collapse：有收合 → 子清單預設藏起來，項目右邊一顆箭頭鈕
 * html.cms-navm--open    ：沒有收合 → 什麼都不加，只處理陰影
 * html.cms-navm--shadow  ：後台勾了「保留陰影」才留；預設把抽屜裡的陰影全部拿掉（老大：手機選單陰影太多）
 */
@media (max-width: 1023px) {
    /* 陰影：抽屜與子清單一律拿掉（各版型的 class 都列進來） */
    html.cms-navm:not(.cms-navm--shadow) .hz-nav, html.cms-navm:not(.cms-navm--shadow) .hz-nav .nav-sub, html.cms-navm:not(.cms-navm--shadow) .hz-nav-head,
    html.cms-navm:not(.cms-navm--shadow) .site-nav .nav-sub, html.cms-navm:not(.cms-navm--shadow) .cc-nav .nav-sub,
    html.cms-navm:not(.cms-navm--shadow) .mk-nav .nav-sub, html.cms-navm:not(.cms-navm--shadow) .sp-nav .sp-nav-sub, html.cms-navm:not(.cms-navm--shadow) .bl-nav .nav-sub,
    html.cms-navm:not(.cms-navm--shadow) .bq-menu--drawer .bq-sub, html.cms-navm:not(.cms-navm--shadow) .ol-list--drawer .ol-sub,
    html.cms-navm:not(.cms-navm--shadow) .hc-drawer .hc-sub { box-shadow: none !important; }

    /* 有收合：子清單預設藏起來 */
    html.cms-navm--collapse .cms-navm-item:not(.cms-navm-open) > .nav-sub,
    html.cms-navm--collapse .cms-navm-item:not(.cms-navm-open) > .sp-nav-sub,
    html.cms-navm--collapse .cms-navm-item:not(.cms-navm-open) > .bq-sub,
    html.cms-navm--collapse .cms-navm-item:not(.cms-navm-open) > .ol-sub,
    html.cms-navm--collapse .cms-navm-item:not(.cms-navm-open) > .hc-sub,
    html.cms-navm--collapse .cms-navm-item:not(.cms-navm-open) > .sf-sub { display: none !important; }
    html.cms-navm--collapse .cms-navm-item { position: relative; }
    /* market／storefront 手機把子清單預設 display:none，展開時要蓋回來 */
    html.cms-navm--collapse .cms-navm-item.cms-navm-open > .nav-sub,
    html.cms-navm--collapse .cms-navm-item.cms-navm-open > .sf-sub { display: block !important; }
    /* ── 版型自己的展開鈕：接管之後藏起來，不然會有兩顆箭頭 ──────────────
       （2026-09-22 第二階段之二。跟下面那段藏 caret 是同一件事：
         我們接手了這個控制項，就要把被取代的那一顆收掉。
         只在**我們真的接管了**（.cms-navm-item）時才藏，沒接管的站台完全不受影響。） */
    html.cms-navm--collapse .cms-navm-item .sf-tg,
    html.cms-navm--collapse .cms-navm-item .nav-sub-tg { display: none !important; }
    /* biolab 的純分類標題把箭頭畫在 .nav-parent 的 ::after（不是元素），一樣會跟我們的重複。
       只在接管了的項目上藏——market 的 .nav-parent 沒有被接管，完全不受影響。 */
    html.cms-navm--collapse .cms-navm-item .nav-parent::after { display: none !important; }
    /* 項目文字右邊留出按鈕的位置（各版型連結 class 不同，直接對第一個子元素） */
    html.cms-navm--collapse .cms-navm-item > a:first-child, html.cms-navm--collapse .cms-navm-item > span:first-child,
    html.cms-navm--collapse .cms-navm-item > div:first-child { padding-right: 56px !important; }
    /* 版型自己畫的小箭頭（caret）跟這顆重複，藏掉 */
    html.cms-navm--collapse .cms-navm-item > a > .bq-caret, html.cms-navm--collapse .cms-navm-item > span > .bq-caret,
    html.cms-navm--collapse .cms-navm-item > a > .ol-caret, html.cms-navm--collapse .cms-navm-item > span > .ol-caret,
    html.cms-navm--collapse .cms-navm-item > .hc-caret, html.cms-navm--collapse .cms-navm-item > a > .hc-caret { display: none !important; }
    html.cms-navm--collapse .cms-navm-item > a > .sp-nav-arrow { display: none !important; }
    html.cms-navm--collapse .cc-nav .cms-navm-item > a:first-child { padding-left: 56px !important; }   /* centered 是置中選單，只補右邊字會偏左 */   /* split 的 → 跟我們的箭頭擠在一起 */
    html.cms-navm--collapse .cms-navm-tg {
        position: absolute; right: 6px; top: 4px; width: 44px; height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
        border: 0; padding: 0; background: none; color: inherit; cursor: pointer; opacity: .75;
        -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
    }
    html.cms-navm--collapse .cms-navm-tg:hover, html.cms-navm--collapse .cms-navm-tg:focus-visible { opacity: 1; }
    html.cms-navm--collapse .cms-navm-tg:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; border-radius: 50%; }
    html.cms-navm--collapse .cms-navm-tg svg { transition: transform .25s ease; }
    html.cms-navm--collapse .cms-navm-open > .cms-navm-tg svg { transform: rotate(180deg); }
    @media (prefers-reduced-motion: reduce) { html.cms-navm--collapse .cms-navm-tg svg { transition: none; } }

    /* ── 整列觸發（2026-09-22 第二版，老大：箭頭太小會誤觸）──────────────
       JS 把 click 綁在整個 li 上，這裡只負責讓「看起來可以點」跟「點得到」一致：
       ・整列給手指的游標與取消點擊高亮
       ・父項的連結／文字撐滿整列，不要只有文字那幾個字可以點
       ⚠️ 不要在這裡對 .cms-navm-tg 設 pointer-events:none —— 它是鍵盤與螢幕閱讀器
          唯一的展開控制項（aria-expanded 在它身上），拿掉就不能用鍵盤操作了。 */
    html.cms-navm--collapse .cms-navm-row { cursor: pointer; -webkit-tap-highlight-color: transparent; }
    html.cms-navm--collapse .cms-navm-row > a:first-child, html.cms-navm--collapse .cms-navm-row > span:first-child,
    html.cms-navm--collapse .cms-navm-row > div:first-child { display: block; }

    /* 父層入口（子清單第一項）：稍微加重，讓人看得出「這個就是上一層那一頁」 */
    html.cms-navm--collapse .cms-navm-parent > a { font-weight: 650; }
}
@media (min-width: 1024px) {
    .cms-navm-tg { display: none !important; }
    /* 父層入口只有手機需要（桌機的父項連結本來就點得到，多一條是贅字，
       而且會憑空改變桌機下拉選單的內容）。腳本是載入時就注入，所以用 CSS 藏，
       縮放視窗或轉螢幕方向都正確。
       ⚠️ 選擇器要夠精確才蓋得過版型：horizon 的 `.hz-nav .nav-sub .nav-item{display:block}`
          是 (0,3,0)，只寫 `html.cms-navm .cms-navm-parent`（0,2,1）會輸。
          這裡用 (0,3,1) 贏過它——藏的是我們自己注入的東西，不是去蓋版型的設計，
          所以用特異度解決就好，不要動 !important。 */
    html.cms-navm .cms-navm-item .cms-navm-parent { display: none; }
}