/* ============================================================
   版面骨架：masthead、footer、按鈕、頁首標題
   跨頁共用。首頁專屬的區塊樣式在 home.css。
   ============================================================ */

:root {
  --gut: clamp(22px, 5.6vw, 72px);   /* 左右留白：手機 22px → 桌機 72px（對齊設計稿） */
  --maxw: 1280px;

  /* 捲動後標頭的玻璃感。收成變數是因為**有兩個地方要用**：
     這裡（全站）與 home-d.css（D 版首頁的標頭權重較高，會蓋掉全站那條）。
     寫兩次數值一定會漂，所以值只留一份。 */
  --glass-bg:   color-mix(in srgb, var(--bg) 72%, transparent);
  --glass-blur: blur(14px) saturate(130%);
}

.ns-main { max-width: var(--maxw); margin: 0 auto; }

.ns-rule { height: 1px; background: var(--line); }

/* 🔴 2026-10-02 Oscar：全站直書退場，一律橫式。.ns-v 已沒有任何模板在用，整組刪除：
   商品名 10-02 Bella #12 先改橫式，頁首標題（.ns-pagehead）同日跟進。
   要回頭看直書的做法，git 6731505 之前的 layout.css 與 page-head.php 有。 */

.skip-link {
  position: absolute; left: -9999px;
  /* Astra 寫死 14px。字級寫在這裡而不是只寫在 :focus，
     稽核量的是元素本身，不是它顯示的那一刻。 */
  font-size: var(--fs-s);
}
.skip-link:focus {
  left: var(--gut); top: 8px; z-index: 999;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 18px; letter-spacing: .1em;
  /* 跳過導覽的連結是鍵盤使用者的第一個落點，觸控目標也要夠大 */
  min-height: 44px; display: inline-flex; align-items: center;
}

/* 管理員才看得到的施工標記 */
/* 🔴 「待確認」不是錯誤，不該穿錯誤紅（2026-09-17 三位各自指到）。
   --danger 是「這裡出事了」的顏色——結帳欄位驗證失敗用的就是它。
   而這些標記講的是「這筆資料還在等業主」，是狀態不是錯誤。
   一頁上有兩三顆紅框時，正在判斷「這是不是詐騙」的人讀到的是警訊；
   最糟的是過敏原旁邊那一顆，會被讀成「連過敏原都還沒查清楚」。
   改用次要文字色 ＋ 虛線框：仍然一眼看得出是施工標記，但不喊叫。 */
/* 🔴 試放圖的角標。
   佔位框會寫明規格與「待業主提供」，但一換成真圖那段字就不見了——
   於是 AI 生的試放圖在網站上看起來就是商品照。這個角標補回那件事，
   標記綁在附件 meta 上，換成實拍就自動消失（見 inc/images.php）。
   放在圖的右下角、深底淺字：圖片內容不可預測，淺底深字會有看不見的風險。 */
.ns-slot--filled { position: relative; overflow: hidden; }
.ns-slot__stub {
  position: absolute; right: 0; bottom: 0;
  /* 🔴 不透明，不是半透明。這是合規標記不是裝飾——
     壓在不可預測的照片上時，半透明的底會讓對比隨照片浮動；
     而且對比稽核量不到半透明的底（它會往上找，找到的是頁面底色）。 */
  background: #2B1E15;
  color: var(--brand-cream);
  font-size: var(--fs-2xs); letter-spacing: .1em;
  padding: 5px 12px;
}

/* 頁尾的客服時間與社群。兩者都是 2026-09-17 才接上的——
   業主在確認表上填了，但前端一直沒有地方放。 */
.ns-footer__hours {
  margin: 12px 0 0;
  font-size: var(--fs-xs); letter-spacing: .06em; color: var(--footer-fg); opacity: .78;
}
/* 2026-10-06 Bella：FB／IG 改 icon。按鈕 44×44、icon 22px、吃 --footer-fg。 */
.ns-footer__social {
  display: flex; gap: 6px; flex-wrap: wrap;
  list-style: none; margin: 10px 0 0 -11px; padding: 0;
}
.ns-footer__social a {
  color: var(--footer-fg);
  display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px;
}
.ns-footer__social svg { display: block; }
.ns-footer__social a:hover,
.ns-footer__social a:focus-visible { opacity: .72; }

.ns-pending {
  display: inline-block;
  font-size: var(--fs-2xs); letter-spacing: .06em; line-height: 1.7;
  color: var(--text-soft);
  border: 1px dashed var(--line-strong);
  padding: 3px 8px; margin-top: 6px;
}

/* 食安資訊（過敏原）的待確認留在警示色。
   其餘的「待確認」講的是「還在等業主」，這一顆講的是
   「這份標示可能不正確」——那是會讓人吃到不該吃的東西的等級。
   同一顆標記、換一個顏色，不另外做一套元件。 */
.ns-pending--food {
  color: var(--danger);
  border-color: currentColor;
}

/* ---------- 圖位 ----------
   🔴 跨頁共用元件，必須放在 layout.css。
   原本寫在 home.css，結果商品頁的四個圖位完全沒有樣式——
   斜線底不見、標籤跑到框外，因為 home.css 只在首頁載入。 */

.ns-slot { margin: 0; border: 1px solid var(--line); }

