/* ============================================================
   MEGA MENU 樣式層 —— 純 CSS，無外部依賴
   命名一律 mm- 開頭，避免撞到既有站台的樣式
   ============================================================ */

.mm-root {
  --mm-ink:      #0a0a0a;   /* 主要文字 */
  --mm-ink-2:    #5f5f5f;   /* 次要文字 */
  --mm-line:     #e6e6e6;   /* 分隔線 */
  --mm-surface:  #ffffff;   /* 面板底色 */
  --mm-tile:     #f6f6f6;   /* 縮圖底色。用線稿自帶的紙面色，
                              線稿 contain 之後上下留白才會跟框接成同一片 */
  --mm-radius:   18px;
  --mm-ease:     cubic-bezier(.22, .61, .36, 1);

  position: sticky;
  top: 0;
  z-index: 900;
  font-family: -apple-system, "SF Pro TC", "PingFang TC",
               "Noto Sans TC", "Helvetica Neue", Arial, sans-serif;
  color: var(--mm-ink);
}

/* ---------- 頂列 ---------- */
.mm-bar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 18px 32px;
  background: var(--mm-surface);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--mm-ease);
}
.mm-root.is-open .mm-bar { border-bottom-color: transparent; }

.mm-logo {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .06em;
  text-decoration: none;
  color: inherit;
  justify-self: start;
  display: flex;
  align-items: center;
}
/* 有圖片 logo 時走這條；沒有 logoSrc 就還是純文字，兩種都支援 */
.mm-logo__img {
  display: block;
  height: 22px;
  width: auto;
}
@media (max-width: 900px) {
  .mm-logo__img { height: 19px; }
}

.mm-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: center;
}

.mm-nav__btn {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--mm-ink);
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .22s var(--mm-ease), color .22s var(--mm-ease);
}
.mm-nav__btn:hover { background: #f1f1f1; }
/* 純連結型主選單（不開面板）長得跟按鈕一樣，去掉瀏覽器預設底線 */
.mm-nav__btn--link { text-decoration: none; display: inline-block; }
.mm-nav__btn[aria-expanded="true"] {
  background: var(--mm-ink);
  color: #fff;
}

.mm-tools {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-self: end;
}
.mm-tools button,
.mm-tools a {
  appearance: none; border: 0; background: transparent;
  padding: 4px; cursor: pointer; color: var(--mm-ink);
  line-height: 0; border-radius: 8px; text-decoration: none;
  display: inline-block;
}
.mm-tools button, .mm-tools a { position: relative; }
.mm-tools button:hover, .mm-tools a:hover { opacity: .55; }

/* 收藏數量的小紅點 */
.mm-badge {
  position: absolute; top: -2px; right: -4px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: #e0322c; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 17px;
  text-align: center; pointer-events: none;
}

/* 行動版漢堡 */
.mm-burger { display: none; }

/* ---------- 展開面板：高度真的動，不是淡入 ---------- */
.mm-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--mm-surface);
  border-bottom-left-radius: var(--mm-radius);
  border-bottom-right-radius: var(--mm-radius);

  /* 面板最高只到視窗底部再往上留 84px。
     兩個問題一起解：
       ① 內容多的面板（PIAA）原本會長到視窗以外，最後一列的連結看不到也點不到
       ② 下方沒有遮罩露出來，「點空白處關閉」在那一頁失效
     超出的部分由面板自己捲。
     ⚠️ overflow-x 一定要明確寫 hidden。只寫 overflow-y:auto 的話，
     瀏覽器會把另一軸自動變成 auto，面板就會橫向溢出、右邊那欄被切掉
     ——這個坑踩過一次，是在 .mm-panel__inner 上踩的，不要再把 overflow 加到那一層。 */
  /* 實際值由 JS 依「導覽列真實高度」算出來寫進 --mm-panel-max。
     ⚠️ 不能寫死 calc(100vh - 84px)：面板是 top:100% 定位在導覽列下面，
     導覽列桌機約 85px、手機約 68px，寫死會讓下方那條「點得到的空白」
     在桌機剛好變成 0——那正是要解決的問題。 */
  max-height: var(--mm-panel-max, calc(100vh - 170px));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;

  /* 收起 = 高度 0。高度由 JS 量測後設成 px 才動得起來 */
  height: 0;
  box-shadow: 0 24px 48px -24px rgba(0,0,0,0);
  /* visibility 延遲到收合結束才切，收起後裡面的連結就不會被 Tab 抓到 */
  visibility: hidden;
  transition: height .46s var(--mm-ease),
              box-shadow .46s var(--mm-ease),
              visibility 0s linear .46s;
}
.mm-panel[aria-hidden="false"] {
  visibility: visible;
  transition: height .46s var(--mm-ease),
              box-shadow .46s var(--mm-ease),
              visibility 0s;
}
.mm-root.is-open .mm-panel {
  box-shadow: 0 26px 50px -26px rgba(0,0,0,.24);
}
/* 收起狀態不讓裡面的連結被 Tab 抓到 */
.mm-panel[aria-hidden="true"] { pointer-events: none; }

