/*
Theme Name: Niiice Commerce
Theme URI: https://niiiceturbo.com
Author: Niiice Turbo
Author URI: https://niiiceturbo.com
Description: Niiice Turbo 電商範本的店面主題。Niiice Turbo 色系＋極簡版面，商流版面由 Niiice Commerce 外掛提供。刻意做成傳統主題（非區塊主題）——區塊主題會讓外掛的固定商流樣板整組失效，見 PITFALLS #257b。
Version: 1.3.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-04 起＝Niiice Turbo 色系（Justin 拍板；外掛 TOKENS 是真相，這裡是 fallback）。
     版面骨架仍沿用設計基準站 ellipsis.tw 的量測值（留白、4:5 商品圖、格線），換的是顏色。 */
  --nc-sand: #F7F2ED;
  --nc-surface: #FFFCF9;
  --nc-ink: #1a1a1a;
  --nc-ink2: #5a5349;
  --nc-hair: #e0d8ce;
  --nc-sale: #C8502D;
  --nc-accent: #E6613D;
  --nc-radius: 0px;
  --nc-ratio: 4 / 5;
  --nc-cols: 3;

  /* 直角按鈕（GR 禁圓角；原本 40px 膠囊是基準站語彙，與 Niiice Turbo 不一致） */
  --nct-btn-radius: 0px;
  --nct-foot: #F0E9E1; /* GR 淺底二號＝頁尾 */
  --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));
  /* 字體對齊 Niiice Turbo：內文走品牌的無襯線（Plus Jakarta Sans 管英數、Noto Sans TC 管中文），
     只有大標題保留 Noto Serif TC 當展示字——店面需要一點編輯感，但主體必須讀起來是同一個品牌。 */
  --nct-font: "Plus Jakarta Sans", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --nct-font-display: "Noto Serif TC", "Songti TC", 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; margin-inline: auto; } /* 置中：靠左貼容器邊看起來像沒排版 */
.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); }
/* 主要按鈕＝Niiice Turbo 的 .gr-btn-primary 規格：墨底白字、hover 轉品牌橘。
 * ⚠ 換色票時一度變成「橘底」——米色底配整片橘正是 AI 生成感最重的組合，
 *   而且與集團後台的按鈕語彙不一致。品牌橘留給 hover、eyebrow 與強調，不做大面積填色。 */
.nct-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 28px;
  background: var(--nc-ink); color: var(--nc-surface);
  border: 0; border-radius: var(--nct-btn-radius);
  font: inherit; font-size: 15px; font-weight: 500; letter-spacing: 0.04em;
  text-decoration: none; cursor: pointer; transition: background-color .18s ease-out;
}
.nct-btn:hover { background: var(--nc-accent); color: var(--nc-surface); }
.nct-btn:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: 3px; }

/* 分頁（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; }
}

/* ────────────────────────────────────────────────
 * 首頁／關於頁的內容區塊
 * 版型基準＝ellipsis.tw（Justin 指定，2026-08-04 實地量測）：
 *   滿版橫幅（約 2.8:1）→ 商品格線 → 置中的「瀏覽全部」。
 *   基準站首頁不放大段標題文案，靠圖與商品說話。
 * 這些 class 由出廠內容（backend/lib/commerce-demo-content.js）的 HTML 使用；
 * 樣式留在主題＝內容裡不寫 inline style，客戶用 AI 改文案不會把版面改壞。
 * ──────────────────────────────────────────────── */

/* 首頁殼層：全寬（橫幅要 edge-to-edge），各區塊自己用 .nct-inner 收容器寬度並置中 */
.nct-front { width: 100%; }
.nct-inner {
  width: 100%;
  max-width: var(--nct-maxw);
  margin-inline: auto;
  padding-inline: var(--nct-sp-5);
}

