/* ============================================================
   首頁 — D 大圖敘事（疊在 home.css 之上）
   設計來源：03-design/canvas/OptionD.dc.html／MobileD.dc.html

   🔴 這份只處理 banner、商品、影片三段的**排法**（2026-10-02 起 hero／故事段已刪，見 git 6731505）。
      顏色一律沿用 tokens.css 的語意層，沒有一個寫死的色碼——
      除了壓在照片上的那幾個罩層，那些是「照片上的可讀性」，不是主題色。

   🔴 字級一律走 --fs-* token。畫布上那些 11–13px 的規格標籤在這裡是 16px：
      2026-09-16 立的字級下限（所有看得見的文字 ≥ 16px）優先於畫布。
      畫布是提案用的圖，這裡是要有人真的讀的網頁。

   🔴 2026-10-02 Bella 版：標頭不再壓在首圖上（banner 是業主成品圖），
      全站同一個白底 sticky 標頭，淺色 logo 那套切換已刪。
   ============================================================ */

/* ---------- 首屏 banner 輪播（2026-10-02 業主拍板 Bella 版）----------
   純圖、無字、無按鈕；桌機 16:9、手機 4:5 各一張；1–3 張，點點切換（main.js）。
   沒素材時出佔位框。 */
.ns-banner { position: relative; background: var(--bg-raised); }
.ns-banner__track { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.ns-banner__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.ns-banner__slide.is-active { opacity: 1; }
.ns-banner .ns-banner__img { width: 100%; height: 100%; object-fit: cover; display: block; }   /* (0,2,0)：壓過 .woocommerce img */
.ns-banner .ns-banner__img--tall { display: none; }
.ns-banner__empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--brand-brown); background: repeating-linear-gradient(135deg, #FCEEDB 0 18px, #F7E4CC 18px 36px);
}
.ns-banner__spec { margin: 0; text-align: center; color: var(--text); line-height: 1.9; font-size: clamp(var(--fs-2xs), 1.3vw, var(--fs-m)); letter-spacing: .08em; }
.ns-banner__spec span { display: block; }
.ns-banner__spec span:first-child { font-family: var(--font-heading); font-weight: var(--fw-display); font-size: 1.3em; margin-bottom: 6px; }
.ns-banner__spec-m { display: none; }
.ns-banner__tag {
  display: none;   /* 只有手機借圖時才需要看到，見下方 media query */
  position: absolute; left: 16px; bottom: 16px; margin: 0;
  background: var(--brand-espresso-deep); color: #FCEEDB; font-size: var(--fs-2xs); letter-spacing: .06em;   /* 實心底：壓在照片上才量得到對比 */
  padding: 6px 12px; border-radius: 2px;
}
.ns-banner__dots {
  /* 2026-10-02 Oscar：點點在圖的**下方**，不壓在圖上（Bella 範例也是）。
     按鈕 44px 用負 margin 收回來，視覺上仍是 10px 點、10px 間距、上下 16／6px。 */
  display: flex; justify-content: center; gap: 10px; align-items: center;
  /* 2026-10-06 Bella：手機數據帶的上框線切到點點。下方留白 6 → 16 → 24：
     點點按鈕的觸控範圍是 44px，比看得到的 10px 點大，16px 時按鈕下緣還壓過框線 1px。 */
  padding: 16px 7px 24px; background: #fff; min-height: 50px; box-sizing: border-box;
}
/* 🔴 按鈕本身就是 44×44（觸控目標），看得到的 10px 圓點是 ::before。
   之前是 10px 按鈕用 ::after 撐點擊範圍，稽核量的是按鈕盒子，六顆全被判 10×10。 */
.ns-banner__dot {
  width: 44px; height: 44px; margin: -17px -7px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer; position: relative; display: inline-flex;
  align-items: center; justify-content: center;
}
.ns-banner__dot::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--brand-brown); background: transparent; box-sizing: border-box;
}
.ns-banner__dot.is-active::before { background: var(--brand-brown); }
/* 🔴 2026-10-06 Oscar：點點 hover 不要有任何效果。
   Astra 自己的 `button:hover／button:focus` 會把按鈕填成深棕底（--ast-global-color-1），
   每顆按鈕還帶一層 0 1px 2px 的淡陰影——44px 的觸控圓因此在白底上隱約看得到，手機點完還會停在深棕。
   .ns-plain 只讓 astra-bridge.css 放過，擋不住 Astra 本身，所以這裡四個狀態一起歸零（0,3,0 壓過 button:hover 的 0,1,1）。
   鍵盤的 :focus-visible 外框保留在下面那條，那是無障礙要的，不是 hover 效果。 */
