/*
Theme Name: Niiice Commerce
Theme URI: https://niiiceturbo.com
Author: Niiice Turbo
Author URI: https://niiiceturbo.com
Description: Niiice Turbo 電商範本的店面主題。沙色極簡語言，商流版面由 Niiice Commerce 外掛提供。刻意做成傳統主題（非區塊主題）——區塊主題會讓外掛的固定商流樣板整組失效，見 PITFALLS #257b。
Version: 1.1.1
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GPL-2.0+
License URI: http://www.gnu.org/licenses/gpl-2.0.txt
Text Domain: niiice-commerce-theme
Tags: e-commerce, minimal, two-columns, custom-menu, translation-ready
*/

/* ────────────────────────────────────────────────
 * 設計語言（設計稿：AI_STYLE_WALL/docs/prototypes/commerce-theme/）
 *
 * --nc-* token 若外掛（Niiice Commerce）已注入就用它的，這裡的值是 fallback：
 * 主題單獨啟用（外掛未啟用或 storefront flag 關）時仍看得到完整設計。
 * ──────────────────────────────────────────────── */
:root {
  /* 2026-08-03 起＝設計基準 ellipsis.tw 實測值（外掛 TOKENS 是真相，這裡是 fallback） */
  --nc-sand: #FBF9F5;
  --nc-surface: #FFFFFF;
  --nc-ink: #0E0E0E;
  --nc-ink2: #474642;
  --nc-hair: #E7E4DB;
  --nc-sale: #8C4A32;
  --nc-accent: #CCD0B6;
  --nc-radius: 0px;
  --nc-ratio: 4 / 5;
  --nc-cols: 3;

  --nct-btn-radius: 40px;
  --nct-foot: #F2F1E9; /* 基準站頁尾實測底色 */
  --nct-ink3: color-mix(in srgb, var(--nc-ink2) 62%, var(--nc-sand));
  --nct-hair-soft: color-mix(in srgb, var(--nc-hair) 62%, var(--nc-sand));
  /* 基準站全站是 Noto Serif TC 襯線體（functions.php 從 Google Fonts 載入） */
  --nct-font: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --nct-maxw: 1180px;
  --nct-sp-2: 8px;
  --nct-sp-3: 12px;
  --nct-sp-4: 16px;
  --nct-sp-5: 24px;
  --nct-sp-6: 32px;
  --nct-sp-7: 48px;
  --nct-sp-8: 72px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--nc-sand);
  /* 基準站內文＝ink 的 75%（標題才是全墨） */
  color: color-mix(in srgb, var(--nc-ink) 75%, transparent);
  font-family: var(--nct-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.038em; /* 基準站實測 0.6px@16px */
  -webkit-font-smoothing: antialiased;
}

/* 標題＝基準站的襯線粗體（h1 實測 24px/700；商品頁大標 40px/700 由外掛層供給）。
   原「字重上限 500」讓位給基準站——那條是 Niiice 自家 UI 的 GR 規範，
   客戶店面以 Justin 指定的基準站為準。 */
h1, h2, h3, h4, h5, h6, strong, b, th { font-weight: 700; color: var(--nc-ink); }
h1, h2, h3, h4 { margin: 0 0 var(--nct-sp-4); line-height: 1.4; text-wrap: balance; letter-spacing: 0.01em; }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
p { margin: 0 0 var(--nct-sp-4); }
a { color: var(--nc-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--nc-ink);
  outline-offset: 2px;
}
img { max-width: 100%; height: auto; }

.nct-wrap { width: 100%; max-width: var(--nct-maxw); margin: 0 auto; padding: 0 var(--nct-sp-5); }
.nct-skip {
  position: absolute; left: -9999px;
  background: var(--nc-ink); color: var(--nc-sand); padding: 10px 16px; z-index: 100;
}
.nct-skip:focus { left: var(--nct-sp-4); top: var(--nct-sp-4); }

/* ── 頁首 ─────────────────────────────────────── */
.nct-header {
  background: var(--nc-surface);
  border-bottom: 1px solid var(--nc-hair);
  position: sticky; top: 0; z-index: 50;
}
/* 導覽靠左（設計基準 ellipsis.tw）：Logo 與選單是同一組靠左，工具列推到最右。
   頁首高度對齊基準站的份量（實測 154px 含大 logo；文字 logo 站取 96px）。 */