.ns-slot--empty {
  /* 設計稿的斜線佔位框。素材到齊後這個分支就不會出現。 */
  background: repeating-linear-gradient(135deg, #E4CDB0 0 2px, #DCC4A6 2px 12px);
  display: flex; align-items: flex-end; padding: clamp(16px, 1.8vw, 26px);
}

.ns-slot__spec {
  font-size: var(--fs-2xs); letter-spacing: .2em;
  color: #5A4433; line-height: 1.9;
  display: flex; flex-direction: column;
}
.ns-slot__master { font-size: var(--fs-xs); letter-spacing: .14em; margin: 6px 0; }

.ns-slot--filled { overflow: hidden; }
.ns-slot__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- masthead（sticky） ---------- */

/* 🔴 sticky 有三個容易漏掉的連帶影響，三個都在這一段處理：
   ① 背景必須是不透明的。原本 masthead 沒有背景色，靠 body 透出來；
      一旦 sticky，內容會從它底下穿過去。
   ② 登入狀態下 WP 的 #wpadminbar 固定在最上面。top:0 會讓 masthead 躲到它底下。
      --ns-adminbar 依 WP 自己的斷點給值（>782px 32px、≤782px 46px、≤600px 不再固定所以是 0）。
   ③ 錨點跳轉會被擋住。html 的 scroll-padding-top 要留出「縮起來之後」的高度。 */

:root {
  --ns-adminbar: 0px;
  --ns-head-stuck: 62px;      /* 縮起來之後的高度，供 scroll-padding 用 */
}
.admin-bar { --ns-adminbar: 32px; }
@media screen and (max-width: 782px) { .admin-bar { --ns-adminbar: 46px; } }
@media screen and (max-width: 600px) { .admin-bar { --ns-adminbar: 0px; } }

html { scroll-padding-top: calc(var(--ns-adminbar) + var(--ns-head-stuck) + 14px); }

.ns-masthead {
  position: sticky;
  top: var(--ns-adminbar);
  z-index: 100;
  background: var(--bg);
}

/* 🔴 2026-10-02 Oscar：標頭不收在 1280 欄位裡，logo 貼左、導覽貼右，只留頁面 gutter。 */
.ns-masthead__inner {
  max-width: none; margin: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: clamp(18px, 2.6vw, 34px) var(--gut) 20px;
}
/* 🔴 2026-10-02 Bella #3：LOGO 靠左、導覽靠右，購物車在導覽最右。
   DOM 順序是 brand → actions → nav；桌機用 order 把 nav 排到 actions 前面、brand 推到最左。 */
@media (min-width: 901px) {
  .ns-masthead__brand { margin-right: auto; }
  .ns-nav { order: 1; }
  .ns-masthead__actions { order: 2; }
  .ns-nav__list { justify-content: flex-end; }
}

.ns-masthead__brand { display: flex; align-items: baseline; gap: 18px; }

/* logo 連結：觸控目標 44px。圖本身比 44 高，所以不另外撐。 */
.ns-masthead__logo { display: inline-flex; align-items: center; min-height: 44px; }

/* 🔴 這裡一定要寫成 .ns-masthead .ns-masthead__logoimg（0,2,0）。
   WooCommerce 的 `.woocommerce img { width:100%; height:auto }` 是 (0,1,1)，
   單寫 .ns-masthead__logoimg 是 (0,1,0)，會輸。
   輸掉的後果不是「稍微跑版」——標頭的 logo 會變成 0×0（父層是 shrink-to-fit，
   width:100% 算出來是 0），頁尾的會被放大到 446px 寬。
   商店、購物車、結帳、商品頁全都掛 .woocommerce，也就是整個購買流程都會壞。
   同樣的坑 astra-bridge.css 開頭就記過一次，這是第二次。 */
.ns-masthead .ns-masthead__logoimg {
  display: block; width: auto; height: 54px;
  /* 圖檔比例 2:1，寬度自動。max-width 讓它在極窄畫面也不撐破版。 */
  max-width: 100%;
}

/* 淺色 logo 預設不出現。只有 D 版首頁最頂端（標頭壓在深色首圖上）會換成它，
   切換寫在 home-d.css。
   🔴 選擇器要 (0,2,0)，理由同上面那段——.woocommerce img 會蓋掉 (0,1,0)。 */
.ns-masthead .ns-masthead__logoimg--light { display: none; }

/* 捲動後縮起來。.is-stuck 由 main.js 依哨兵元素切換，不綁 scroll 事件。 */

/* 玻璃感：半透明 ＋ 背景模糊。內容從底下透出來一點，比一塊實心色條輕。
   🔴 三件事一定要一起做，少一件就會壞：
   ① -webkit- 前綴：Safari 到現在仍只認前綴版，沒寫的話 Safari 只會看到
      一塊 72% 的半透明色——文字壓在捲過去的內容上，對比隨內容浮動。
   ② @supports 的退路：不支援 backdrop-filter 的瀏覽器要拿到**不透明**底色，
      否則同樣是字壓在內容上。這一層不是「效果好一點」，是可讀性的底線。
   ③ 不要對 .ns-masthead 用 opacity——那會連文字一起淡掉。透明度只放在背景色。 */
/* 🔴 2026-10-02 Bella #2：捲動後改**純白、不透明、不模糊**。玻璃感那組（--glass-*）作廢。 */
.ns-masthead.is-stuck {
  background: #fff;
  box-shadow: 0 1px 0 rgba(59, 42, 30, .08);
}

.ns-masthead.is-stuck .ns-masthead__inner { padding-top: 10px; padding-bottom: 10px; }
.ns-masthead.is-stuck .ns-masthead__logoimg { height: 38px; }   /* (0,2,0)，同上 */

/* 🔴 關掉捲動錨定。
   它本來是好意：上方內容變高變矮時自動調整 scrollY，讓看的人不覺得畫面在跳。
   但這個標頭**自己就會變矮**，於是變成一個迴圈——
   縮 → 瀏覽器把 scrollY 往上拉 44 → 哨兵回到視窗 → 展開 → scrollY 被推回去
   → 縮 → …（實測 /about/ 在 scrollY≈44–60 每秒翻十幾次）。
   main.js 那邊另外做了遲滯，兩層都留：這一層治本，那一層不挑瀏覽器。
   代價是圖片晚載入時可能會有位移——本案的圖位都有 aspect-ratio 佔好位置。 */
body { overflow-anchor: none; }

@media (prefers-reduced-motion: no-preference) {
  .ns-masthead__inner { transition: padding .18s ease; }
  .ns-masthead .ns-masthead__logoimg { transition: height .18s ease; }
}

/* 哨兵：高度＝「捲多少才縮」，用負的 margin-bottom 把版面空間還回去。
   JS 沒跑到時它根本不存在，頁面只是不會縮，不會壞。 */
/* 哨兵：高度＝捲多少才縮，負的 margin-bottom 把它佔的版面空間還回去。
   🔴 高度同時也是「縮」與「展開」兩個門檻之間的死區寬度（見 main.js），
   所以它必須**大於標頭縮放的高度差**（109 → 65，也就是 44px）。
   原本是 48px，只多 4px——捲動錨定把捲動位置拉 44px 的時候就翻過去了。 */
.ns-sticky-sentinel { height: 72px; margin-bottom: -72px; pointer-events: none; }

.ns-nav__list {
  display: flex; gap: clamp(18px, 2.7vw, 34px);
  margin: 0; padding: 0; list-style: none;
}
/* 🔴 min-width 也要 44。之前的稽核只量高度，所以「選購」這種兩個字的連結
   （41×44）一直被判為過關——驗收 #5 寫的是 44×44，兩個維度都算。
   視覺上只是每個連結左右各多 1–4px，導覽的 gap 看起來略緊，不影響版面。 */
.ns-nav__list a {
  font-size: var(--fs-xs); letter-spacing: .2em; color: var(--text-soft);
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px;
}
.ns-nav__list a:hover,
.ns-nav__list a:focus-visible { color: var(--accent); }

.ns-navtoggle { display: none; }

/* 手機：漢堡。設計稿 page-m-c-手機.html 是兩條線 */
@media (max-width: 900px) {
  :root { --ns-head-stuck: 58px; }

  /* 🔴 要有 flex-wrap，展開的選單才會換到新的一行。
     少了它，flex-basis:100% 不會換行，只會把品牌名擠到剩一個字寬，
     中文被擠成直排——看起來像設計，其實是壞掉。 */
  .ns-masthead__inner { align-items: center; padding-bottom: 14px; flex-wrap: wrap; }
  .ns-masthead__brand { flex: 1 1 auto; min-width: 0; }
  .ns-masthead .ns-masthead__logoimg { height: 40px; }
  .ns-masthead.is-stuck .ns-masthead__logoimg { height: 34px; }

  /* 🔴 astra-bridge.css 為了蓋掉 Astra 的按鈕色，選擇器清單裡放了一個光禿禿的
     `button`，連帶 `button:hover`。`button:hover` 的權重是 (0,1,1)，
     **贏過** `.ns-navtoggle` 的 (0,1,0)——所以漢堡一被滑過或聚焦，
     就會被填成 --accent-hover 的深棕，而兩條線本來也是深棕，等於整個消失。
     這不是新問題，是滑過才看得到，所以一直沒被抓到。
     解法是把三個狀態一起寫成 (0,2,0)，權重蓋過去；
     hover 的回饋改成線條變色，不填底。 */
  .ns-navtoggle,
  .ns-navtoggle:hover,
  .ns-navtoggle:focus,
  .ns-navtoggle:focus-visible,
  .ns-navtoggle:active {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0;
    background: none; border: 0; box-shadow: none; cursor: pointer;
    color: var(--text);
  }
  .ns-navtoggle__bar {
    height: 1px; width: 24px; background: currentColor; display: block;
  }
  .ns-navtoggle:hover { color: var(--accent); }

  .ns-nav {
    display: none;
    flex-basis: 100%;
    border-top: 1px solid var(--line);
    margin-top: 12px; padding-top: 4px;
  }
  .ns-nav.is-open { display: block; }

  /* 🔴 選單展開時 masthead 會長到比視窗還高——手機上導覽有五列。
     sticky 元素比視窗高的話，上緣會被推出畫面，關閉鈕就按不到了。
     所以展開時讓它可以自己捲。 */
  .ns-masthead.is-navopen { max-height: calc(100dvh - var(--ns-adminbar)); overflow-y: auto; }

  .ns-nav__list { flex-direction: column; gap: 0; }
  .ns-nav__list a {
    min-height: 52px;            /* 觸控目標 */
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-s);
  }
  .ns-nav__list li:last-child a { border-bottom: 0; }
}