.ns-banner .ns-banner__dot, .ns-banner .ns-banner__dot:hover, .ns-banner .ns-banner__dot:focus, .ns-banner .ns-banner__dot:active,
.ns-dvideo .ns-dvideo__dot, .ns-dvideo .ns-dvideo__dot:hover, .ns-dvideo .ns-dvideo__dot:focus, .ns-dvideo .ns-dvideo__dot:active {
  background: transparent; box-shadow: none; border: 0; color: inherit; transform: none;
}
.ns-banner__dot:focus-visible { outline: 2px solid var(--accent); outline-offset: -6px; }
@media (prefers-reduced-motion: reduce) { .ns-banner__slide { transition: none; } }

/* 左右箭頭（2026-10-12 Oscar 附圖：白色圓鈕、深色細箭頭、垂直置中、離左右邊一段距離）。
   按鈕本身 44×44 是觸控目標，看得到的白圓是 ::before 那層 40px（手機 36px）。
   🔴 Astra 的 button／button:hover 會填深棕底、加陰影，四個狀態一起寫死（同點點那條的理由）；
      Oscar 10-06 說點點 hover 不要有效果，箭頭比照，只換游標。 */
.ns-banner .ns-banner__arrow,
.ns-banner .ns-banner__arrow:hover, .ns-banner .ns-banner__arrow:focus, .ns-banner .ns-banner__arrow:active {
  position: absolute; top: 50%; z-index: 2;
  width: 44px; height: 44px; margin: -22px 0 0; padding: 0; border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; box-shadow: none; color: var(--brand-ink); transform: none; cursor: pointer;
}
.ns-banner .ns-banner__arrow::before {
  content: ""; position: absolute; inset: 2px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
}
.ns-banner .ns-banner__arrow svg { position: relative; display: block; }
.ns-banner .ns-banner__arrow--prev { left: clamp(12px, 2.2vw, 40px); }
.ns-banner .ns-banner__arrow--next { right: clamp(12px, 2.2vw, 40px); }
.ns-banner .ns-banner__arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- 商品：滿版 16:9 ＋ 袋內兩款 ---------- */

/* 🔴 2026-10-02 Bella #7 #9：三格數據帶與商品介紹都是純白底，兩區之間不留空（#6）。
   🔴 2026-10-03 Oscar：Bella **只**說了這兩區。原本多寫一條 .ns-main 整個白底，把 Q&A 也變白了——
      那不是她要的，拿掉；Q&A 回到頁面底色（米色），跟舊版一樣。
      白色商品區與深色影片區之間不要露出米色縫，所以首頁的影片區上緣不留 margin。 */
/* 🔴 2026-10-06 Bella：商品區「標題＋導言＋圖」回到頁面米色（她框的那一塊），
   10-02 #9 說的「圖片下方色塊改純白」只指圖下方的口味與價格——所以白底掛在 .ns-dprod__below。 */
