/* ==========================================================================
   ZUZOO — 以 inline SVG mask 取代已停用的 Font Awesome
   2026-09-12 關閉 Helix Template Options 的 Font Awesome 後，
   模板 CSS 中仍以 :after + FA 字型繪製的箭頭會變空白，這裡補回來。
   用 mask + currentColor，顏色／hover 狀態沿用原本模板樣式。
   ========================================================================== */

:root{
  --zz-chev-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
  --zz-chev-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --zz-chev-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* --- 1. 回到頂部按鈕（原 fas fa-angle-up，82 頁） -------------------------- */
.sp-scroll-up .fa-angle-up{
  display:block;
  width:100%;
  height:100%;
  background-color:currentColor;
  -webkit-mask:var(--zz-chev-up) center / 16px 16px no-repeat;
          mask:var(--zz-chev-up) center / 16px 16px no-repeat;
}

/* --- 2. 桌機主選單下拉箭頭（原 \f107 angle-down） ------------------------- */
body.ltr .sp-megamenu-parent>li.sp-has-child>a:after,
body.ltr .sp-megamenu-parent>li.sp-has-child>span:after{
  content:"";
  display:inline-block;
  width:1em;
  height:1em;
  vertical-align:-.15em;
  /* inline-block 會從選單連結繼承 line-height:60px，使自身 baseline 落在盒子下緣約 21px 處、
     整個盒子被推到行框頂端。overflow 非 visible 時 baseline 改採下邊緣（CSS 規範），對齊才正確。 */
  overflow:hidden;
  line-height:1;
  margin-left:7px;
  background-color:currentColor;
  -webkit-mask:var(--zz-chev-down) center / .7em .7em no-repeat;
          mask:var(--zz-chev-down) center / .7em .7em no-repeat;
}

/* --- 2b. 下拉選單內的次層箭頭（原 \f105 angle-right） --------------------- */
body.ltr .sp-megamenu-parent .sp-dropdown .sp-dropdown-items .sp-has-child>a:after{
  content:"";
  display:inline-block;
  width:1em;
  height:1em;
  vertical-align:-.15em;
  /* inline-block 會從選單連結繼承 line-height:60px，使自身 baseline 落在盒子下緣約 21px 處、
     整個盒子被推到行框頂端。overflow 非 visible 時 baseline 改採下邊緣（CSS 規範），對齊才正確。 */
  overflow:hidden;
  line-height:1;
  margin-left:7px;
  background-color:currentColor;
  -webkit-mask:var(--zz-chev-right) center / .7em .7em no-repeat;
          mask:var(--zz-chev-right) center / .7em .7em no-repeat;
}

/* --- 3. 手機版 offcanvas 選單：收合狀態（原 \f105 angle-right） ----------- */
.offcanvas-menu .menu-toggler::after{
  content:"";
  display:block;
  width:1em;
  height:1em;
  background-color:currentColor;
  -webkit-mask:var(--zz-chev-right) center / .8em .8em no-repeat;
          mask:var(--zz-chev-right) center / .8em .8em no-repeat;
}

/* --- 3b. 手機版 offcanvas 選單：展開狀態（原 \f107 angle-down） ----------- */
.offcanvas-menu li.menu-parent.menu-parent-open>a>.menu-toggler::after,
.offcanvas-menu li.menu-parent.menu-parent-open>.menu-separator>.menu-toggler::after,
.offcanvas-menu li.menu-parent.menu-parent-open>.nav-header>.menu-toggler::after{
  -webkit-mask-image:var(--zz-chev-down);
          mask-image:var(--zz-chev-down);
}