.mm-panel__stage { position: relative; }

.mm-group { display: none; }
.mm-group.is-active { display: block; }

/* ⚠️ 不要在這裡加 overflow。
   曾經為了「面板封頂後內容要能捲」加了 overflow-y:auto + max-height:100%，
   結果是 overflow-x 跟著變成 auto、面板橫向溢出，右邊那欄直接被切掉。
   面板的高度動畫靠 .mm-panel 的 overflow:hidden，這一層要保持乾淨。 */
.mm-panel__inner {
  display: grid;
  /* ⚠️ 右欄固定 320px，不再跟左邊對半分。
     原本是 1.05fr / 1fr——兩個精選入口吃掉面板一半的寬度，
     但左邊六格裡有十八個連結才是導航主體，權重是反的。
     精選入口改成文字小卡之後也不需要那麼寬。 */
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
  padding: 36px 32px 44px;
  max-width: 1560px;
  margin: 0 auto;
}

/* ---------- 內容進場：由右往左滑入，同一欄的上下兩格一起出 ----------
   全部取自 pokselect.com 實測，不是估的。
   它的六格是 grid-auto-flow: column（直向排），所以同一欄的上下兩格
   共用一個延遲 —— 看起來就是「一對一對」進場，不是一格一格。

   實測延遲表：
     左邊整塊    0.30s     ← 整塊先滑進來
     右卡 1      0.40s
     欄1（上下） 0.50s     右卡 2  0.50s
     欄2（上下） 0.65s
     欄3（上下） 0.75s
   注意間隔不平均（.15 → .10），照抄，不要改成等差。

   曲線：左六格 transform 2s / opacity 1s，右兩卡 transform 1.5s / opacity .9s
   ------------------------------------------------------------------- */

/* 起始狀態：往右推自身寬度的 25%、透明 */
.mm-tiles,
.mm-tiles > *,
.mm-features > * {
  opacity: 0;
  transform: translateX(var(--mm-slide, 25%));
  transition-delay: 0s;               /* 收起時立刻歸位，不要等 */
}

/* 左邊整塊 ＋ 右邊兩張大圖卡：1.5s / .9s
   （background-color 一起寫在這裡，不能另外再寫一條 transition——
     後面那條會整組覆蓋掉，進場動畫就會變成 0.25s） */
.mm-tiles,
.mm-features > * {
  transition: transform 1.5s cubic-bezier(.075, .82, .165, 1),
              opacity    .9s cubic-bezier(.19, 1, .22, 1),
              background-color .25s var(--mm-ease);
}
/* 左邊六格本身：2s / 1s，比外層更慢，拖尾更長 */
.mm-tiles > * {
  transition: transform 2s cubic-bezier(.075, .82, .165, 1),
              opacity    1s cubic-bezier(.19, 1, .22, 1);
}

/* 到位狀態 */
.mm-group.is-active .mm-tiles,
.mm-group.is-active .mm-tiles > *,
.mm-group.is-active .mm-features > * {
  opacity: 1;
  transform: translateX(0);
}

/* 延遲階梯。資料是橫著寫的（1 2 3 / 4 5 6），
   用 3n 取餘數換算成「第幾欄」，所以同欄的上下兩格拿到同一個延遲。 */
.mm-group.is-active .mm-tiles                 { transition-delay: .30s; }
.mm-group.is-active .mm-tiles > :nth-child(3n + 1) { transition-delay: .50s; }
.mm-group.is-active .mm-tiles > :nth-child(3n + 2) { transition-delay: .65s; }
.mm-group.is-active .mm-tiles > :nth-child(3n + 3) { transition-delay: .75s; }
.mm-group.is-active .mm-features > :nth-child(1)   { transition-delay: .40s; }
.mm-group.is-active .mm-features > :nth-child(2)   { transition-delay: .50s; }

@media (prefers-reduced-motion: reduce) {
  .mm-panel { transition-duration: .01ms; }
  .mm-tiles,
  .mm-tiles > *,
  .mm-features > * {
    opacity: 1; transform: none; transition: none;
  }
}