.ns-dprod { padding: 0; background: transparent; }
.ns-dprod__below { background: #fff; padding: clamp(28px, 4vw, 52px) 0 clamp(40px, 6vw, 80px); }
body.ns-d.ns-front .ns-facts, body.ns-d.ns-front .ns-fact { background: #fff; }
body.ns-d.ns-front .ns-dvideo { margin-top: 0; }

.ns-dprod__head {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--gut) clamp(28px, 4vw, 52px);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
/* kicker 置中。.ns-kicker--flat 是 flex-direction: row，所以置中要靠
   justify-content；父層的 text-align: center 對 flex 容器沒有作用。 */
.ns-dprod__head .ns-kicker--flat { justify-content: center; text-align: center; margin-bottom: 18px; }

.ns-dprod__title {
  font-family: var(--font-heading); font-weight: var(--fw-display);
  font-size: clamp(28px, 3.4vw, 44px); letter-spacing: .14em; line-height: 1.5;
  margin: 0 0 14px;
}
.ns-dprod__head .ns-lede { margin: 0; max-width: 52ch; }

/* 滿版，不吃 gutter。 */
.ns-dprod__media .ns-slot { border: 0; }
.ns-dprod__media .ns-slot__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ns-dprod__inbag {
  max-width: var(--maxw); margin: clamp(30px, 4vw, 52px) auto 0;
  padding: 0 var(--gut);
}

.ns-dprod__buy {
  max-width: var(--maxw); margin: clamp(28px, 3.4vw, 44px) auto 0;
  padding: 0 var(--gut);
  /* Bella #11：價格與「看商品詳情」按鈕**底部對齊** */
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(20px, 3vw, 40px); flex-wrap: wrap;
}
.ns-dprod__price { min-width: 0; }
/* 🔴 順序要跟商品頁一樣：特價在前、原價劃線在後。Woo 輸出的是
   <del>原價</del><ins>特價</ins>，商品頁用 order 反過來，首頁原本沒反——
   同一組數字兩頁排法相反（2026-09-19 評審抓到）。 */
.ns-dprod__amount { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ns-dprod__amount ins { order: 1; text-decoration: none; background: none; color: inherit; }
.ns-dprod__amount del { order: 2; font-family: var(--font-body); font-weight: var(--fw-text); font-size: var(--fs-strike); color: var(--text-soft); }
.ns-dprod__amount {
  font-family: var(--font-figure); font-weight: var(--fw-fig);
  font-size: clamp(28px, 3vw, 38px); color: var(--accent);
  margin: 0;
}
/* 切法／淨重／烹煮時間。比 desc 再輕一階：它是規格不是賣點，
   但又必須看得到——「同一款麵體、兩種切法」只有這一行在證明。 */
.ns-inbag__spec {
  margin: 6px 0 0;
  font-size: var(--fs-xs); line-height: 1.95; color: var(--text-soft);
}

.ns-dprod__amount { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }

.ns-dprod__bag,
.ns-dprod__ship,
.ns-dprod__diet {
  margin: 0; font-size: var(--fs-xs); line-height: 1.95; color: var(--text-soft);
}
.ns-dprod__bag  { margin-top: 4px; }
.ns-dprod__diet { margin-top: 6px; }
.ns-dprod__cta { flex: 0 0 auto; }

/* ---------- 影片版位 ---------- */

.ns-dvideo {
  position: relative;
  margin-top: clamp(56px, 7vw, 104px);
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  background: var(--brand-espresso);
  overflow: hidden;
}

.ns-dvideo__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* 中央徑向暗罩：影片封面中間通常最亮（主體在那裡），
   而播放鍵與標題也在那裡。不壓的話兩者剛好打架。 */
.ns-dvideo__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 48% 54% at 50% 46%,
      rgba(43, 30, 21, .74) 0%,
      rgba(43, 30, 21, .32) 60%,
      rgba(43, 30, 21, 0) 100%),
    linear-gradient(180deg,
      rgba(43, 30, 21, .40) 0%,
      rgba(43, 30, 21, .18) 45%,
      rgba(43, 30, 21, .72) 100%);
}

.ns-dvideo__inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 0 var(--gut);
  color: var(--brand-cream);
}

.ns-dvideo__play {
  width: clamp(58px, 8vw, 104px); height: auto;
  color: rgba(252, 238, 219, .88);
  margin-bottom: clamp(16px, 2.2vw, 26px);
}

.ns-dvideo__kicker {
  font-family: var(--font-figure); font-weight: var(--fw-fig);
  font-size: var(--fs-2xs); letter-spacing: .42em;
  color: var(--brand-sand);
  margin: 0 0 12px;
}
.ns-dvideo__title {
  font-family: var(--font-heading); font-weight: var(--fw-display);
  font-size: clamp(24px, 3.1vw, 40px); letter-spacing: .14em;
  margin: 0 0 14px; color: var(--brand-cream);
}

/* 🔴 深底上的「待確認」標記。全站的 .ns-tbd 是淺底深字，壓在這張深照片上
   等於看不見——所以這裡是自己的深底淺字版，不是覆寫 .ns-tbd。 */