/* ---------- 標頭的購物車入口 ----------
   🔴 在做購買流程之前，全站沒有任何地方連到購物車：商店頁只有「看商品詳情」，
      商品頁按下加入購物車之後，唯一的出路是 Woo 那一行通知訊息裡的連結。
      設計稿上四張內頁的導覽列最右邊都有「購物車（2）」，這就是它。

   數量是伺服器端算的，不是 AJAX 片段。本站沒有 AJAX 加入購物車
   （商店頁是連結、商品頁是整頁 POST），所以每次都是新的一次請求，數字一定準。
   🔴 之後若加上整頁快取，這個數字會被快取住——要改走 wc_fragments。 */

/* DOM 順序是 brand → actions → nav：切換鈕排在它 aria-controls 的選單之前，
   手機的視覺順序也正好是這個。桌機設計稿的購物車在導覽最後，用 order 調，
   不為了視覺去動 DOM。 */
.ns-masthead__actions { display: flex; align-items: center; gap: 18px; }
/* 2026-10-02 Bella #3：導覽在前、購物車殿後（order 在上面 .ns-masthead__inner 那段統一給）。 */

.ns-masthead__cart {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--fs-xs); letter-spacing: .2em; color: var(--accent);
  white-space: nowrap;
}
.ns-masthead__cart:hover,
.ns-masthead__cart:focus-visible { color: var(--text); }

@media (max-width: 900px) {
  .ns-masthead__cart { letter-spacing: .1em; }
}

/* ---------- 按鈕 ---------- */

.ns-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 clamp(24px, 3.4vw, 44px);
  font-size: var(--fs-s); letter-spacing: .22em;
  border: 1px solid transparent;
  transition: background-color .2s, color .2s, border-color .2s;
}

.ns-btn--solid {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
.ns-btn--solid:hover,
.ns-btn--solid:focus-visible {
  background: var(--accent-hover); color: var(--on-accent-hover); border-color: var(--accent-hover);
}

.ns-btn--ghost {
  border-color: var(--line); color: var(--text);
}
.ns-btn--ghost:hover,
.ns-btn--ghost:focus-visible { border-color: var(--accent); color: var(--accent); }

/* ---------- footer ---------- */

.ns-footer {
  background: var(--footer-bg); color: var(--footer-fg);
  margin-top: clamp(46px, 9vw, 116px);

  /* 頁尾整個子樹要重定義語意層，否則 Astra 與我們自己的 a{color:var(--accent)}
     會在深底上輸出淺棕／柔沙棕，對比不足。 */
  --text: var(--footer-fg);
  --text-soft: rgba(252, 238, 219, .74);
  --accent: var(--footer-fg);
  --on-accent: var(--footer-bg);
  --accent-hover: var(--brand-sand);
  --on-accent-hover: var(--footer-bg);
  --line: rgba(252, 238, 219, .18);
  --line-strong: rgba(252, 238, 219, .38);
  /* 🔴 --danger 也會翻轉，漏了它就是深紅壓深墨（實測 1.88:1）。
     規則是「凡是宣告會翻轉的顏色，就要把配對一起宣告」——
     這一條我在 --accent 上做了，卻漏了 --danger。 */
  --danger: #F2B8AE;
}

.ns-footer__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(40px, 5vw, 66px) var(--gut) 24px;
}

.ns-footer__cols {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px;
  padding-bottom: 40px; border-bottom: 1px solid var(--line);
}

/* 同樣要 (0,2,0) 才蓋得過 .woocommerce img */
.ns-footer .ns-footer__logo {
  display: block; width: auto; height: clamp(38px, 3.6vw, 46px);
  max-width: 100%; margin-bottom: 16px;
}

.ns-footer__slogan,
.ns-footer__addr {
  font-size: var(--fs-xs); line-height: 2.1; color: var(--text-soft); margin: 0;
}
.ns-footer__addr { margin-top: 18px; }

.ns-footer__contact { list-style: none; margin: 18px 0 0; padding: 0; }
.ns-footer__contact li { font-size: var(--fs-xs); line-height: 2.1; }

.ns-footer__kicker {
  /* 2026-10-06 Oscar 字體規則：h1–h6 一律宋體 600；粗體強調、表頭一律黑體 700。它是 h2，所以從 Cormorant 改宋體。 */
  font-family: var(--font-heading); font-weight: var(--fw-display);
  font-size: var(--fs-2xs); letter-spacing: .3em; color: var(--text-soft);
  margin: 0 0 14px;
}

.ns-footer__col ul { list-style: none; margin: 0; padding: 0; }
.ns-footer__col li { font-size: var(--fs-xs); }
/* 🔴 min-width 也要給。
   高度本來就有 44，但寬度是字撐出來的——2026-09-17 把「全部商品」改成
   單一 SKU 之後比較準確的「商品」，兩個字只有 35px 寬，觸控稽核當場抓到
   六個頁面各一顆。字少的連結以後還會出現，所以修的是規則不是那一個字。 */
.ns-footer__col a {
  display: inline-flex; align-items: center;
  min-height: 44px; min-width: 44px;
}

.ns-footer__legal {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px;
  padding-top: 24px;
  /* 同上：字距把它推回「最安靜的一行」，不靠縮字級。 */
  font-size: var(--fs-2xs); letter-spacing: .09em; color: var(--text-soft);
}
.ns-footer__legal p { margin: 0; line-height: 1.95; }
.ns-footer__sep { margin: 0 .6em; }

@media (max-width: 900px) {
  /* 🔴 2026-09-19：手機頁尾實測 1056px（1.25 個視口）。品牌欄整列，
     SHOP／INFO 兩組各四個短詞條並排，砍掉一整段高度。 */
  .ns-footer__cols { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .ns-footer__brand { grid-column: 1 / -1; }
  .ns-footer__legal { flex-direction: column; }
}

/* ---------- WooCommerce 封存頁（商店、分類）----------
   Woo 迴圈的預設連結與按鈕高度只有 32–33px，不到觸控目標的 44px。
   這裡只調外觀與尺寸，不動購物流程。 */

.woocommerce ul.products li.product a.woocommerce-loop-product__link,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  display: block;
}

.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-heading); font-weight: var(--fw-display);
  font-size: var(--fs-xs); letter-spacing: .12em;
  padding: 12px 0 6px;
  min-height: 44px;
}

.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.add_to_cart_button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 24px;
  font-size: var(--fs-xs); letter-spacing: .18em;
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
}
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover {
  background: var(--accent-hover); color: var(--on-accent-hover); border-color: var(--accent-hover);
}

.woocommerce ul.products li.product .price {
  font-family: var(--font-figure); font-weight: var(--fw-fig);
  font-size: 20px; color: var(--accent);
}

/* ---------- WooCommerce 我的帳戶 ----------
   Woo 的登入表單有兩個過小的觸控目標：
   密碼顯示切換鈕（15×15 的眼睛圖示）與「忘記密碼？」連結。 */

.woocommerce form .password-input,
.woocommerce-page form .password-input {
  display: block; position: relative;
}

.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
  /* 圖示本身維持原大小，靠透明的點擊區撐到 44×44。
     top/right 用 0 讓它貼齊欄位右緣，再用 padding 把圖示推到視覺中心。 */
  position: absolute; top: 50%; right: 0;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
}

.woocommerce form .woocommerce-form-login__rememberme,
.woocommerce-page form .woocommerce-form-login__rememberme {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
}

.woocommerce .woocommerce-LostPassword a,
.woocommerce-page .woocommerce-LostPassword a,
.woocommerce-form-login .lost_password a {
  display: inline-flex; align-items: center; min-height: 44px;
}

.woocommerce form.login,
.woocommerce form.register,
.woocommerce-page form.login,
.woocommerce-page form.register {
  border-color: var(--line);
}

.woocommerce form .form-row input.input-text,
.woocommerce-page form .form-row input.input-text {
  min-height: 44px; padding: 0 12px;
  border: 1px solid var(--line); background: var(--bg-raised); color: var(--text);
}
/* 🔴 表單控制項不繼承字重，瀏覽器預設 400，而黑體只載 500／700：不寫會變成就近替代。
   寫在元素層級，商品頁的數量框（不在 .form-row 裡）也吃得到。 */