/* ── 滿版橫幅 ── */
.nct-home-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 2.78 / 1;      /* 基準站 1440×518 實測比例 */
  min-height: 320px;
  overflow: hidden;
  background: var(--nct-hair-soft);
}
.nct-home-banner img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.nct-home-banner-caption {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  text-align: center;
  padding: var(--nct-sp-5);
  /* 讀得到字是硬需求：照片明暗不可控，用一層由下而上的柔和暗幕保住對比 */
  background: linear-gradient(180deg, rgba(26,26,26,0.05) 0%, rgba(26,26,26,0.34) 60%, rgba(26,26,26,0.46) 100%);
}
.nct-home-banner-caption .nct-home-eyebrow { color: #FFFCF9; opacity: 0.86; margin: 0; }
.nct-home-banner-line {
  margin: 0;
  font-family: var(--nct-font-display);
  font-weight: 600;
  font-size: clamp(26px, 4.4vw, 46px);
  line-height: 1.3;
  color: #FFFCF9;
  text-shadow: 0 1px 24px rgba(26, 26, 26, 0.28);
  text-wrap: balance;
}
.nct-home-banner-line em { font-style: normal; color: #F3B7A3; }
.nct-home-banner-cta { margin: 6px 0 0; }
.nct-home-banner-cta .nct-btn { background: var(--nc-surface); color: var(--nc-ink); }
.nct-home-banner-cta .nct-btn:hover { background: var(--nc-accent); color: var(--nc-surface); }

/* ── 橫幅下的一句話 ── */
.nct-home-eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nc-accent);
}
.nct-home-intro {
  text-align: center;
  padding-block: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 48px);
}
.nct-home-intro p {
  margin: 0 auto;
  max-width: 40em;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 2.1;
  color: var(--nc-ink2);
}

/* ── 商品區 ── */
.nct-home-feature { padding-bottom: clamp(48px, 7vw, 88px); }
.nct-home-h2 {
  font-family: var(--nct-font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  margin: 0 0 clamp(20px, 3vw, 32px);
  color: var(--nc-ink);
  text-align: center;
}
.nct-home-more { margin: clamp(28px, 4vw, 44px) 0 0; text-align: center; }
.nct-btn-ghost {
  background: transparent; color: var(--nc-ink);
  border: 1px solid var(--nc-ink);
}
.nct-btn-ghost:hover { background: var(--nc-ink); color: var(--nc-surface); }

/* ── 三格信任資訊（安靜，不搶圖） ── */
.nct-home-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
  padding-block: clamp(36px, 5vw, 60px);
  border-top: 1px solid var(--nct-hair-soft);
}
.nct-home-point { text-align: center; } /* 與整頁的置中節奏一致（首頁只有這一區靠左會很突兀） */
.nct-home-point h3 {
  margin: 0 0 8px;
  font-family: var(--nct-font);
  font-size: 15px;
  font-weight: 500;
  color: var(--nc-ink);
}
.nct-home-point p { margin: 0 auto; max-width: 26em; font-size: 14px; line-height: 1.9; color: var(--nc-ink2); }

/* ── 品牌故事 ── */
.nct-home-story {
  text-align: center;
  padding-block: clamp(40px, 6vw, 80px);
  border-top: 1px solid var(--nct-hair-soft);
}
.nct-home-story p {
  margin: 0 auto 14px;
  max-width: 46em;
  font-size: 15px;
  line-height: 2.1;
  color: var(--nc-ink2);
}
.nct-home-link {
  display: inline-block;
  font-size: 14px;
  color: var(--nc-ink);
  border-bottom: 1px solid var(--nc-accent);
  padding-bottom: 2px;
  text-decoration: none;
}
.nct-home-link:hover { color: var(--nc-accent); }

/* ── 關於頁 ── */
.nct-home-hero {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(48px, 9vw, 96px) 0 clamp(24px, 3vw, 36px);
  text-align: center;
}
.nct-home-title {
  font-family: var(--nct-font-display);
  font-weight: 600;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.3;
  margin: 0;
  color: var(--nc-ink);
  text-wrap: balance;
}
.nct-home-title em { font-style: normal; color: var(--nc-accent); }
.nct-home-lead {
  margin: 18px auto 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.95;
  color: var(--nc-ink2);
}
.nct-home-prose { max-width: 680px; margin: 0 auto; padding-bottom: clamp(56px, 8vw, 96px); }
.nct-home-prose h2 {
  font-family: var(--nct-font-display);
  font-size: 20px;
  font-weight: 600;
  margin: clamp(28px, 4vw, 44px) 0 10px;
  color: var(--nc-ink);
}
.nct-home-prose p { font-size: 15px; line-height: 2.05; color: var(--nc-ink2); margin: 0 0 12px; }

@media (max-width: 860px) {
  .nct-home-points { grid-template-columns: 1fr; gap: 24px; }
  .nct-home-banner { aspect-ratio: 3 / 2; }
}