.ns-dvideo__tbd {
  margin: 0;
  display: inline-block;
  background: rgba(43, 30, 21, .55);
  border: 1px dashed rgba(252, 238, 219, .6);
  color: var(--brand-cream);
  padding: 4px 12px;
  font-size: var(--fs-2xs); letter-spacing: .08em;
}

.ns-dvideo__spec {
  position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(14px, 2vw, 30px);
  margin: 0;
  font-size: var(--fs-2xs); letter-spacing: .12em; line-height: 1.9;
  color: rgba(252, 238, 219, .68);
}
.ns-dvideo__spec span { display: block; color: rgba(252, 238, 219, .9); }

/* ---------- 影片：有 YouTube 連結時的輪播（2026-10-02 Oscar） ----------
   1–4 支，第 1 支進入畫面時靜音自動播（瀏覽器規定自動播必須靜音），其餘點封面才載 iframe。
   封面是 YouTube 自己的縮圖，iframe 要到點下去才建——四支一起載是四個播放器的 JS。
   點點與 banner 同一套造型，只是在深底上換成米色。 */
.ns-dvideo--live {
  aspect-ratio: auto; display: block; padding-top: clamp(40px, 5vw, 72px);
  /* 🔴 place-items 一定要還原。上面 .ns-dvideo 的 place-items:center 是給 grid 用的，
     但 Chrome 2026 起 justify-items 對**一般 block 的子元素**也生效（Box Alignment 3）：
     改成 display:block 之後，track 與標題還是被縮成內容寬再置中——實測 track 0×0。 */
  place-items: normal;
}
.ns-dvideo__head { text-align: center; padding: 0 var(--gut) clamp(22px, 3vw, 36px); }
.ns-dvideo--live .ns-dvideo__title { margin-bottom: 0; }
.ns-dvideo__track { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.ns-dvideo__slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .4s ease;
}
.ns-dvideo__slide.is-active { opacity: 1; visibility: visible; }
.ns-dvideo__poster {
  display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0;
  background: #000; cursor: pointer; position: relative; color: rgba(252, 238, 219, .92);
}
.ns-dvideo__poster img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; }
.ns-dvideo__poster .ns-dvideo__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .45));
}
.ns-dvideo__poster:hover .ns-dvideo__play,
.ns-dvideo__poster:focus-visible .ns-dvideo__play { color: #fff; }
.ns-dvideo__poster:focus-visible { outline: 2px solid var(--brand-cream); outline-offset: -6px; }
.ns-dvideo__slide iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ns-dvideo__slide.is-playing .ns-dvideo__poster { display: none; }
.ns-dvideo__dots {
  display: flex; justify-content: center; gap: 10px; align-items: center;
  padding: 16px 7px 20px; background: var(--brand-espresso); min-height: 46px; box-sizing: border-box;
}
.ns-dvideo__dot {
  width: 44px; height: 44px; margin: -17px -7px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer; position: relative; display: inline-flex;
  align-items: center; justify-content: center;
}
.ns-dvideo__dot::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--brand-cream); background: transparent; box-sizing: border-box;
}
.ns-dvideo__dot.is-active::before { background: var(--brand-cream); }
.ns-dvideo__dot:focus-visible { outline: 2px solid var(--brand-cream); outline-offset: -6px; }
@media (prefers-reduced-motion: reduce) { .ns-dvideo__slide { transition: none; } }

/* ---------- 手機 ---------- */

