/* ============================================================
   首頁的共用元件
   ------------------------------------------------------------
   🔴 2026-09-18：這張檔案以前是「C 編輯直書的首頁樣式」。
      業主拍板 D、C 版退場之後，C 專屬的 hero／故事／商品／影片版位
      與那兩段只有 C 用得到的效果（直書標題揭開、商品圖 hover 換第二張）
      整組刪掉，564 行剩 200 出頭。

      留下來的是**兩版本來就共用的元件**：三格數據、一袋內含的兩款、
      Q&A、手機黏底購買列。D 的版面在 home-d.css，疊在這張之上。

      沒有把兩張合成一張：分開的那條界線（元件／版面）本身是有用的資訊，
      合起來就看不見了。要找 C 的完整樣式：git，最後一版在 67833bb。
   ============================================================ */

/* ---------- 三格數據 ---------- */

.ns-facts { padding: clamp(40px, 7.2vw, 92px) var(--gut) 0; }

.ns-facts__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none; margin: 0; padding: 0;
}

.ns-fact {
  padding: clamp(24px, 3.4vw, 44px) clamp(20px, 3.1vw, 40px);
  border-right: 1px solid var(--line);
}
.ns-fact:first-child { padding-left: 0; }
.ns-fact:last-child { padding-right: 0; border-right: 0; }

.ns-fact__figure { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.ns-fact__num {
  font-family: var(--font-figure); font-weight: var(--fw-fig);
  font-size: clamp(38px, 4.5vw, 58px); line-height: 1; color: var(--accent);
}
.ns-fact__unit { font-family: var(--font-figure); font-weight: var(--fw-fig); font-size: clamp(var(--fs-s), 1.6vw, 20px); color: var(--accent); }

/* 🔴 標題與說明只差 1–2px，只靠 serif／sans 分層，掃視時主從不明快。
   不動字級（下限頂住 --fs-2xs），改用字距拉開：標題加寬、說明收掉。 */
.ns-fact__title {
  font-family: var(--font-heading); font-weight: var(--fw-display);
  font-size: var(--fs-s); letter-spacing: .22em;
  margin: 14px 0 6px;
}
.ns-fact__desc {
  font-size: clamp(var(--fs-2xs), 1vw, var(--fs-xs)); color: var(--text-soft); line-height: 1.95; margin: 0;
  letter-spacing: 0;   /* 標題加寬、說明收掉，兩者才分得開 */
}

/* ---------- 一袋內含的兩款 ---------- */

/* 它們不是可以買的東西，所以不做成卡片的樣子——沒有邊框、沒有按鈕，
   只有一條口味識別色的細線把兩者分開。

   🔴 2026-09-18 差點被一起刪掉。這一組原本住在 C 版的「商品」區塊裡，
   而 D 版也在用（d/products.php 的 .ns-dprod__inbag 裡面就是這些 item）——
   刪 C 的時候按區塊整段切，連這一組一起帶走了，首頁兩欄口味立刻變成
   沒有樣式的清單。抓到的方法是先把 D 首頁 DOM 上所有 ns- class 掃出來，
   再比對哪些 CSS 規則的選擇器一個都沒用到；.ns-inbag 不在那份名單裡。
   移到自己的段落，不要再依附在任何一版的版面段落下面。 */
.ns-inbag {
  list-style: none; margin: clamp(26px, 3.4vw, 40px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 40px);
}
.ns-inbag__item { border-top: 3px solid var(--ns-flavour, var(--line)); padding-top: 18px; }
.ns-inbag__en {
  font-family: var(--font-figure); font-weight: var(--fw-fig);
  font-size: var(--fs-2xs); letter-spacing: .3em; color: var(--text-soft);
  margin: 0 0 8px;
}
.ns-inbag__name {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  /* 2026-10-03：宋體沒有 500 這個字重（只載 600／700），寫 --fw-text 會被瀏覽器自己挑成 600；
     小標統一跟 .ns-fact__title、.ns-spec__fname 一樣用 --fw-em 700。 */
  font-family: var(--font-heading); font-weight: var(--fw-display);
  font-size: var(--fs-m); letter-spacing: .14em; margin: 0 0 10px;
}
.ns-inbag__desc { font-size: var(--fs-xs); line-height: 1.95; color: var(--text-soft); margin: 0; }
.ns-inbag__qty {
  margin: 10px 0 0;
  font-family: var(--font-figure); font-weight: var(--fw-fig);
  font-size: var(--fs-2xs); letter-spacing: .14em; color: var(--text-soft);
}

/* ---------- Q&A ---------- */

.ns-qa { grid-template-columns: 84px 1fr; }
.ns-qa__body { min-width: 0; }

.ns-qa__list { margin: 0; }
.ns-qa__item { border-top: 1px solid var(--line); }
.ns-qa__item:last-child { border-bottom: 1px solid var(--line); }

/* 整列都可以按。min-height 44px 是觸控目標下限——
   問題只有一行時，光靠 padding 撐不到 44。 */
.ns-qa__q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 44px; padding: 20px 0;
  font-family: var(--font-heading); font-weight: var(--fw-display); font-size: var(--fs-xs); letter-spacing: .1em;   /* 宋體只有 600／700，不寫會拿 body 的 500 讓瀏覽器就近挑 */
  cursor: pointer;
  list-style: none;            /* 拿掉預設三角形 */
}
.ns-qa__q::-webkit-details-marker { display: none; }
/* 問題文字是 h3：歸零 h 的預設，字級／行高／字距沿用 summary，畫面不變。 */
.ns-qa__qtext { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; line-height: 1.9; }   /* Safari 要另外關 */
.ns-qa__q:hover { color: var(--accent); }
.ns-qa__q:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ＋／− 用兩條線畫，不用文字：字型不同時「＋」的視覺重量差很多，
   而且全形／半形加號在中文字型裡會對不齊中線。 */