/* 權重要壓過 Astra 行內 CSS 的 input[type="text"]…{font-weight:400}（0,1,1），所以帶 html 寫成 (0,1,2)。 */
html input, html input[type], html textarea, html select { font-weight: var(--fw-text); }
/* 🔴 2026-10-06：Astra 行內 CSS 把按鈕一律設成 500，選擇器清單一路寫到
   `.woocommerce button.button`（0,2,1）、`.woocommerce input.button:disabled[disabled]:hover`（0,5,1）。
   內文還是 500 的時候剛好一致看不出來；10-06 內文改 400 後，按鈕成了全站唯一的黑體 500，而 500 已經不載了。
   用特異性去追一張三十幾個選擇器、會隨 Astra 改版變動的清單不划算，這裡用 !important：
   只管 font-weight 一個屬性，我們自己的按鈕規則都沒有設字重（.ns-btn、數量鈕、加入購物車皆然）。 */
html button, html .button, html input[type="submit"], html input[type="button"], html input[type="reset"] { font-weight: var(--fw-text) !important; }
/* label／legend 同理：Astra 行內 `label, legend {font-weight:500}`（0,0,1）。我們的 class 規則（0,1,0）仍會贏過這條。 */
html label, html legend { font-weight: var(--fw-text); }

/* 頁尾的聯絡連結（mailto／tel／LINE）。
   🔴 這條是資料填進來才會踩到的：Email 空著時這個連結根本不存在，
   一填真值就多一個 19px 的觸控目標。稽核抓到的回歸。 */
.ns-footer__contact a,
.ns-footer a[href^="mailto:"],
.ns-footer a[href^="tel:"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ---------- 共用小元件 ---------- */

/* 麵包屑。原本住在 product.css，但 product.css 只在商品頁載入，
   商店頁用不到——2026-09-16 做 archive-product.php 時搬過來。 */
.ns-crumb {
  padding: clamp(16px, 1.7vw, 22px) 0 0;
  font-size: var(--fs-2xs); letter-spacing: .12em; color: var(--text-soft);
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.ns-crumb a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px;   /* 同上：兩個維度都要 44 */
}
/* 🔴 gutter 只給「直接放在 <main> 底下」的麵包屑。
   品牌故事／常見問題／政策頁／會員頁把它放在 main 頂層，原本文字貼視窗左緣
   （桌機 x=0、內容 72）——2026-09-25 Oscar 看手機截圖抓到。
   第一版把 padding 寫在 .ns-crumb 本身，結果商品頁（.ns-product）與購物車／結帳（.ns-flow）
   的麵包屑住在已經有 gutter 的容器裡，疊成兩倍 143px。
   用「直接子元素」限定，容器裡的那些不受影響，不必為每個容器寫例外。 */
.ns-main > .ns-crumb {
  padding-left: var(--gut); padding-right: var(--gut);
  max-width: var(--maxw); margin: 0 auto; box-sizing: border-box;   /* 超過 1280 時跟內容一起置中 */
}

/* 價格。WooCommerce 輸出的順序是 <del>原價</del><ins>特價</ins>，
   設計稿是現價在前、原價在後劃掉。用 flex order 調換，不動 markup——
   改 markup 就得覆寫 Woo 的價格樣板，升級時會痛。
   原本住在 home.css，商店頁也要用，同日搬過來。 */
.ns-card__price {
  /* WooCommerce 輸出的順序是 <del>原價</del><ins>特價</ins>，
     設計稿是現價在前、原價在後劃掉。用 flex order 調換，
     不動 markup——改 markup 就得覆寫 Woo 模板，升級時會痛。 */
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--font-figure); font-weight: var(--fw-fig);
  font-size: clamp(24px, 2.2vw, 28px); color: var(--accent);
  margin: 0 0 16px;
}
.ns-card__price ins { order: 1; text-decoration: none; background: none; color: inherit; }
/* 🔴 施工標記要排最後。ins/del 有指定 order，沒指定的元素預設是 0，
   會排到它們前面——第一版就變成「定價待確認 NT$196 NT$229」。 */
.ns-card__price /* 🔴 試放圖的角標。
   佔位框會寫明規格與「待業主提供」，但一換成真圖那段字就不見了——
   於是 AI 生的試放圖在網站上看起來就是商品照。這個角標補回那件事，
   標記綁在附件 meta 上，換成實拍就自動消失（見 inc/images.php）。
   放在圖的右下角、深底淺字：圖片內容不可預測，淺底深字會有看不見的風險。 */
.ns-slot--filled { position: relative; overflow: hidden; }
.ns-slot__stub {
  position: absolute; right: 0; bottom: 0;
  /* 🔴 不透明，不是半透明。這是合規標記不是裝飾——
     壓在不可預測的照片上時，半透明的底會讓對比隨照片浮動；
     而且對比稽核量不到半透明的底（它會往上找，找到的是頁面底色）。 */
  background: #2B1E15;
  color: var(--brand-cream);
  font-size: var(--fs-2xs); letter-spacing: .1em;
  padding: 5px 12px;
}

.ns-pending { order: 3; }

.ns-card__price del {
  order: 2;
  font-family: var(--font-body); font-weight: var(--fw-text); font-size: var(--fs-2xs);
  color: var(--text-soft);
}

/* 運費揭露。緊接在價格下面——NT$90 對 NT$196 是 +46%，
   原本第一次看到是加入購物車之後。首頁與商店頁共用。 */
.ns-card__ship {
  margin: -8px 0 16px;
  font-size: var(--fs-2xs); letter-spacing: .06em; line-height: 1.85;
  color: var(--text-soft);
}

/* 口味識別色條（包裝稿的鼠尾草綠／溫暖棕）。
   🔴 2026-09-16 才真的用起來——在這之前這兩個品牌色只出現在 hover 態，
      四色配色實際只剩兩色在運作。
   只當色條，不當文字底：溫暖棕 #b97c49 配深墨字只有 3.93:1，不到 AA。
   --ns-flavour 由模板以 inline style 帶進來，對不上口味時整條不出現
   （fallback 是 transparent，不是隨便給一個色）。 */
.ns-card { border-top: 4px solid var(--ns-flavour, transparent); }

/* 素食別徽章。底色跟著口味識別色走（品牌規範第 8 頁包裝稿）：
   家鄉油蔥＝鼠尾草綠、香辣麻醬＝溫暖棕。
   🔴 兩個底色都各自配好前景色，不共用一個 --on-accent——
      鼠尾草綠是自己推導的深階，不是 --accent。 */
.ns-badge {
  flex: 0 0 auto;
  font-size: var(--fs-2xs); letter-spacing: .18em;
  padding: 5px 12px; white-space: nowrap;
}
/* 🔴 素食標記不可以用 --accent（2026-09-17 驗收：色彩層次）。
   --accent 是「這裡可以按」的顏色——價格、加入購物車、送出訂單都是它。
   「全素」原本就穿著這一身，於是商品頁上最搶眼的兩個東西是
   「加入購物車」與一個飲食標記，而後者不是要人點的。

   兩顆標記改用自己的一組色，彼此有對比、都不是 accent：
     五辛素（不是每個素食者都能吃）深橄欖 #5E6347  對米底 5.49:1
     全素　（誰都能吃）　　　　　　深咖 --brand-espresso 對米底 9.6:1
   這一組只給飲食狀態用，不與商品的風味色（--ns-flavour）共用——
   風味色是識別，這一組是狀態，兩者換一個商品就會脫鉤。 */