@media (max-width: 900px) {

  /* banner 手機 4:5，換成直式那張 */
  .ns-banner__track { aspect-ratio: 4 / 5; }
  .ns-banner .ns-banner__img--wide { display: none; }
  .ns-banner .ns-banner__img--tall { display: block; }
  .ns-banner .ns-banner__img--borrowed { object-position: center; }
  .ns-banner .ns-banner__img--borrowed ~ .ns-banner__tag { display: block; }
  .ns-banner__spec-d { display: none; }
  .ns-banner__spec-m { display: block; }
  .ns-banner .ns-banner__arrow::before { inset: 4px; }   /* 手機白圓 36px，觸控範圍仍 44px */
  .ns-banner .ns-banner__arrow svg { width: 16px; height: 16px; }
  .ns-banner .ns-banner__arrow--prev { left: 6px; }
  .ns-banner .ns-banner__arrow--next { right: 6px; }

  /* 🔴 手機版所有圖位一律 1:1（業主 2026-09-18 指定）。
     桌機的比例在手機上兩邊都極端：故事圖 3:4 在 390 寬是 520px 高，
     一屏只看得到一張圖；商品圖 16:9 只有 219px 高，兩個碗小到看不出是什麼。
     1:1 是這兩者之間唯一合理的落點。

     覆寫的是 --slot-ratio 不是 aspect-ratio——行內樣式贏過選擇器，
     直接寫 aspect-ratio 要 !important 才蓋得掉（見 inc/images.php）。 */
  body.ns-d.ns-front .ns-slot--filled { --slot-ratio: 1 / 1; }

  /* 🔴 商品圖從 16:9 裁成 1:1，看得到的只剩原圖中間 56% 的寬度。
     那張照片是「左碗油蔥、右碗麻醬」的構圖，置中裁切正好把右碗切掉——
     而這一區的標題寫著「兩種口味」，手機上卻只看得到一碗。
     把焦點往右推，兩碗至少都進得來。

     這是**權宜**，不是解法。真正該做的是給商品圖一張獨立的 1:1 構圖，
     跟 D 版 hero 需要 16:9 與 9:16 兩張是同一個道理——
     已記進 03-design/圖片規格.md 與待確認清單。 */
  body.ns-d.ns-front .ns-dprod__media .ns-slot__img { object-position: 62% center; }

  .ns-dprod__buy { flex-direction: column; align-items: stretch; }
  .ns-dprod__cta { justify-content: center; }

  /* 影片版位同樣 1:1。先前是「由內容撐開」（aspect-ratio: auto），
     因為 16:9 在 390 寬只有 219px 高、播放鍵加三行字塞不下——
     1:1 給的 390px 高兩者都放得下，而且與上面的圖位同一個形狀。

     🔴 但內容不能再置中。規格說明在 390 寬會折成四行（約 112px），
     置中的播放鍵與標題正好落在同一段高度上——實測兩者直接疊在一起。
     改成內容靠上、規格說明釘在底部，中間留空。 */
  .ns-dvideo { aspect-ratio: 1 / 1; padding: 0; align-items: start; }
  /* 有影片時播放器本身就是 16:9，上面那條佔位用的 1:1 不適用 */
  .ns-dvideo--live { aspect-ratio: auto; padding: clamp(30px, 8vw, 44px) 0 0; }
  .ns-dvideo__inner { padding-top: clamp(30px, 9vw, 48px); }
  .ns-dvideo__spec {
    position: absolute; left: var(--gut); right: var(--gut);
    bottom: clamp(14px, 4vw, 24px); text-align: center;
  }
  /* 🔴 手機只留「影片版位 16:9」，收掉那串「尚未決定：支數／自架或 YouTube 嵌入／…」。
     那串在 390 寬要折五行（143px），加上置中的播放鍵與標題（241px）
     總共 384px，塞進 390px 的方框只剩 6px——實測仍然疊在一起。
     資訊沒有少：中央那顆徽章已經寫著「等業主提供 YouTube 連結」。
     （這整段只在一支連結都沒填時出現；有連結是 .ns-dvideo--live。） */
  .ns-dvideo__spec span { display: none; }
}

/* ---------- 滿版 ---------- */

/* 🔴 .ns-main 全站是 max-width: 1280 置中。在 1280 以下看不出來，
   但在 1680 的螢幕上左右各空 200px——D 的語彙是大圖敘事，
   首圖、故事圖、商品圖、影片版位都應該頂到視窗邊，不是待在一個欄位裡。

   做法是「外層放開、內層自己收」：版面容器不再限寬，改由每一段的
   文字區塊各自 max-width: var(--maxw) 置中。圖就自然滿版了。
   （.ns-dprod__head／__inbag／__buy 本來就是這樣寫的。） */
body.ns-d.ns-front .ns-main { max-width: none; }

/* 沒有自己收邊的那幾段，在這裡補上。
   🔴 .ns-facts 不在這裡收——它要三等分**整個視窗寬**（見下面那一段）。 */

/* ---------- 三格數據帶：淺色底、深咖字 ---------- */