/* ---------- 兩種「不能裁」的圖 ----------
   mega-menu.js 已經依 menu-data 的 shot / diagram 標記，
   在 <img> 上掛好 .is-shot / .is-diagram，但 CSS 這邊一直沒有接，
   所以它們仍走預設的 cover（填滿、超出裁掉）：
     · 去背商品照是 1:1，塞進 16:10 → 上下被切（雨刷包裝的字、喇叭外盒底部）
     · 說明書線稿是 16:9，塞進 4:5 直框 → 左右被切爆（經銷地圖、常見問題那張對話框）

   兩者都改 contain，差別在底色：
     · 去背照要白底才乾淨
     · 線稿自帶 #f6f6f6 紙面，再墊白底會出現「兩層底」的邊 —— 所以不墊
   ------------------------------------------------------------ */

/* 去背商品照 */
/* ⚠️ 這裡刻意不用 :has()。
   舊版寫成 .mm-tile__thumb:has(img.is-shot) { display:grid } ＋ 圖片 width:auto，
   有兩個問題：
     ①:has() 沒生效的瀏覽器，外框不會變成置中白底，退回「原圖塞小框、超出裁掉」
     ②width:auto 的延遲載入圖片在載入前是 0×0，載入後才撐開，會跳版
   改成圖片自己撐滿外框＋object-fit:contain，效果一樣但不依賴任何新語法，
   而且尺寸從第一幀就是確定的。 */
.mm-tile__thumb img.is-shot,
.mm-feature__media img.is-shot {
  width: 100%; height: 100%;
  object-fit: contain;
  /* ⚠️ 這裡以前是 background:#fff。白底會把外框的紙面整個蓋掉，
     結果是「情境照和線稿有框、商品照浮空沒框」——六格看起來不同系統。
     框由 .mm-tile__thumb 統一提供，圖片自己不要鋪底。 */
  background: transparent;
  padding: 8%;
  box-sizing: border-box;
}

/* 說明書式線稿：整張就是內容，任何一邊都不能裁 */
/* ⚠️ 這裡以前用 :has() 把線稿的框改成 16:9。單張看是貼合了，
   但一排六格裡只有它比例不同，整排就對不齊——這正是「不協調」的來源。
   框一律 16:10，線稿 contain 之後的上下留白跟框同色，看不出來。 */
/* 情境照：填滿整個框，不留白。
   ⚠️ 這裡改過兩次，第二次是改錯的，記下來免得再犯：
   曾經為了「跟旁邊的商品照一致」把情境照也改成 contain + 6% 留白，
   結果是一張直角照片浮在圓角灰框裡、四周一圈灰邊，很醜。
   原因是這兩種圖本質不同：
     · 去背商品照＝漂浮的物件，四周需要空間，裁到就殘了 → contain
     · 情境照＝一張照片，本身就是矩形的內容，填滿才對 → cover
   兩者外觀不同是正確的，不是不一致。 */
.mm-tile__thumb img.is-photo,
.mm-feature__media img.is-photo {
  width: 100%; height: 100%;
  /* cover（不是 contain）＋ padding：兩者一起用才對。
     · padding 讓照片四周留出等寬的邊，不會貼到框
     · cover 讓照片填滿內縮後的那個框，不會出現上下或左右的空條
     單用 contain 會壞：這幾張照片是 3:2，框是 16:10，
     contain 之後左右的留白會是上下的兩倍，看起來像沒對齊。 */
  object-fit: cover;
  background: transparent;
  padding: 5%;
  box-sizing: border-box;
  /* 圓角要跟外框同方向，否則是「直角照片放在圓角框裡」，看起來沒做完 */
  border-radius: 10px;
}

.mm-tile__thumb img.is-diagram,
.mm-feature__media img.is-diagram {
  width: 100%; height: 100%;
  object-fit: contain;
  background: transparent;      /* 框已經是紙面色，圖片不必再鋪一層 */
  padding: 4%;                  /* 線稿本來就有留白，比商品照少一點就好 */
  box-sizing: border-box;
}

/* ---------- 左：六格 ---------- */
.mm-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px 28px;
  align-content: start;
}

.mm-tile__thumb {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--mm-tile);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
}
.mm-tile__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--mm-ease);
}
.mm-tile__thumb:hover img { transform: scale(1.05); }