.ns-qa__mark {
  position: relative; flex: 0 0 auto;
  width: 14px; height: 14px; color: var(--accent);
}
.ns-qa__mark::before,
.ns-qa__mark::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 1px; background: currentColor;
}
.ns-qa__mark::after { transform: rotate(90deg); }
.ns-qa__item[open] .ns-qa__mark::after { transform: rotate(0deg); }

.ns-qa__a {
  margin: 0; padding: 0 0 24px;
  font-size: var(--fs-s); line-height: 2.05; color: var(--text-soft);
  max-width: 52em;
}

@media (prefers-reduced-motion: no-preference) {
  .ns-qa__mark::after { transition: transform .2s ease; }
}

.ns-qa__more { margin: 34px 0 0; }
.ns-qa__more a {
  display: inline-flex; align-items: center; min-height: 48px;
  font-size: var(--fs-xs); letter-spacing: .2em;
  border-bottom: 1px solid currentColor;
}

/* ============================================================
   平板：三欄的區塊先收成兩欄
   ============================================================ */

@media (max-width: 1100px) {
  .ns-qa { grid-template-columns: 64px 1fr; }
}

/* ============================================================
   手機（依 page-m-c-手機.html）
   ============================================================ */

@media (max-width: 900px) {

  /* 區塊編號改成橫排一行 */
  /* 手機改 block（分節標記要黏住，grid item 的 sticky 動不了）——見 layout.css */
  .ns-section { display: block; }
  .ns-kicker { flex-direction: row; gap: 14px; padding-top: 0; }

  /* 三格數據改成三列堆疊，襯底區分 */
  .ns-facts { padding-inline: 0; }
  .ns-facts__grid {
    grid-template-columns: 1fr;
    background: var(--bg-alt);
    /* 2026-10-07 Oscar：手機上框線拿掉（它就是 Bella 10-06 說「切到 BN 輪播 icon」的那條線）。 */
    border-bottom: 1px solid var(--line);
  }
  .ns-fact {
    display: flex; align-items: baseline; gap: 14px;
    padding: 24px var(--gut);
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .ns-fact:last-child { border-bottom: 0; }
  /* 數字一欄、文字一欄。標題與說明必須包在同一個容器裡，
     否則三個都是 flex 子元素，會排成三欄，標題被壓到 96px 才換行。 */
  .ns-fact__figure { min-width: 92px; flex-shrink: 0; }
  .ns-fact__text { min-width: 0; }
  /* 🔴 標題與說明只差 1–2px，只靠 serif／sans 分層，掃視時主從不明快。
   不動字級（下限頂住 --fs-2xs），改用字距拉開：標題加寬、說明收掉。 */
.ns-fact__title { margin: 0; }
  .ns-fact__desc { margin-top: 3px; }

  /* 商品：單欄，標題改橫排 */
  .ns-inbag { grid-template-columns: 1fr; gap: 22px; }
  /* Q&A 改單欄 */
  .ns-qa__item { grid-template-columns: 1fr; gap: 10px; }

}

/* ============================================================
   效果三件（2026-09-16）
   全站已有 base.css 的 prefers-reduced-motion killswitch，
   下面每一段的靜止狀態都必須是「看得到、可操作」的那一端，
   關掉動畫之後才不會留下隱形內容。
   ============================================================ */

/* ---------- ③ 手機黏底購買列 ---------- */

.ns-buybar { display: none; }

@media (max-width: 900px) {
  .ns-buybar {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--bg-raised);
    border-top: 1px solid var(--line);
    /* 唯一用陰影的地方：它浮在內容上，需要一點離地感才不會像頁尾 */
    box-shadow: 0 -2px 12px rgba(59, 42, 30, .08);
    transform: translateY(100%);
  }
  .ns-buybar.is-visible { transform: none; }

  @media (prefers-reduced-motion: no-preference) {
    .ns-buybar { transition: transform .22s cubic-bezier(.22,.61,.36,1); }
  }

  .ns-buybar__info { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
  .ns-buybar__name {
    font-size: var(--fs-xs); letter-spacing: .1em; color: var(--text-soft);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ns-buybar__price {
    font-family: var(--font-figure); font-weight: var(--fw-fig); font-size: 20px; color: var(--accent-on-raised);
    white-space: nowrap;
  }
  .ns-buybar__from { font-family: var(--font-body); font-weight: var(--fw-text); font-size: var(--fs-2xs); }

  .ns-buybar__cta {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 46px; padding: 0 30px;
    background: var(--accent); color: var(--on-accent);
    font-size: var(--fs-s); letter-spacing: .2em;
  }

  /* 列出現時把頁面底部墊高，否則會蓋住頁尾最後一行（法規字號就在那裡）。 */
  body.ns-has-buybar { padding-bottom: 68px; }
}