/* 業主 2026-09-17《官網設計0917.pdf》在這一區標了「此區塊底色改為淺色調 字深咖」。
   PDF 上畫的是：緊貼首圖下緣的一條**淺色帶**、三格之間用直線分隔、
   上下沒有橫線、數字與標題都是深咖。

   🔴 底色用 --bg-raised（浮起面），不是自己挑一個色。
      tokens.css 為「會翻轉的底色」各準備了配對的前景色：
      --text-on-raised／--text-soft-on-raised／--accent-on-raised。
      直接寫 #FFFBF5 ＋ var(--text) 的話，在深調模式下 --text 會翻成米色，
      變成米字壓在米底上（1:1）——那個坑 tokens.css 開頭就記過。

   🔴 只做在 D 版。PDF 畫的是 D 的首圖頁，C 版那條帶子目前是米底加上下橫線，
      業主沒有針對 C 提過。要一起改要先問。 */
body.ns-d.ns-front .ns-facts {
  /* 緊貼首圖下緣，中間不要留頁面底色——留了就變成兩條帶子而不是一條 */
  padding: 0;
  /* 🔴 2026-09-18 業主指定拿掉底色。這一帶改為沿用頁面底色（--bg 米色），
     邊界只靠上方首圖的深色與三條分隔線撐出來。
     連帶：色不再是 --bg-raised，就不能用 --text-on-raised 那組配對前景，
     否則深調模式下會脫鉤。字色回到一般的 --text／--text-soft。 */
}

/* PDF 上這一區沒有上下橫線；帶子本身的底色就是它的邊界。 */
body.ns-d.ns-front .ns-facts__rule { display: none; }

/* 🔴 上下內距給**格子**，不是給 grid。
   給 grid 的話分隔線只有格子那麼高，上下各留一段空白——
   PDF 上那三條線是貫穿整條帶子的，那正是它看起來像「一條帶子分成三格」
   而不是「三個並排的區塊」的原因。 */
/* 🔴 三等分的是**整條帶子**，不是帶子裡的一個 1280 欄位。
   先前 grid 收在 max-width: 1280 置中，於是 1440 的螢幕上三條分隔線
   落在 37% 與 63%，看起來只是「中間有三欄」；業主標的那張圖，
   兩條線就在 1/3 與 2/3 上，三格各佔整條帶子的三分之一。
   收邊改由每一格自己的左右內距負責，第一格與最後一格對齊頁面 gutter。 */
body.ns-d.ns-front .ns-facts__grid { padding-block: 0; max-width: none; margin-inline: 0; }

/* 直線分隔要貫穿整條帶子，所以三格的左右內距一致——
   共用的規則把頭尾兩格的外側內距歸零（那是為了切齊 gutter），
   在這裡會讓分隔線看起來離兩端不等距。 */
body.ns-d.ns-front .ns-fact {
  padding-block: clamp(34px, 4vw, 54px);
  border-right: 1px solid var(--line);
}
body.ns-d.ns-front .ns-fact { padding-inline: clamp(20px, 3.1vw, 40px); }
/* 頭尾兩格往外對齊頁面 gutter，中間那格維持等距——
   三條線等分，字也跟著版面的左右邊界對齊。 */
body.ns-d.ns-front .ns-fact:first-child { padding-left: var(--gut); }
/* 🔴 最後一格不要右框線。共用規則本來就有這一條，但上面那條
   body.ns-d.ns-front .ns-fact 的權重 (0,3,1) 贏過 .ns-fact:last-child (0,2,0)，
   會把它加回來——結果是帶子右端多一條線，PDF 上沒有。 */
body.ns-d.ns-front .ns-fact:last-child  { padding-right: var(--gut); border-right: 0; }

/* 「字深咖」：數字與標題都改成深咖，不用強調色。
   代價要說清楚——數字本來是全站少數幾個用 --accent 的地方之一，
   改成深咖之後這一區就完全沒有強調色了。這是業主指定的，不是漏掉。 */
body.ns-d.ns-front .ns-fact__num,
body.ns-d.ns-front .ns-fact__unit,
body.ns-d.ns-front .ns-fact__title { color: var(--text); }
body.ns-d.ns-front .ns-fact__desc  { color: var(--text-soft); }