/* 沒圖時的佔位：斜線紋 + 文字 */
.mm-tile__thumb--empty {
  display: grid;
  place-items: center;
  background-image:
    repeating-linear-gradient(135deg,
      #ececec 0 10px, #f4f4f4 10px 20px);
  color: #b4b4b4;
  font-size: 12px;
  letter-spacing: .08em;
}

.mm-tile__title {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  color: var(--mm-ink);
  margin-bottom: 10px;
}

.mm-tile__list { list-style: none; margin: 0; padding: 0; }
.mm-tile__list li { margin: 0 0 6px; }

/* ---------- 底線滑出的連結 ---------- */
.mm-link {
  position: relative;
  display: inline-block;
  font-size: 15px;
  color: var(--mm-ink-2);
  text-decoration: none;
  padding-bottom: 2px;
  transition: color .2s var(--mm-ease);
}
.mm-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;   /* 由左往右長出來 */
  transition: transform .28s var(--mm-ease);
}
.mm-link:hover,
.mm-link:focus-visible { color: var(--mm-ink); }
.mm-link:hover::after,
.mm-link:focus-visible::after { transform: scaleX(1); }

/* 標題也吃同一套底線 */
.mm-tile__title { position: relative; padding-bottom: 2px; }
.mm-tile__title::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .28s var(--mm-ease);
}
.mm-tile__title:hover::after,
.mm-tile__title:focus-visible::after { transform: scaleX(1); }

/* ---------- 右：兩張大圖卡 ---------- */
.mm-features {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* 一欄堆疊，兩張自然等高 */
  gap: 12px;
  align-content: start;
}

/* 文字優先的小卡。沒有圖，所以兩張一定等高——原本兩張大照片高度不同，
   右下角就空一塊。 */
.mm-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 14px;
  text-decoration: none;
  color: var(--mm-ink);
  background: #fff;
  border: 1px solid var(--mm-line);
  border-radius: 14px;
  padding: 16px 18px;
  transition: border-color .2s var(--mm-ease), background .2s var(--mm-ease);
}
.mm-feature:hover { background: #fafafa; border-color: #d5d5d5; }

.mm-feature__kicker {
  grid-column: 1 / -1;
  font-size: 10.5px; font-weight: 700; letter-spacing: .18em;
  color: var(--mm-accent, #1f6fdb);
}
.mm-feature__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
}
.mm-feature__arrow {
  flex: none;
  color: var(--mm-ink-3, #8c8c8c);
  transition: transform .3s var(--mm-ease);
}
.mm-feature:hover .mm-feature__arrow { transform: translateX(4px); }

/* ---------- 背景遮罩 ---------- */
.mm-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.28);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--mm-ease), visibility 0s linear .25s;
  z-index: -1;
}
.mm-root.is-open .mm-scrim {
  opacity: 1; visibility: visible;
  transition: opacity .25s var(--mm-ease), visibility 0s;
}