.nct-header-inner {
  display: flex; align-items: center; gap: var(--nct-sp-5);
  min-height: 96px;
}
.nct-lead { display: flex; align-items: center; gap: clamp(20px, 4vw, 56px); min-width: 0; }
.nct-tools { margin-left: auto; }
.nct-brand { font-size: 18px; font-weight: 700; color: var(--nc-ink); letter-spacing: 0.08em; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.nct-brand img { max-height: 64px; width: auto; display: block; }
.nct-nav ul { display: flex; gap: var(--nct-sp-5); list-style: none; margin: 0; padding: 0; }
.nct-nav a { font-size: 15px; color: var(--nc-ink2); text-decoration: none; }
.nct-nav a:hover, .nct-nav .current-menu-item > a { color: var(--nc-ink); }
.nct-tools { display: flex; align-items: center; gap: 2px; }
/* 頁首功能性圖示：workspace UI 禁令**例外 4**（2026-08-03 Justin 拍板）——
   僅購物車／搜尋／數量增減／關閉四種，inline SVG 單一 stroke 家族、全部帶 aria-label，
   適用範圍限客戶的電商店面前台。不得再自行擴張到其他圖示。 */
.nct-ico {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--nc-ink);
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; text-decoration: none;
}
.nct-ico:hover { color: var(--nc-ink2); }
.nct-ico svg { display: block; }
.nct-ico[aria-expanded="true"] { color: var(--nc-ink2); }
.nct-cart-tool { display: inline-flex; }
/* 件數徽章＝基準站的鼠尾草綠小圓（購物車 icon 右上） */
.nct-count {
  position: absolute; top: 3px; right: 0;
  min-width: 18px; height: 18px; padding: 0 4px;
  font-size: 10.5px; line-height: 18px; text-align: center;
  background: var(--nc-accent); color: var(--nc-ink);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.nct-search-panel { display: none; padding: var(--nct-sp-4) 0 var(--nct-sp-5); border-top: 1px solid var(--nct-hair-soft); }
.nct-search-panel[data-open="1"] { display: block; }
.nct-search { display: flex; gap: var(--nct-sp-2); }
.nct-search input[type="search"] {
  flex: 1; font: inherit; font-size: 16px; padding: 12px var(--nct-sp-4);
  border: 1px solid var(--nc-hair); border-radius: var(--nc-radius);
  background: var(--nc-surface); color: var(--nc-ink); min-height: 48px;
}

/* ── 主內容 ───────────────────────────────────── */
.nct-main { min-height: 55vh; padding: var(--nct-sp-7) 0 var(--nct-sp-8); }
.nct-page-head { margin-bottom: var(--nct-sp-6); }
.nct-page-head h1 { font-size: 24px; font-weight: 700; margin-bottom: 6px; }
.nct-page-head p { color: var(--nc-ink2); font-size: 13.5px; margin: 0; }
.nct-prose { max-width: 68ch; }
.nct-prose img { border-radius: var(--nc-radius); }
/* 購物車／結帳／會員頁不套 68ch — 表單與訂單表格需要整個容器寬度 */
.nct-page-body { width: 100%; }
.nct-entry { border-bottom: 1px solid var(--nct-hair-soft); padding-bottom: var(--nct-sp-5); margin-bottom: var(--nct-sp-5); }
.nct-entry:last-child { border-bottom: 0; }
.nct-entry h2 { font-size: 20px; margin-bottom: 6px; }
.nct-entry h2 a { text-decoration: none; }
.nct-meta { font-size: 12.5px; color: var(--nct-ink3); }
.nct-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 28px;
  background: var(--nc-accent); color: var(--nc-ink);
  border: 0; border-radius: var(--nct-btn-radius);
  font: inherit; font-size: 15px; letter-spacing: 0.04em;
  text-decoration: none; cursor: pointer; transition: background-color .18s ease-out;
}
.nct-btn:hover { background: color-mix(in srgb, var(--nc-accent) 88%, var(--nc-ink)); color: var(--nc-ink); }

/* 分頁（the_posts_pagination / WooCommerce 商品列表分頁共用同一組 class） */
.nct-main .nav-links,
.nct-main .woocommerce-pagination ul {
  display: flex; flex-wrap: wrap; gap: var(--nct-sp-2);
  list-style: none; margin: var(--nct-sp-6) 0 0; padding: 0; border: 0;
}
.nct-main .nav-links .page-numbers,
.nct-main .woocommerce-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--nc-hair); border-radius: var(--nc-radius);
  background: var(--nc-surface); color: var(--nc-ink2);
  font-size: 13.5px; text-decoration: none; font-variant-numeric: tabular-nums;
}
.nct-main .nav-links .page-numbers.current,
.nct-main .woocommerce-pagination .page-numbers.current {
  background: var(--nc-ink); border-color: var(--nc-ink); color: var(--nc-sand);
}
.nct-main .woocommerce-pagination li { list-style: none; border: 0; margin: 0; }

/* WooCommerce 頁面（商品列表／商品頁／購物車／結帳）的外框留白 —
   內容本體由 Niiice Commerce 外掛的固定樣板負責 */
.woocommerce-page .nct-main,
.nc-store.woocommerce .nct-main { padding-top: var(--nct-sp-6); }
.woocommerce-breadcrumb { font-size: 12.5px; color: var(--nct-ink3); margin-bottom: var(--nct-sp-5); }
.woocommerce-breadcrumb a { color: var(--nc-ink2); }

/* WooCommerce 通知 fallback（正式樣式在外掛 storefront.css；左框用鼠尾草綠） */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  background: var(--nc-surface); border: 1px solid var(--nc-hair);
  border-left: 3px solid var(--nc-accent); border-radius: var(--nc-radius);
  padding: 14px var(--nct-sp-5); margin: 0 0 var(--nct-sp-5);
  list-style: none; font-size: 14px; color: var(--nc-ink);
}
.woocommerce-error { border-left-color: var(--nc-sale); }

/* ── 頁尾 ─────────────────────────────────────── */
.nct-footer {
  background: var(--nct-foot); /* 基準站頁尾實測 #F2F1E9 */
  border-top: 0;
  padding: var(--nct-sp-7) 0 var(--nct-sp-6);
  font-size: 13px; color: var(--nc-ink2);
}
.nct-footer-inner { display: flex; flex-wrap: wrap; gap: var(--nct-sp-4) var(--nct-sp-6); justify-content: space-between; align-items: center; }
.nct-footer a { color: var(--nc-ink2); }
.nct-footer-links ul,
.nct-footer-links { display: flex; flex-wrap: wrap; gap: var(--nct-sp-4); list-style: none; margin: 0; padding: 0; }
.nct-pay { display: flex; flex-wrap: wrap; gap: var(--nct-sp-2); }
.nct-pay span {
  border: 1px solid var(--nc-hair); padding: 3px 9px;
  font-size: 11px; letter-spacing: 0.04em; color: var(--nc-ink2);
  border-radius: var(--nc-radius);
}

@media (max-width: 860px) {
  .nct-nav { display: none; }
  .nct-header-inner { min-height: 64px; }
  .nct-brand img { max-height: 44px; }
  h1 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}