/* 🔴 兩顆的顏色 2026-09-17 對調過，兩個理由：
   ① 語意反了。綠色在食品標示上讀作「可以吃」，而原本綠色掛在「五辛素」
      （含紅蔥頭、純素者**不能**吃）上，深色掛在「全素」（誰都能吃）上。
   ② 風味色撞色。家鄉油蔥的風味色是鼠尾草綠 #adaf95（卡片頂線），
      它的標記原本也是綠的——驗收因此讀成「標記色跟著商品走」，
      而香辣麻醬那張又對不上，規則看起來就壞了。對調之後兩張卡都不撞，
      「頂線＝風味識別、標記＝飲食狀態」這件事才看得出來是兩套。 */
.ns-badge--sage  { background: var(--brand-espresso); color: var(--brand-cream); }  /* 五辛素　9.6:1 */
.ns-badge--brown { background: var(--brand-sage); color: var(--text); }           /* 全素　　6.08:1 */
/* 🔴 兩顆徽章原本都是深底淺字（深棕 vs 深橄欖），色弱或低視力時只差一點色相。
   改成一深一淺：五辛素（有蔥，純素不可）維持深底當警示，全素用淺鼠尾草底深字。
   --brand-sage 是 tokens 裡宣告了一直沒人用的那個。 */

/* 規格標籤（黑豆細麵體、滾水 4–5 分） */
.ns-tag {
  display: inline-flex; align-items: center;
  font-size: var(--fs-2xs); letter-spacing: .1em;
  /* 字級被下限推大之後，標籤的視覺重量跟著變重。padding 收薄一階抵銷，
     外框仍在但不再搶戲。 */
  padding: 3px 10px;
  border: 1px solid var(--line-strong);
  color: var(--text-soft);
}

/* ---------- 頁首標題（商店／購物車／結帳／品牌故事／常見問題／帳戶／404 共用）----------
   🔴 原本只存在於 shop.css，叫 .ns-shop__type。購物車與結帳是同一個元件，
      再抄兩份就是第三度分岔——而且 shop.css 只在商店頁載入，抄過去也拿不到。
      2026-09-16 做購買流程時搬來這裡，商店頁一併改用這組 class。
   🔴 2026-10-02 Oscar：「將直式都改成橫式」——原本桌機直書、手機橫排，
      現在所有寬度都橫排。標題仍是一行一個 span（nostasty_lines_esc），
      橫排時一行一個 block；原本為了直書拆開的句子，用 --ns-join 把標點補回每行行尾
      （商店頁「兩種口味」＋「兩款麵體」→「兩種口味，」／「兩款麵體」）。
      直線分隔改成標題下方一小段橫線。
   搭配 template-parts/page-head.php。 */

.ns-pagehead {
  display: flex; flex-direction: column;
  gap: 0;
  align-items: flex-start;
}

.ns-pagehead__title {
  font-family: var(--font-heading); font-weight: var(--fw-display);
  font-size: clamp(26px, 2.6vw, 34px); letter-spacing: .1em;
  margin: 0; line-height: 1.5;
  /* 2026-10-22 品牌故事標題變長（15 字），手機斷成「…生活裡的小／幸福。」；balance 讓兩行等長，
     斷在「，」附近，不會把一個詞切開。 */
  text-wrap: balance;
}

/* 每一行自己的 box，橫排時一行一個 block。 */
.ns-pagehead__line,
.ns-pagehead__subline { display: block; }
/* 直書時拆開的句子，橫排把標點補回每一行行尾（最後一行不補）。
   --ns-join 由 template part 帶進來，沒帶的頁面是空字串。 */
.ns-pagehead__line:not(:last-child)::after { content: var(--ns-join, ""); }

.ns-pagehead__sub {
  /* 2026-10-06 Oscar：副標改黑體 700。原本宋體 600 跟標題同字重只差字級，主從不清楚；
     換家族（宋→黑）＋加重，跟標題分開、也跟下面的黑體 400 內文分開。 */
  font-family: var(--font-body); font-weight: var(--fw-em);
  font-size: var(--fs-s); letter-spacing: .1em; line-height: 2;
  color: var(--text-soft);
  margin: 14px 0 0;
}

/* 標題下方一小段橫線。原本是直書旁的 1px 直線（flex: 0 0 1px、min-height 240）。 */
.ns-pagehead__rule {
  display: block; width: 48px; height: 1px; background: var(--line-strong, var(--line));
  margin-top: clamp(18px, 2.2vw, 28px);
}

@media (max-width: 900px) {
  /* 麵包屑在手機一行 60px 太肥（行高 2 ＋ 16px 上留白）——收到 42px 左右。 */
  .ns-crumb { line-height: 1.5; padding-top: 4px; }
  .ns-pagehead__title { font-size: clamp(24px, 6.4vw, 30px); }
  .ns-pagehead__sub { margin-top: 10px; }
  .ns-pagehead__rule { display: none; }
}

/* ---------- 頁面骨架：標題欄 ＋ 內容欄 ----------
   🔴 原本叫 .ns-flow__grid，住在 flow.css（只在購物車／結帳載入）。
      做聯絡我們時發現那一頁要用同一個骨架——第四次遇到「共用元件住在單頁 CSS」。
      改名 .ns-pagegrid 搬來這裡，購物車與結帳一併改用。 */

.ns-pagegrid {
  /* 2026-10-02 標題改橫式後第一欄 240 → 264（「買之前先問清楚」34px 一行約 262px） */
  display: grid; grid-template-columns: 264px 1fr;
  gap: clamp(26px, 5vw, 56px);
  padding-top: clamp(24px, 4vw, 52px);
  align-items: start;
}

/* min-width: 0 是必要的。grid item 預設 min-width:auto，
   裡面一個放不下的長字（例如 Email）會把整欄撐寬，而不是換行。 */
.ns-pagegrid__body { min-width: 0; }

/* 訂單完成頁的頁首標題只有四個字、副標兩行，固定欄太寬——
   主欄被壓到 470 之後四格資料帶就折行了。這一頁讓標題欄自己決定寬度。 */
.ns-pagegrid--thanks { grid-template-columns: auto minmax(0, 1fr); }

/* 三欄：頁首標題 ／ 分頁清單 ／ 內容。標題欄寬度由內容決定（有最小值，見下）。 */
/* 🔴 第一欄固定最小寬度。原本是 auto：政策頁的標題一行（92px）、常見問題的標題＋副標（202px），
   側欄與內文就跟著左右飄 110px，兩頁並排看起來像兩套版面（2026-09-25 Oscar）。
   釘在 204（常見問題那組量到 202）：所有用這個骨架的頁面，側欄與內文都落在同一個 x。標題更寬時 auto 仍會長。 */
.ns-pagegrid--aside { grid-template-columns: minmax(264px, auto) 230px minmax(0, 1fr); gap: clamp(26px, 5vw, 72px); }