/* ---------- 行動版：改成點擊展開的手風琴 ---------- */
@media (max-width: 900px) {
  .mm-bar {
    /* 三欄改成「漢堡 / 標誌 / 工具」，選單自己另起一列（見下方 grid-column） */
    grid-template-columns: auto 1fr auto;
    padding: 14px 18px;
  }
  .mm-burger {
    display: inline-flex; order: -1;
    appearance: none; border: 0; background: transparent;
    padding: 4px; cursor: pointer; line-height: 0;
  }

  /* ⚠️ 展開時改成整頁浮層，並且自己可以捲動。
     兩個都試過、兩個都不行：
       ・sticky —— 選單＋面板比螢幕高，變成一大塊黏著、捲不到底
       ・static —— 往下滑時整個 header 跟著捲走，看起來像選單自己收回去
     正解是「選單開啟時它就是一頁」：固定滿版、內部捲動，
     背景頁面同時鎖住不動（JS 端加 mm-lock）。 */
  .mm-root.is-mobile-open {
    position: fixed;
    inset: 0;
    z-index: 1000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--mm-surface);
  }
  /* 頂端那排（漢堡／標誌／工具）在浮層裡釘住，
     捲到選單深處時還是關得掉——否則要一路捲回頂端才能關。 */
  .mm-root.is-mobile-open .mm-burger,
  .mm-root.is-mobile-open .mm-logo,
  .mm-root.is-mobile-open .mm-tools {
    position: sticky;
    top: 0;
    background: var(--mm-surface);
    z-index: 3;
    padding-block: 6px;
  }

  /* ⚠️ 手機的選單改成「在流內、自己一列」，不要用 absolute。
     用 absolute 會浮在商品圖上面（看起來像壞掉），
     而且 base 那條 justify-self:center 會讓它縮成一小塊置中——
     就是先前選單文字全部擠在右邊的原因。 */
  /* 明確指定第一列放「漢堡 / 標誌 / 工具」，選單自己佔第二列。
     不指定的話選單一展開，工具鈕會被擠到選單底下另起一行。 */
  .mm-burger { grid-row: 1; grid-column: 1; }
  .mm-logo   { grid-row: 1; grid-column: 2; }
  .mm-tools  { grid-row: 1; grid-column: 3; }

  .mm-nav {
    position: static;
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: stretch;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--mm-line);
    display: none;
  }
  .mm-root.is-mobile-open .mm-nav { display: flex; }

  .mm-nav__btn {
    text-align: left; border-radius: 10px;
    padding: 14px 12px; font-size: 17px;
  }
  .mm-nav__btn[aria-expanded="true"] { background: #f1f1f1; color: var(--mm-ink); }

  .mm-panel {
    position: static;
    box-shadow: none;
    border-radius: 0;
    border-top: 1px solid var(--mm-line);
  }
  .mm-root.is-open .mm-panel { box-shadow: none; }

  .mm-panel__inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 16px 18px 24px;
  }
  /* 手機一欄。⚠️ 縮圖整個收掉——
     六格縮圖＋兩張大圖在手機上會把選單撐到約 2900px（3.6 個螢幕），
     那不是選單是一頁目錄。手機要的是「快速跳到某一類」，不是逛。
     收掉縮圖後只剩文字，高度掉到約三分之一。 */
  .mm-tiles { grid-template-columns: 1fr; gap: 4px; }
  .mm-tile__thumb { display: none; }
  .mm-tile { padding: 12px 2px; border-bottom: 1px solid var(--mm-line); }
  .mm-tile__title { margin-bottom: 6px; font-size: 16px; }
  .mm-tile__list li { margin-bottom: 2px; }
  .mm-link { font-size: 14px; }

  .mm-features { grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
  .mm-feature__media { display: none; }
  .mm-feature { background: var(--mm-tile); }
  .mm-feature__foot { padding: 14px 16px; }
  .mm-feature__title { font-size: 15px; }

  .mm-scrim { display: none; }

  /* 進場動畫在手機關掉：一欄排列時「由右往左滑」看起來只是整片晃動，
     而且展開的是手風琴不是浮層，沒有進場的語意 */
  .mm-tiles, .mm-tiles > *, .mm-features > * {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* 手機選單展開時鎖住背景捲動。沒有這道，手指往下滑會滑到背後的頁面，
   選單看起來就像自己跑掉了。 */
body.mm-lock { overflow: hidden; }

/* ---------- 精選入口：圖卡版型 ----------
   跟左邊六格用「同一個零件」：灰底圖框在上、文字在框外。
   ⚠️ 不要再包成有邊框的白卡片。白卡片會讓右欄變成另一種元件，
   面板裡就同時存在兩套系統（左邊沒框、右邊有框），這是先前看起來不協調的原因。
   兩邊唯一該不同的只有欄寬。 */
.mm-feature--media {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.mm-feature--media:hover { background: transparent; }

.mm-feature__media {
  display: block;
  aspect-ratio: 16 / 10;          /* 跟 .mm-tile__thumb 同比例 */
  background: var(--mm-tile, #f6f6f6);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
}
.mm-feature__media img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--mm-ease);
}
.mm-feature--media:hover .mm-feature__media img { transform: scale(1.05); }

.mm-feature--media .mm-feature__kicker {
  display: block;
  margin: 0 0 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .18em;
  color: var(--mm-accent, #1f6fdb);
  background: none; padding: 0; border-radius: 0;
}
.mm-feature--media .mm-feature__title {
  display: inline-block;
  position: relative;
  margin: 0 0 8px;
  padding-bottom: 2px;
  font-size: 16px; font-weight: 700; line-height: 1.5;
}
/* 跟左邊格子標題同一個 hover：底線由左展開 */
.mm-feature--media .mm-feature__title::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .28s var(--mm-ease);
}
.mm-feature--media:hover .mm-feature__title::after { transform: scaleX(1); }

.mm-feature__desc {
  margin: 0;
  font-size: 13px; line-height: 1.75;
  color: var(--mm-ink-2, #5f5f5f);
}

@media (max-width: 900px) {
  /* 手機的選單是直向長清單，再塞圖會把每一項推得太長，滑不到底。 */
  .mm-feature--media .mm-feature__media { display: none; }
  .mm-feature--media { padding: 14px 16px; background: #fff;
                       border: 1px solid var(--mm-line); border-radius: 14px; }
  .mm-feature--media .mm-feature__title { font-size: 15px; }
}