@media (max-width: 900px) {
  /* 手機是上下堆疊：直線換成橫線，內距回到共用規則那一組。
     🔴 上面那條 body.ns-d.ns-front .ns-fact 的權重是 (0,3,1)，
        會蓋掉共用規則裡的 .ns-fact { border-right: 0 } (0,1,0)——
        不在這裡寫回來的話，三列堆疊的右側會各拉一條直線。
     🔴 底色也要回到共用規則的 --bg-alt：手機版是靠那個底色把三列
        跟頁面分開的，而帶子本身已經是淺色，兩個淺色疊在一起就沒有分隔了。 */
  body.ns-d.ns-front .ns-fact {
    padding: 24px var(--gut);
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  body.ns-d.ns-front .ns-fact:last-child { border-bottom: 0; }
  body.ns-d.ns-front .ns-facts__grid { max-width: none; }
}
/* 故事的文字欄：圖要頂到左邊界，但文字不能跟著拉到 800px 寬——
   一行超過 40 個中文字就很難讀。欄位照比例長，行長另外鎖。 */
/* Q&A 用的是全站共用的 .ns-section（沒有自己的 max-width）。 */
body.ns-d.ns-front .ns-main > .ns-section {
  max-width: var(--maxw); margin-inline: auto;
}
body.ns-d.ns-front .ns-dvideo__spec {
  max-width: var(--maxw); left: 50%; right: auto; transform: translateX(-50%);
  padding-inline: var(--gut);
}

/* ============================================================
   首頁：標頭壓在 banner 上（2026-10-02 Oscar）
   ============================================================
   fixed 不佔版面，banner 從 y=0 開始。
   🔴 2026-10-02 晚 Oscar：頂端**不要米色漸層**。透明底、白 logo、白字；
      捲動後（.is-stuck）純白底、深字（Bella #2）。
      白字讀不讀得到，取決於業主成品圖上緣那 120px（手機 90px）夠不夠深——
      已寫進《圖片規格》與《版面規格》。字下壓一層很淡的影子，淺色圖上至少有輪廓，
      但影子救不了米色底上的白字，真的太淺還是要靠圖。
   頂端狀態＝不是 .is-stuck、手機選單也沒展開（.is-navopen 由 main.js 同步給）。 */
body.ns-front .ns-masthead {
  position: fixed; top: var(--ns-adminbar); left: 0; right: 0;
  background: transparent;
}
body.ns-front .ns-masthead:not(.is-stuck):not(.is-navopen) .ns-masthead__logoimg--dark { display: none; }
body.ns-front .ns-masthead:not(.is-stuck):not(.is-navopen) .ns-masthead__logoimg--light {
  display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4));
}
body.ns-front .ns-masthead:not(.is-stuck):not(.is-navopen) .ns-nav__list a,
body.ns-front .ns-masthead:not(.is-stuck):not(.is-navopen) .ns-masthead__cart,
body.ns-front .ns-masthead:not(.is-stuck):not(.is-navopen) .ns-navtoggle {
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
body.ns-front .ns-masthead:not(.is-stuck):not(.is-navopen) .ns-nav__list a:hover,
body.ns-front .ns-masthead:not(.is-stuck):not(.is-navopen) .ns-nav__list a:focus-visible,
body.ns-front .ns-masthead:not(.is-stuck):not(.is-navopen) .ns-masthead__cart:hover,
body.ns-front .ns-masthead:not(.is-stuck):not(.is-navopen) .ns-masthead__cart:focus-visible,
body.ns-front .ns-masthead:not(.is-stuck):not(.is-navopen) .ns-navtoggle:hover { color: rgba(255, 255, 255, .78); }
/* 🔴 這兩條**必須**寫：上面 body.ns-front .ns-masthead 是 (0,2,1)，贏過 layout.css 的
   .ns-masthead.is-stuck (0,2,0)，不在這裡寫回白底，捲動後標頭會是全透明的。 */
body.ns-front .ns-masthead.is-stuck,
body.ns-front .ns-masthead.is-navopen { background: #fff; box-shadow: 0 1px 0 rgba(59, 42, 30, .08); }
@media (prefers-reduced-motion: no-preference) {
  body.ns-front .ns-masthead { transition: background .22s ease; }
}
}