@media (max-width: 900px) {
  .ns-pagegrid { grid-template-columns: 1fr; gap: 18px; }
  .ns-pagegrid--aside { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- 區段內的分頁清單（.ns-sidenav） ----------
   桌機是左欄一疊橫線清單，手機是頂部一排橫向捲動的籤。

   🔴 原本叫 .ns-policy__nav，住在 pages.css（只有品牌故事／政策／404 載入）。
      2026-09-18 做「我的帳戶」時發現那一頁要用同一個東西——
      這已經是第五次遇到「共用元件住在單頁 CSS」（前四次的紀錄見
      .ns-pagegrid 與 .ns-note 上方的說明）。這次直接抽出來，
      政策頁一併改用，pages.css 裡那一份刪掉。

   政策頁多一種狀態（.is-off，尚未發佈、不是連結、帶一顆標記），
   那是政策頁獨有的，留在 pages.css 當修飾字。 */

/* 🔴 min-width: 0 是必要的。grid item 預設 min-width:auto，
   手機那組橫向捲動的籤會把整欄撐寬，overflow-x: auto 因此沒有東西可捲，
   結果是整頁多出 12px 的水平捲動。 */
.ns-sidenav { min-width: 0; }
/* 桌機黏住（2026-09-25 Oscar：常見問題的側欄有 sticky，其它頁面也做）。
   在 grid 的側欄格子裡 sticky 要 align-self: start，不然格子被拉到整篇內文的高度，
   sticky 沒有活動空間。top 接標頭高度變數，標頭改了會自己跟上。
   手機（≤900）不黏：那時側欄已經是內文上方的一排籤，黏住會吃掉半個螢幕。 */
@media (min-width: 901px) {
  .ns-sidenav {
    position: sticky; align-self: start;
    top: calc(var(--ns-adminbar) + var(--ns-head-stuck) + 16px);
  }
}
.ns-sidenav ul { list-style: none; margin: 0; padding: 0; }

.ns-sidenav__link {
  display: flex; align-items: center; min-height: 48px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs); letter-spacing: .1em; color: var(--text-soft);
}
.ns-sidenav__link.is-on { color: var(--accent); }
a.ns-sidenav__link:hover,
a.ns-sidenav__link:focus-visible { color: var(--text); }

.ns-sidenav__ask {
  margin: 28px 0 0; font-size: var(--fs-2xs); line-height: 2; color: var(--text-soft);
}
.ns-sidenav__ask a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 900px) {
  /* 🔴 橫向捲動的籤要看得出來還能捲。
     實測 390 寬：最後一格「隱私權政策（尚未發佈待確認）」在 x≈372 被畫面
     切斷，而畫面上沒有任何暗示可以左右滑——被切斷看起來像壞掉。
     右緣加一層漸層淡出（mask），捲到底時漸層自己消失。 */
  /* 🔴 2026-09-19：三顆籤在 390 寬是 424px，放不下就換行，不再橫向捲動。
     原本的遮罩淡出兩位評審都沒看出「可以滑」，只看到第三顆被切掉。 */
  .ns-sidenav ul {
    display: flex; gap: 8px; flex-wrap: wrap;
  }
  .ns-sidenav li { flex: 0 0 auto; scroll-snap-align: start; }
  .ns-sidenav__link {
    border: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
    padding: 0 16px; white-space: nowrap; min-height: 44px;
  }
  .ns-sidenav__link.is-on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
  .ns-sidenav__ask { margin-top: 18px; }
}

/* ---------- 施工說明框 ----------
   設計稿上的 .note：虛線框 ＋ 淡底。與 .ns-pending 是同一套「施工中」的視覺語言，
   一眼就能與真正的內容分開。顯示條件同樣是 nostasty_notes_visible()。
   🔴 原本住在 flow.css；品牌故事、聯絡、政策、404 四頁都要用，所以搬來這裡。 */

.ns-note {
  border: 1px dashed var(--accent);
  background: var(--bg-alt);
  padding: 16px 20px; margin: 18px 0 0;
}
/* 🔴 政策頁那段「設計端不提供法律意見」的備註，評審把它讀成正式內容——
   因為它長得跟正式內容一樣。加一行標籤說清楚它是什麼、正式站不會有。
   只標 div：functions.php 的 <details class="ns-note"> 自己有 summary。 */
div.ns-note::before {
  content: "施工備註　正式站不會顯示這一段";
  display: block; margin-bottom: 8px;
  font-family: var(--font-body); font-weight: var(--fw-text); font-size: var(--fs-2xs); letter-spacing: .08em;
  color: var(--accent);
}
.ns-note p { margin: 0; font-size: var(--fs-2xs); line-height: 1.95; color: var(--text); }
.ns-note p + p { margin-top: 10px; }
.ns-note__head { color: var(--accent); letter-spacing: .06em; }

/* 🔴 長的施工說明改成可收合（2026-09-17 驗收）。
   結帳頁那一段 314 個字、佔掉表單中段一整屏，而它是寫給業主看的
   技術決策說明（裡面有「WooCommerce」「物流串接」這種詞）。
   顧客正在填收件資料時被迫讀它，等於多一個「要不要理會這段話」的決定。
   收起來之後預設只剩一行標題，業主要看時點開；內容一個字都沒有少。 */
summary.ns-note__head {
  cursor: pointer; list-style: none;
  font-size: var(--fs-2xs); line-height: 1.95;
  display: flex; align-items: center; gap: 10px;
  min-height: 44px;                 /* 它是可點的，觸控目標要夠大 */
}
summary.ns-note__head::-webkit-details-marker { display: none; }
summary.ns-note__head::after {
  content: "＋"; margin-left: auto; font-size: var(--fs-2xs);
}
details.ns-note[open] > summary.ns-note__head::after { content: "－"; }
details.ns-note[open] > summary.ns-note__head { margin-bottom: 8px; }

/* 🔴 收起來時不要畫虛線框。
   結帳頁一頁有兩則施工說明 ＋ 一顆「條文文字待確認」，三個紅框疊在
   決策最密集的那一頁。收合已經把長度壓成一行，但「框」本身還在吵。
   關著就是一條細線 ＋ 一行字；點開才變回完整的虛線框。 */
details.ns-note:not([open]) {
  border: 0; border-left: 2px solid var(--accent);
  background: transparent;
  padding: 0 0 0 14px;
}
summary.ns-note__head:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- 預覽版待辦的那一行 ----------
   取代原本散在頁尾的五顆橘色虛線框。橘色是強調色，
   把它花在「這裡缺資料」上，真正要人點的地方就不顯眼了。 */
.ns-preview {
  margin: 20px 0 0; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-2xs); letter-spacing: .06em; line-height: 1.95;
  color: var(--text-soft);
}
.ns-preview b { font-weight: var(--fw-em); letter-spacing: .14em; }

/* ---------- 本頁施工備註 ----------
   寫給我們與業主看的技術說明，全部收在頁尾一個摺疊區。
   它們原本插在內容裡，而購買主線上連著三頁都有——顧客的動線
   不需要被「這件事怎麼決定的」打斷三次。內容一個字都沒有少。 */
.ns-devnotes {
  margin: 22px 0 0; padding-top: 18px;
  border-top: 1px solid var(--line);
}
.ns-devnotes__head {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 10px;
  min-height: 44px;
  font-size: var(--fs-2xs); letter-spacing: .1em; color: var(--text-soft);
}
.ns-devnotes__head::-webkit-details-marker { display: none; }
.ns-devnotes__head::after { content: "＋"; }
.ns-devnotes[open] > .ns-devnotes__head::after { content: "－"; }
.ns-devnotes__head:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ns-devnotes__body { display: grid; gap: 10px; padding-bottom: 6px; }

/* 🔴 搬進來的備註要自己帶顏色。
   這一區長在深色頁尾上，而 .ns-note 的文字色是深墨——直接搬會變成
   深字壓深底。實測聯絡我們那則的 A/B/C 卡片掉到 1.11:1（那一則因此
   留在原頁；那一頁 2026-09-17 隨 A 案刪掉了），但下一個被搬進來的不會這麼好運。 */
.ns-devnotes .ns-note,
.ns-devnotes .ns-note p,
.ns-devnotes .ns-note__head { color: var(--footer-fg); }
.ns-devnotes .ns-note { background: transparent; border-color: rgba(252, 238, 219, .28); }
.ns-devnotes .ns-note strong { color: var(--footer-fg); }

/* 頁尾字號的狀態字（「改版後重新申請中」），與同一行的字同色系、不加框 */
.ns-soft { color: var(--text-soft); }

/* ---------- 名稱／值成對列 ----------
   訂單完成頁的收件資訊、聯絡頁的 Email／服務時間／地址，是同一個元件。
   🔴 同上，原本住在 flow.css。 */

.ns-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 0; }
.ns-pairs__row {
  display: flex; gap: 20px; padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs);
}
.ns-pairs__row--wide { grid-column: 1 / -1; }
/* Astra 把 dt 設成粗體。這裡的 dt 是欄位名、dd 才是內容，
   標籤比內容粗會讓人先讀到標籤。設計稿兩者都細，靠級距與顏色分層。 */
.ns-pairs dt { min-width: 5em; color: var(--text-soft); margin: 0; font-weight: var(--fw-text); }
.ns-pairs dd { margin: 0; color: var(--text); }
/* 值裡面的連結（聯絡頁的客服 Email）也是觸控目標。訂單完成頁的成對列沒有連結，
   所以這一條到做聯絡頁才被稽核抓到（實測 181×25）。 */
.ns-pairs dd a { display: inline-flex; align-items: center; min-height: 44px; }
.ns-pairs dd address { font-style: normal; line-height: 1.9; }

@media (max-width: 900px) {
  .ns-pairs { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- 數量步進器（−／1／＋）----------
   🔴 原本住在 flow.css，而 flow.css 只在購物車／結帳載入——
      商品頁的數量欄因此一直是光禿禿的原生 number input，
      而那是全站最關鍵的那顆「加入購物車」旁邊。
      這是第五次遇到「共用元件住在單頁 CSS」，判準見 flow.css 檔頭。

   按鈕由 main.js 建（class 帶 .ns-plain，讓 astra-bridge.css 的
   `button` 規則放過它——否則會被填成主色，前景與底色同深，整顆消失）。 */

.ns-qty,
.quantity {
  display: flex; align-items: center;
  border: 1px solid var(--line-strong); width: fit-content;
}

/* 🔴 選擇器要寫到 (0,3,1)。`.quantity input.qty`（0,2,1）打不過
   Astra／Woo 那條把表單輸入框設成 min-height:35px 的規則——
   實測搬過來之後購物車的數量框從 44px 掉到 40px，觸控目標稽核當場抓到。
   flow.css 裡原本那條是 `.ns-cart__qty .quantity input.qty`，也是 (0,3,1)，
   搬家時把深度改淺了才出事。這是「搬共用元件」最容易漏的一步。 */
.woocommerce .quantity input.qty,
.woocommerce-page .quantity input.qty,
.ns-product__cart .quantity input.qty,
.ns-cart__qty .quantity input.qty {
  width: 56px; min-height: 44px; padding: 0; text-align: center;
  /* 🔴 數量用內文字體，不用 Cormorant。Cormorant 的數字是舊式字形，
     單獨一個「1」會被寫成沒有襯線的豎線、看起來像大寫 I——
     價格有 NT$ 與多位數當脈絡讀得出來，但「數量：1」沒有脈絡可依。
     （這個判斷原本只寫在 product.css 的商品頁覆寫裡，購物車那份卻用了
     Cormorant 也沒開等高數字——同一個坑踩在不同頁面上。收成一條。） */
  font-family: var(--font-body); font-weight: var(--fw-text);
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
  font-size: var(--fs-s); color: var(--text);
  background: none; border: 0; border-radius: 0;
  /* 原生的上下箭頭只有 ~13px 寬，遠小於觸控目標，而且與我們的 −／＋ 重複。
     iOS Safari 更常常整個不顯示——那正是這一段存在的理由。 */
  -moz-appearance: textfield; appearance: textfield;
}
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 欄位底下的補充說明（Woo 的 .description）。與標籤同樣的理由：
   手機的根字級是 14.592px，沒有明確指定就會穿過 16px 下限。 */
.ns-fields .description,
.ns-flow form.ns-checkout .form-row .description {
  display: block; margin-top: 8px;
  font-size: var(--fs-2xs); line-height: 1.9; color: var(--text-soft);
}

/* 🔴 .ns-plain 只讓 astra-bridge.css 放過它，Astra 自己還有一組 button 規則，
   所以尺寸與去背仍要在這裡明寫。 */
.ns-qty__btn,
.ns-qty__btn:hover,
.ns-qty__btn:focus,
.ns-qty__btn:focus-visible,
.ns-qty__btn:active {
  width: 44px; min-height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-s); line-height: 1;
  background: none; border: 0; box-shadow: none; cursor: pointer;
  color: var(--text-soft);
}
.ns-qty__btn:hover { color: var(--accent); }

/* ---------- 表單欄位的基本外觀 ----------
   🔴 這裡是「長什麼樣」的唯一定義。結帳頁另有一份同樣數值的規則
      （flow.css 的 .ns-fields .form-row input.input-text），那不是複製貼上偷懶——
      Woo 自己的規則特異性比較高，要蓋掉就得寫得一樣深。改外觀要兩邊一起改。 */

.ns-f__label {
  display: block;
  font-size: var(--fs-2xs); letter-spacing: .14em; color: var(--text-soft);
  line-height: 1.6; font-weight: var(--fw-text); margin-bottom: 6px;
}

.ns-f__input {
  width: 100%; min-height: 52px; padding: 0 14px;
  font-family: var(--font-body); font-weight: var(--fw-text); font-size: var(--fs-s);
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: 0;
}

/* ---------- 版面骨架的共同底 ---------- */

/* 🔴 這四個 class 原本各自寫在 home.css 與 product.css 裡，兩份還刻意分歧
   （product 的 padding 與 h2 級距比較小）。做商店頁時才發現問題：
   shop.css 兩邊都不是，於是 .ns-kicker 與 .ns-prose 掉回 Astra 的 14.6px，
   一路穿過剛立的 16px 下限。

   解法是把「共同底」放這裡，頁面檔只留真正要覆寫的那幾行。
   載入順序是 layout → home｜product｜shop，所以頁面檔照樣蓋得掉。
   不把兩份合併成一份——那會改動已經驗收過的首頁與商品頁。 */

.ns-section {
  display: grid;
  gap: clamp(18px, 3.7vw, 48px);
  padding: clamp(44px, 8vw, 108px) var(--gut) 0;
}

/* 🔴 字距 .4em 不是隨手調的。2026-09-16 立的 16px 字級下限把 kicker、tag、
   badge、頁尾法規字全部推到接近內文尺寸——編輯直書這個方向的核心美感就是
   「大標題 vs 極小輔助字」的強反差，級距反差因此從設計稿的 5.5 倍掉到約 3.6 倍。
   下限不能退（那是無障礙底線），所以改從**字距**找回對比：
   字距拉開的字看起來更輕、更像標記而不是內文，不必把字改小。 */
.ns-kicker {
  font-family: var(--font-figure); font-weight: var(--fw-fig);
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
  font-size: clamp(16px, 1vw, 17px); letter-spacing: .4em; color: var(--text-soft);
  margin: 0; padding-top: 8px;
  display: flex; flex-direction: column; gap: 2px;
}

.ns-h2 {
  font-family: var(--font-heading); font-weight: var(--fw-display);
  font-size: clamp(27px, 3vw, 38px); letter-spacing: .14em;
  line-height: 1.6; margin: 0 0 clamp(20px, 2.6vw, 34px);
}

/* 橫排、不 sticky 的 kicker。用在沒有分節欄的頁面（聯絡、政策、404）——
   那些頁面的 kicker 是內容上方的一行小標，不是跟著捲動的分節標記。 */
.ns-kicker--flat {
  flex-direction: row; gap: 10px; padding-top: 0;
  margin-bottom: 14px;
}

.ns-prose { display: flex; flex-direction: column; gap: clamp(18px, 1.6vw, 20px); max-width: 46em; }
.ns-prose p { margin: 0; font-size: var(--fs-s); line-height: 2.1; color: var(--text-soft); }

/* 分節標記跟著捲動停在標頭底下：看 STORY 時上面是 STORY，捲到商品區換成 NOODLES。
   ─────────────────────────────────────────────────────────
   不需要 JS。每個 .ns-section 是一個 grid，kicker 是第一欄的 grid item，
   position: sticky 的活動範圍就是它自己的 grid area ＝ 那一節的高度；
   捲出該節時自然被下一節的 kicker 頂掉，交接是瀏覽器自己算的。

   🔴 align-self: start 是必要的。grid item 預設 stretch，被拉成整欄高之後
      「沒有可以移動的空間」，sticky 會完全沒有作用——看起來像沒寫。

   top 要同時避開 sticky 標頭與登入時的 admin bar，
   所以接在 layout.css 那兩個變數後面，不要各寫各的。 */
@media (min-width: 901px) {
  .ns-kicker {
    position: sticky;
    align-self: start;
    top: calc(var(--ns-adminbar) + var(--ns-head-stuck) + 18px);
  }
  /* 🔴 align-self 也要一起重設，不是只有 position。
     上面那條 align-self: start 是給「分節欄裡的 sticky kicker」用的
     （grid item 被 stretch 就沒有可移動空間，sticky 會失效）。
     .ns-kicker--flat 不在分節欄裡，它常常是 flex 容器的子元素——
     留著 start 會讓父層的 align-items: center 失效，kicker 就貼在左邊。
     實測：OUR NOODLES 在 1440 靠左（left 152），手機反而是置中的
     （那條規則在 min-width: 901px 裡面），兩個斷點長得不一樣。 */
  .ns-kicker--flat { position: static; align-self: auto; }
}

/* 手機也做（2026-09-17 業主指定：把分節標記黏住當成網站特色之一）。
   ─────────────────────────────────────────────────────────
   原本手機不做，理由是「黏住之後會壓在內文上」。那個顧慮是對的，
   解法不是不做，是給它一條**滿版的底色帶**：內文從底下捲過去、不透出來。

   🔴 手機版分節要改成 display: block，不能留著單欄 grid。
      grid item 的 sticky 活動範圍是它自己的 grid area——單欄的時候
      kicker 的 area 就只有它自己那一列（30px），等於沒有可以移動的空間，
      寫了 position: sticky 也完全不會動。改成 block 之後，
      sticky 的容器變成整個 .ns-section，活動範圍才是那一節的高度。
      （桌機是雙欄，kicker 的 area 本來就跨整節高，所以桌機不必改。）

   滿版：分節在首頁／品牌故事有 var(--gut) 的左右內距，商品頁沒有
   （由 .ns-product 提供）。兩邊都用負的 margin-inline 拉到視窗邊緣，
   同一條規則因此在兩種頁面都貼齊。 */

@media (max-width: 900px) {
  .ns-section { display: block; }
  .ns-section > .ns-kicker { margin-bottom: 14px; }

  .ns-kicker {
    flex-direction: row; gap: 14px; padding-top: 0;
    position: sticky;
    top: calc(var(--ns-adminbar) + var(--ns-head-stuck));
    z-index: 3;
    background: var(--bg);
    margin-inline: calc(var(--gut) * -1);
    padding: 12px var(--gut);
  }

  /* 沒有分節欄的頁面（政策、404）不黏——那裡的 kicker 是內容上方的一行小標。 */
  .ns-kicker--flat {
    position: static;
    background: none;
    margin-inline: 0;
    padding: 0;
  }
}

/* ============================================================
   Woo 的通知訊息（全站共用）
   2026-09-17 從 flow.css 搬過來。原本只有購物車／結帳／完成頁有樣式，
   而商品頁「加入購物車」成功那一則也是同一個元件——那一則最重要。
   ============================================================ */

/* ---------- Woo 的通知訊息 ---------- */

.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
  list-style: none;
  margin: 18px 0 0; padding: 16px 20px;
  font-size: var(--fs-xs); line-height: 1.9;
  border-top: 2px solid var(--accent);
}

/* 🔴 圖示壓在第一個字上——是上面那條 padding 造成的，不是 Woo 的錯。
   Woo 的 ::before 是絕對定位在 left:1.5em，預設的 padding-left 是 3.5em
   （正好留出位置）。我們把 padding 改寫成 16px 20px 之後，
   圖示就疊到文字上：實測購物車頁第一則變成「2✓ד家鄉油蔥”」，
   第二則的左引號整個被蓋掉。兩個裝置寬度都重現。
   把左側的位置留回來，順便讓圖示對齊到垂直中線（通知會折行）。 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error { padding-left: 52px; }

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  left: 20px; top: 50%; transform: translateY(-50%); line-height: 1;
}

.woocommerce-error,
.woocommerce .woocommerce-error { border-top-color: var(--danger); }
.woocommerce-error li { margin: 0; }
.woocommerce-message .button { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- 內容頁收尾的「去看商品」卡片（template-parts/cta-shop.php）----------
   2026-09-25 從 pages.css 搬來：品牌故事與常見問題共用，後者不載 pages.css。 */
.ns-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 3vw, 40px); flex-wrap: wrap;
  margin: clamp(46px, 7vw, 92px) var(--gut) 0;
  padding: clamp(28px, 3.4vw, 44px) clamp(24px, 3.6vw, 48px);
  border: 1px solid var(--line-strong);
}
.ns-cta__kicker {
  font-family: var(--font-figure); font-weight: var(--fw-fig);
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
  font-size: var(--fs-2xs); letter-spacing: .3em; color: var(--text-soft);
  margin: 0 0 10px;
}
.ns-cta__line {
  /* 2026-10-06 由 p 改 h2（2026-10-06 Oscar 字體規則：h1–h6 一律宋體 600；粗體強調、表頭一律黑體 700。），行高鎖回原本 p 的 1.9，畫面不變。 */
  font-family: var(--font-heading); font-weight: var(--fw-display);
  font-size: clamp(20px, 2.2vw, 26px); letter-spacing: .16em; margin: 0; line-height: 1.9;
}
@media (max-width: 900px) {
  .ns-cta { flex-direction: column; align-items: stretch; }
  .ns-cta .ns-btn { width: 100%; }
}

/* ---------- 劃線原價的那條線 ----------
   text-decoration: line-through 的高度由字型的 strikeout 度量決定，
   Noto Serif TC 那個值是給方塊字的中線用的，套在拉丁數字上偏低——
   2026-09-25 Oscar 看商品頁：「NT$229 的刪除線沒有在正中間」。
   自己畫：偽元素貼在 del 的正中，line-height 收成 1 讓盒子就是字身，
   兩處價格（口味區／商品頁）共用；hero 2026-10-02 隨 banner 版拿掉。 */
.ns-dprod__amount del,
.ns-product__price del {
  text-decoration: none; position: relative; line-height: 1; display: inline-block;
}
.ns-dprod__amount del::after,
.ns-product__price del::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px solid currentColor; transform: translateY(-50%);
}

/* ---------- 內容頁收尾的協助框（template-parts/help-foot.php）----------
   2026-09-25 從 pages.css 的 .ns-policy__foot 搬來改名：政策三頁與常見問題共用。 */
.ns-helpfoot {
  display: flex; justify-content: space-between; align-items: center;
  gap: clamp(16px, 3vw, 30px); flex-wrap: wrap;
  margin: clamp(30px, 4vw, 40px) 0 0;
  padding: clamp(18px, 2.4vw, 24px) clamp(20px, 2.8vw, 28px);
  border: 1px solid var(--line-strong);
}
.ns-helpfoot p { margin: 0; font-size: var(--fs-xs); line-height: 2; color: var(--text-soft); }
.ns-helpfoot a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-xs); }
@media (max-width: 900px) {
  .ns-helpfoot { flex-direction: column; align-items: flex-start; }
}

/* ---------- 回到頂端（Astra 內建 #ast-scroll-top）：手機 ----------
   🔴 2026-10-06 Oscar：Astra 預設 32×32、距底 30px，黏底購買列（首頁、商品頁）或黏底結帳列（購物車）
   出現時會**疊在「選購」「去結帳」上面**——它的 z-index 99 比兩條列都高，點那個角落是回頂端不是下單。
   改成：44×44（觸控下限）、右邊距對齊頁面 gutter、底部加 iPhone 橫條安全距離；
   有黏底列時往上讓到列的上方 12px（--ns-fab-lift 由 main.js 依可見的那條列量高度給）。桌機不動。
   `html #ast-scroll-top`（1,0,1）壓過 Astra 行內的 `#ast-scroll-top`（1,0,0）。 */
@media (max-width: 900px) {
  html #ast-scroll-top {
    width: 44px; height: 44px; line-height: 44px;
    right: var(--gut);
    bottom: max(calc(20px + env(safe-area-inset-bottom, 0px)), calc(var(--ns-fab-lift, 0px) + 12px));
  }
  @media (prefers-reduced-motion: no-preference) {
    html #ast-scroll-top { transition: bottom .22s ease; }
  }
}