/*
 * Niiice Commerce — 店面固定版面（C5，2026-08-03）
 * 設計稿：AI_STYLE_WALL/docs/prototypes/commerce-theme/
 *
 * 彈性層＝下面這組 --nc-* 變數，由外掛把 option 灌成 inline style 覆寫；
 * 這裡的值只是 fallback（外掛沒灌成功時仍看得到正確設計）。
 * 固定層＝版面骨架，改動要回設計稿與提案，不要在客戶站上硬改。
 */

:root {
  /* 2026-08-03 起＝設計基準 ellipsis.tw 實測值（Justin：所有頁面排版都要一致） */
  --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;      /* 商品圖直式（基準站實測 427x533） */
  --nc-cols: 3;
  /* 衍生值（不開放單獨設定，避免組合出不協調的結果） */
  --nc-btn-radius: 40px;  /* 基準站按鈕＝40px 膠囊 */
  --nc-ink3: color-mix(in srgb, var(--nc-ink2) 62%, var(--nc-sand));
  --nc-hair-soft: color-mix(in srgb, var(--nc-hair) 62%, var(--nc-sand));
  --nc-sp-2: 8px;
  --nc-sp-3: 12px;
  --nc-sp-4: 16px;
  --nc-sp-5: 24px;
  --nc-sp-6: 32px;
}

/* ── 商品卡與格線 ──────────────────────────────── */
/* 基準站＝**無框開放式格線**（卡片透明、無邊線，靠留白分隔；圖 4:5、
   文字左對齊在圖的左緣下方）。先前的髮絲框卡設計已依 Justin
   「所有頁面排版都要和 ellipsis.tw 一致」退役。 */
.nc-store ul.products.nc-grid {
  display: grid;
  grid-template-columns: repeat(var(--nc-cols), minmax(0, 1fr));
  gap: 48px 30px;
  background: transparent;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nc-store ul.products.nc-grid::before,
.nc-store ul.products.nc-grid::after { content: none; }

/* ⚠ 這條的選擇器長度是刻意的，不要「簡化」成 `.nc-store .nc-card`：
   `woocommerce-layout.css` 有 `.woocommerce ul.products li.product { width:22.05%; float:left }`
   （特異性 0,2,2）與 smallscreen 的 `ul.products[class*="columns-"] li.product { width:48% }`
   （0,3,2）。`.nc-store .nc-card` 只有 0,2,0，**輸給它們** → 卡片會變成格線格子寬度的
   22%（實測 1132px 容器裡的卡片只有 83px），格線看起來像壞掉。
   下面 0,4,1 才贏得過。實機截圖才抓到——class 存在與否的斷言完全看不出這件事。 */
.nc-store ul.products.nc-grid > li.nc-card,
.nc-store .nc-card {
  background: transparent;
  color: var(--nc-ink);
  padding: 0;
  margin: 0;
  width: auto;
  max-width: none;
  min-width: 0;
  float: none;
  clear: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nc-store .nc-card a { color: inherit; text-decoration: none; }
.nc-store .nc-card a:focus-visible { outline: 2px solid var(--nc-ink); outline-offset: 3px; }

.nc-store .nc-card-thumb {
  position: relative;
  aspect-ratio: var(--nc-ratio);
  background: color-mix(in srgb, var(--nc-surface) 82%, var(--nc-hair));
  border-radius: var(--nc-radius);
  overflow: hidden;
}
/* ⚠ 特異性要壓過 WooCommerce 自己的 `.woocommerce img { height: auto }`（2026-08-04 量測抓到）：
 * 用 `.nc-store .nc-card-thumb img`（0,2,1）會輸，圖片高度變 auto → 300px 的縮圖只填滿
 * 4:5 框的上半，下面留一條空白，看起來像卡片壞掉。加上 ul.products li.nc-card 這一段
 * （0,4,2）才穩定贏；絕對定位再保險一次，圖片不論尺寸都鋪滿整個框。 */
.nc-store ul.products li.nc-card .nc-card-thumb img,
.nc-store .nc-card-thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease-out;
}
@media (hover: hover) {
  .nc-store .nc-card:hover .nc-card-thumb img { transform: scale(1.03); }
}
.nc-store .nc-card-chip {
  position: absolute; top: var(--nc-sp-3); left: var(--nc-sp-3);
  font-size: 11px; letter-spacing: .06em; padding: 3px 8px;
  background: var(--nc-sale); color: var(--nc-surface);
  border-radius: var(--nc-radius);
}
.nc-store .nc-card-chip.is-out {
  background: var(--nc-surface); color: var(--nc-ink2);
  border: 1px solid var(--nc-hair);
}
/* 卡片文字置中＝基準站 ellipsis.tw 的作法（2026-08-04 Justin 指定首頁比照基準站；
 * 商品卡是共用固定層，商店頁一併對齊，兩處才會是同一種語言）。 */
.nc-store .nc-card-name { font-size: 16px; line-height: 1.65; font-weight: 500; color: var(--nc-ink2); margin: 0; text-align: center; }
.nc-store .nc-card-price { font-size: 14px; color: var(--nc-ink); font-variant-numeric: tabular-nums; text-align: center; }
.nc-store .nc-card-price del { font-size: 12.5px; color: var(--nc-ink3); margin-left: 6px; opacity: 1; }
.nc-store .nc-card-price ins { text-decoration: none; color: var(--nc-sale); }

/* ── 列表工具列（筆數 ＋ 排序）──────────────────
   WooCommerce 原生 select 沒被任何主題樣式接手時是瀏覽器預設外觀（藍框），
   在這套沙色極簡裡非常突兀。這兩個控件在商品格線上方＝屬於固定版面的範圍。 */
.nc-store .woocommerce-notices-wrapper:empty { display: none; }
.nc-store .woocommerce-result-count {
  font-size: 12.5px; color: var(--nc-ink2); margin: 0 0 var(--nc-sp-4);
}
.nc-store .woocommerce-ordering { margin: 0 0 var(--nc-sp-4); }
.nc-store .woocommerce-ordering select {
  font: inherit; font-size: 13.5px; color: var(--nc-ink);
  background: var(--nc-surface);
  border: 1px solid var(--nc-hair); border-radius: var(--nc-radius);
  padding: 10px var(--nc-sp-4); min-height: 44px;
  cursor: pointer;
}
.nc-store .woocommerce-ordering select:focus-visible { outline: 2px solid var(--nc-ink); outline-offset: 2px; }

/* ── 表單控件與按鈕（全站商流共用）────────────────
   ⚠ 必須接手：WooCommerce 自己的 `.button` 是**紫色**（#7f54b3），
   在沙色極簡裡像貼錯的貼紙；圓角膠囊也違反直角規範。實機截圖才看到。

   ⚠⚠ **一律不要依賴 `.woocommerce` 這個 class 定位**（實測，PITFALLS #261）：
     商品／商店頁：`woocommerce` 在 `<body>` 上，**沒有** wrapper div
       → `.nc-store .woocommerce X`（後代）永遠不 match。
     購物車／結帳頁：**根本沒有 `woocommerce` 這個 class**（body 只有
       `woocommerce-cart`／`woocommerce-page`，`div.woocommerce` 數量也是 0）
       → 複合 `.nc-store.woocommerce X` 也不 match。
   兩種寫法各自在一半的頁面上是死的，而且症狀都是「樣式沒套上、沒有錯誤」。
   所以權重一律靠 `.nc-store` ＋ `.alt`／`#place_order`／完整路徑補足，
   跟 `.woocommerce` 在哪完全脫鉤。 */
.nc-store a.button, .nc-store button.button, .nc-store input.button,
.nc-store a.button.alt, .nc-store button.button.alt, .nc-store input.button.alt,
.nc-store #place_order,
.nc-store #respond input#submit,
.nc-store .nc-btn-primary {
  /* 基準站主按鈕＝鼠尾草綠 #CCD0B6 膠囊、墨色字（實測 40px 高；取 44px 顧觸控目標） */
  background: var(--nc-ink); color: var(--nc-surface); /* 主按鈕＝墨底 hover 橘（GR .gr-btn-primary） */
  border: 0; border-radius: var(--nc-btn-radius);
  font: inherit; font-size: 15px; font-weight: 400; letter-spacing: .04em;
  min-height: 44px; padding: 0 28px;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease-out;
}
.nc-store a.button:hover, .nc-store button.button:hover, .nc-store input.button:hover,
.nc-store button.button.alt:hover, .nc-store #place_order:hover,
.nc-store #respond input#submit:hover,
.nc-store .nc-btn-primary:hover { background: var(--nc-accent); color: var(--nc-surface); }
.nc-store .button:disabled,
.nc-store .button.disabled { opacity: .45; cursor: not-allowed; }

/* 商品頁「加入購物車」：woocommerce.css 是
   `.woocommerce div.product form.cart .button`（0,3,2），上面的 (0,3,1) 贏不了，
   要把完整路徑寫出來（0,4,2）。 */
.nc-store div.product form.cart .button,
.nc-store div.product form.cart button.button,
.nc-store div.product form.cart button.button.alt {
  background: var(--nc-ink); color: var(--nc-surface); /* 主按鈕＝墨底 hover 橘（GR .gr-btn-primary） */
  border: 0; border-radius: var(--nc-btn-radius);
  font-size: 15px; font-weight: 400; letter-spacing: .04em;
  min-height: 44px; padding: 0 28px;
}
.nc-store div.product form.cart .button:hover { background: var(--nc-accent); color: var(--nc-surface); }

/* WooCommerce 通知（加入購物車提示／折價券提示／錯誤）：預設是灰底＋紫或藍的頂線
   ＋一個 ::before 圖示字元，跟這套語言完全不合。這些元素是內容區的 div，
   `.nc-store X` 後代選擇器就match得到（0,2,0 > 原生 0,1,0）。
   ⚠ 版面**不用 space-between**：通知的 DOM 是〔文字, 按鈕〕兩個鬆散節點，
   space-between 會把它們拉到兩端＝句子被拆開、按鈕漂在半空（實機截圖踩到）。
   一律 flex-start 讓句子自然連讀，行動鈕用 margin-left:auto 靠右。 */
.nc-store .woocommerce-message,
.nc-store .woocommerce-info,
.nc-store .woocommerce-error {
  background: var(--nc-surface); color: var(--nc-ink);
  border: 1px solid var(--nc-hair);
  border-left: 3px solid var(--nc-accent);
  border-radius: var(--nc-radius);
  padding: 14px var(--nc-sp-5);
  margin: 0 0 var(--nc-sp-5);
  list-style: none; font-size: 14px; line-height: 1.7;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: flex-start; gap: 8px var(--nc-sp-4);
}
.nc-store .woocommerce-error { border-left-color: var(--nc-sale); }
.nc-store .woocommerce-message::before,
.nc-store .woocommerce-info::before,
.nc-store .woocommerce-error::before { content: none; display: none; }
/* 通知裡的行動鈕：靠右、縮小一號（它是輔助動作，不是頁面主 CTA） */
.nc-store .woocommerce-message .button,
.nc-store .woocommerce-info .button {
  margin: 0 0 0 auto; min-height: 36px; padding: 0 18px; font-size: 13px;
}
.nc-store .woocommerce-error li { margin: 0; }

/* 折價券展開表單（點「按此輸入您的折價碼」後長出來的那塊）：
   原生是 float 佈局＋看不見的框，改成與結帳欄位同寬的一列輸入＋按鈕 */
.nc-store form.checkout_coupon {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--nc-sp-3);
  max-width: 620px; margin: 0 0 var(--nc-sp-5);
  padding: var(--nc-sp-4) var(--nc-sp-5);
  background: var(--nc-surface); border: 1px solid var(--nc-hair);
  border-radius: var(--nc-radius);
}
.nc-store form.checkout_coupon p { margin: 0; padding: 0; float: none; width: auto; }
.nc-store form.checkout_coupon .form-row-first { flex: 1 1 200px; }
.nc-store form.checkout_coupon .form-row-last { flex: 0 0 auto; }

.nc-store input[type="text"], .nc-store input[type="email"], .nc-store input[type="tel"],
.nc-store input[type="password"], .nc-store input[type="number"], .nc-store input[type="search"],
.nc-store textarea, .nc-store select {
  font: inherit; font-size: 16px; /* 16px＝防 iOS 自動縮放 */
  color: var(--nc-ink); background: var(--nc-surface);
  border: 1px solid var(--nc-hair); border-radius: var(--nc-radius);
  padding: 12px var(--nc-sp-4); min-height: 48px; width: 100%;
}
.nc-store textarea { min-height: 96px; }
.nc-store input:focus-visible, .nc-store textarea:focus-visible, .nc-store select:focus-visible {
  outline: 2px solid var(--nc-ink); outline-offset: 2px;
}
.nc-store label { font-size: 13px; color: var(--nc-ink2); display: block; margin-bottom: 6px; }
.nc-store .required { color: var(--nc-sale); text-decoration: none; }

/* 數量：WooCommerce 原生只有一個 number input（手機上很難按）。
   ± 兩顆是 UI 禁令例外 4 授權的「數量增減」。 */
.nc-store .quantity { display: inline-flex; align-items: stretch; }
.nc-store .quantity .nc-qty-btn {
  width: 44px; min-height: 44px; padding: 0;
  background: var(--nc-surface); color: var(--nc-ink);
  border: 1px solid var(--nc-hair); border-radius: var(--nc-radius);
  font: inherit; font-size: 17px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.nc-store .quantity .nc-qty-btn:hover { background: var(--nc-hair-soft); }
.nc-store .quantity input.qty {
  width: 56px; min-width: 56px; min-height: 44px; text-align: center; padding: 8px 4px;
  border-left: 0; border-right: 0;
  -moz-appearance: textfield; appearance: textfield;
}
.nc-store .quantity input.qty::-webkit-outer-spin-button,
.nc-store .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── 商品頁（設計稿 ②）────────────────────────── */
.nc-store .nc-single-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--nc-sp-6) clamp(24px, 5vw, 64px);
  align-items: start;
}
.nc-store .nc-single-media img { width: 100%; height: auto; display: block; border-radius: var(--nc-radius); }
.nc-store .nc-single-media .flex-control-thumbs {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--nc-sp-2);
  list-style: none; margin: var(--nc-sp-2) 0 0; padding: 0;
}
.nc-store .nc-single-info { display: flex; flex-direction: column; gap: var(--nc-sp-4); }
.nc-store .nc-single-name { font-size: clamp(26px, 3vw, 40px); font-weight: 700; color: var(--nc-ink); line-height: 1.3; margin: 0; }
.nc-store .nc-single-price { font-size: 20px; font-variant-numeric: tabular-nums; }
.nc-store .nc-single-price del { color: var(--nc-ink3); font-size: 15px; margin-right: 8px; opacity: 1; }
.nc-store .nc-single-price ins { text-decoration: none; color: var(--nc-sale); }
.nc-store .nc-single-excerpt { color: var(--nc-ink2); font-size: 14.5px; line-height: 1.8; }
.nc-store .nc-single-excerpt p:last-child { margin-bottom: 0; }
/* 基準站構圖：數量選擇器在上、加入購物車**整欄寬**在下（實測 450px 全寬膠囊） */
.nc-store .nc-single-buy form.cart { display: flex; flex-direction: column; align-items: stretch; gap: var(--nc-sp-4); margin: 0; }
.nc-store .nc-single-buy .quantity { align-self: flex-start; }
.nc-store .nc-single-buy .single_add_to_cart_button { width: 100%; flex: none; }
/* 變化商品的規格選單：WooCommerce 用 table 排，換成直向欄位 */
.nc-store .nc-single-buy table.variations { width: 100%; border: 0; margin: 0 0 var(--nc-sp-4); }
.nc-store .nc-single-buy table.variations th,
.nc-store .nc-single-buy table.variations td { display: block; width: 100%; padding: 0; border: 0; text-align: left; }
.nc-store .nc-single-buy table.variations th { font-size: 13px; color: var(--nc-ink2); padding-top: var(--nc-sp-3); }
.nc-store .nc-single-meta {
  margin: var(--nc-sp-2) 0 0; padding-top: var(--nc-sp-4);
  border-top: 1px solid var(--nc-hair-soft);
  display: grid; grid-template-columns: auto 1fr; gap: 6px var(--nc-sp-4);
  font-size: 13px;
}
.nc-store .nc-single-meta dt { color: var(--nc-ink2); }
.nc-store .nc-single-meta dd { margin: 0; }
.nc-store .nc-single-section { margin-top: var(--nc-sp-6); padding-top: var(--nc-sp-6); border-top: 1px solid var(--nc-hair-soft); }
.nc-store .nc-section-title { font-size: 17px; font-weight: 500; margin: 0 0 var(--nc-sp-4); }
.nc-store .nc-prose { max-width: 68ch; line-height: 1.9; }

/* ── 單頁結帳（設計稿 ④）──────────────────────── */
.nc-store .nc-checkout-grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--nc-sp-6) clamp(24px, 4vw, 56px);
  align-items: start;
}
/* 欄位不要通欄拉滿（Justin 2026-08-03「上面的欄位向左對齊」）：
   參考站的表單欄是一條靠左的窄欄，滿版的輸入框在寬螢幕上很難讀也很難填。 */
.nc-store .nc-checkout-fields { display: grid; gap: var(--nc-sp-6); max-width: 620px; }
.nc-store .nc-checkout-fields .col-1,
.nc-store .nc-checkout-fields .col-2 { width: 100%; float: none; }
.nc-store .nc-checkout-fields h3 { font-size: 16px; font-weight: 500; margin: 0 0 var(--nc-sp-4); }
.nc-store .nc-checkout p.form-row { margin: 0 0 var(--nc-sp-4); }

/* 兩欄配對（名字／姓氏、國家／郵遞區號、縣市／鄉鎮市區）——WooCommerce 原生用
   float + 百分比寬，在窄欄裡容易破版；改 grid，`form-row-wide` 佔滿一整行。 */
.nc-store .nc-checkout-fields .woocommerce-billing-fields__field-wrapper,
.nc-store .nc-checkout-fields .woocommerce-shipping-fields__field-wrapper,
.nc-store .nc-checkout-fields .woocommerce-additional-fields__field-wrapper {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--nc-sp-4);
}
.nc-store .nc-checkout-fields p.form-row-first { grid-column: 1; width: 100%; float: none; }
.nc-store .nc-checkout-fields p.form-row-last { grid-column: 2; width: 100%; float: none; }
.nc-store .nc-checkout-fields p.form-row-wide,
.nc-store .nc-checkout-fields p.form-row:not(.form-row-first):not(.form-row-last) {
  grid-column: 1 / -1; width: 100%; float: none;
}
@media (max-width: 560px) {
  .nc-store .nc-checkout-fields .woocommerce-billing-fields__field-wrapper,
  .nc-store .nc-checkout-fields .woocommerce-shipping-fields__field-wrapper,
  .nc-store .nc-checkout-fields .woocommerce-additional-fields__field-wrapper {
    grid-template-columns: minmax(0, 1fr);
  }
  .nc-store .nc-checkout-fields p.form-row-first,
  .nc-store .nc-checkout-fields p.form-row-last { grid-column: 1; }
}
.nc-store .nc-checkout-side {
  position: sticky; top: 88px;
  background: var(--nc-surface); border: 0;
  border-radius: var(--nc-radius); padding: var(--nc-sp-5) var(--nc-sp-6);
}
.nc-store .nc-checkout-side .nc-section-title { margin-bottom: var(--nc-sp-4); }
.nc-store .nc-checkout-side table.shop_table { width: 100%; border: 0; border-collapse: collapse; font-size: 14px; }
.nc-store .nc-checkout-side table.shop_table th,
.nc-store .nc-checkout-side table.shop_table td {
  padding: 10px 0; border: 0; border-bottom: 1px solid var(--nc-hair-soft);
  text-align: left; font-weight: 400;
}
.nc-store .nc-checkout-side table.shop_table th:last-child { text-align: right; }
.nc-store .nc-checkout-side table.shop_table td { text-align: right; font-variant-numeric: tabular-nums; }
/* 運送方式是 td 裡的一個清單 —— 跟著金額右對齊會變成 radio 靠右、很難讀 */
.nc-store .nc-checkout-side table.shop_table td ul,
.nc-store .nc-checkout-side ul#shipping_method {
  text-align: left; list-style: none; margin: 0; padding: 0;
}
.nc-store .nc-checkout-side ul#shipping_method li { margin: 0 0 6px; }
.nc-store .nc-checkout-side ul#shipping_method label { display: inline; font-size: 13.5px; color: var(--nc-ink); margin: 0; }
.nc-store .nc-checkout-side ul#shipping_method input[type="radio"] { width: auto; min-height: 0; margin-right: 6px; }
.nc-store .nc-checkout-side .order-total th,
.nc-store .nc-checkout-side .order-total td { font-size: 16px; border-bottom: 0; padding-top: var(--nc-sp-4); }
.nc-store .nc-checkout-side #payment { background: transparent; border-radius: 0; }
.nc-store .nc-checkout-side #payment ul.payment_methods {
  list-style: none; margin: var(--nc-sp-4) 0 0; padding: 0;
  border-bottom: 0; display: grid; gap: 1px; background: var(--nc-hair-soft);
  border: 1px solid var(--nc-hair-soft);
}
.nc-store .nc-checkout-side #payment ul.payment_methods li {
  background: var(--nc-surface); padding: var(--nc-sp-4); margin: 0;
}
.nc-store .nc-checkout-side #payment ul.payment_methods li label {
  display: inline; font-size: 14.5px; color: var(--nc-ink); margin: 0;
}
.nc-store .nc-checkout-side #payment ul.payment_methods li input[type="radio"] { width: auto; min-height: 0; margin-right: 8px; }
.nc-store .nc-checkout-side #payment .payment_box {
  background: var(--nc-hair-soft); border-radius: var(--nc-radius);
  margin: var(--nc-sp-3) 0 0; padding: var(--nc-sp-3) var(--nc-sp-4);
  font-size: 13px; color: var(--nc-ink2);
}
.nc-store .nc-checkout-side #payment .payment_box::before { display: none; }
.nc-store .nc-checkout-side #place_order { width: 100%; margin-top: var(--nc-sp-4); }

/* ── 購物車（設計基準 ellipsis.tw）────────────────
   三欄：商品／數量／小計。單價欄用 CSS 收起來（markup 保留——響應式與第三方
   外掛都可能依賴那個 cell 存在），髮絲線分列，金額右對齊。 */
.nc-store .nc-cart-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--nc-sp-4); margin-bottom: var(--nc-sp-5);
}
.nc-store .nc-cart-title { font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; color: var(--nc-ink); margin: 0; }
.nc-store .nc-cart-back { font-size: 13.5px; color: var(--nc-ink2); }
.nc-store table.shop_table.cart {
  width: 100%; border: 0; border-collapse: collapse; margin: 0;
  font-size: 14px;
}
.nc-store table.shop_table.cart th,
.nc-store table.shop_table.cart td {
  border: 0; border-bottom: 1px solid var(--nc-hair-soft);
  padding: var(--nc-sp-4) var(--nc-sp-3); vertical-align: middle;
  text-align: left; font-weight: 400;
}
.nc-store table.shop_table.cart thead th {
  font-size: 12px; color: var(--nc-ink2); letter-spacing: .04em;
  padding-top: 0; padding-bottom: var(--nc-sp-3);
}
.nc-store table.shop_table.cart .product-price { display: none; }
.nc-store table.shop_table.cart .product-thumbnail { width: 108px; padding-left: 0; }
.nc-store table.shop_table.cart .product-thumbnail img {
  width: 96px; height: 96px; object-fit: cover; display: block;
  border-radius: var(--nc-radius); background: var(--nc-hair-soft);
}
.nc-store table.shop_table.cart .product-name a { color: inherit; text-decoration: none; }
.nc-store table.shop_table.cart .product-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nc-store table.shop_table.cart .product-remove { width: 72px; }
/* ⚠ `color` 這裡必須 `!important`：woocommerce.css 的
   `.woocommerce a.remove { color: red !important }` 本身就帶 !important，
   特異性再高也贏不了——只有同樣 !important 才蓋得過（這是少數該用它的場合）。
   `.woocommerce` 這個 wrapper 是 `[woocommerce_cart]` 短碼輸出的，所以購物車頁有它。 */
.nc-store table.shop_table.cart .product-remove a.remove {
  font-size: 12.5px; color: var(--nc-ink2) !important; text-decoration: underline;
  text-underline-offset: 3px; background: none; width: auto; height: auto; line-height: 1;
  display: inline; border-radius: 0;
}
.nc-store table.shop_table.cart .product-remove a.remove:hover { color: var(--nc-sale) !important; background: none; }
.nc-store table.shop_table.cart .product-quantity { width: 172px; }
.nc-store table.shop_table.cart .product-subtotal {
  text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.nc-store table.shop_table.cart thead th.product-subtotal { text-align: right; }
.nc-store table.shop_table.cart td.actions { padding: var(--nc-sp-5) 0 0; border-bottom: 0; }
.nc-store .nc-cart-actions {
  display: flex; flex-wrap: wrap; gap: var(--nc-sp-3); align-items: center;
}
.nc-store .nc-cart-actions .coupon { display: flex; gap: var(--nc-sp-2); flex: 1 1 440px; min-width: 0; }
/* ⚠ 輸入框要 `flex:1 1 auto` ＋ min-width：只給 max-width 的話，套用鈕吃掉寬度後
   輸入框會被壓到 80px、placeholder 被截成「優惠券代…」（實機截圖抓到）。 */
.nc-store .nc-cart-actions .coupon input.input-text {
  flex: 1 1 auto; width: auto; min-width: 160px; max-width: 280px;
}
/* 更新購物車＝工具性動作，用次要樣式（hairline 外框），不要跟「前往結帳」搶主角。
   WooCommerce 原生把它 float:right 並套主按鈕樣式，在 flex 容器裡會變成無字灰塊。 */
.nc-store .nc-cart-actions button[name="update_cart"] {
  margin-left: auto; background: transparent; color: var(--nc-ink);
  border: 1px solid var(--nc-hair); border-radius: var(--nc-btn-radius); float: none;
  font-size: 13.5px; min-height: 44px; padding: 0 20px;
}
.nc-store .nc-cart-actions button[name="update_cart"]:hover { background: var(--nc-hair-soft); color: var(--nc-ink); }
.nc-store .nc-cart-actions button[name="update_cart"]:disabled { opacity: .45; }
/* WooCommerce 的「計算運費」切換鈕自帶一個圖示字元（::after），與 UI 規範不合 */
.nc-store .shipping-calculator-button::after { content: none; display: none; }

/* 合計區：右靠窄欄（參考站的比例），結帳 CTA 撐滿該欄。
   ⚠ 選擇器要吃得過 woocommerce.css 的 `.woocommerce .cart-collaterals .cart_totals
   { width: 48%; float: right }`（0,3,0）——實測 48% 讓合計欄變 543px。 */
.nc-store .nc-cart-collaterals { display: flex; justify-content: flex-end; margin-top: var(--nc-sp-6); }
.nc-store .nc-cart-collaterals .cart_totals,
.nc-store .cart-collaterals .cart_totals {
  width: min(420px, 100%); float: none; margin: 0;
}
.nc-store .cart_totals h2 { font-size: 15px; font-weight: 500; margin: 0 0 var(--nc-sp-3); }
.nc-store .cart_totals table.shop_table {
  width: 100%; border: 0; border-collapse: collapse; font-size: 14px;
}
.nc-store .cart_totals table.shop_table th,
.nc-store .cart_totals table.shop_table td {
  border: 0; border-bottom: 1px solid var(--nc-hair-soft);
  padding: 10px 0; text-align: left; font-weight: 400;
}
.nc-store .cart_totals table.shop_table td { text-align: right; font-variant-numeric: tabular-nums; }
.nc-store .cart_totals table.shop_table td ul { text-align: left; list-style: none; margin: 0; padding: 0; }
.nc-store .cart_totals .order-total th,
.nc-store .cart_totals .order-total td { font-size: 16px; border-bottom: 0; padding-top: var(--nc-sp-4); }
.nc-store .wc-proceed-to-checkout { padding: var(--nc-sp-4) 0 0; }
.nc-store .wc-proceed-to-checkout a.checkout-button { width: 100%; }

/* ── 空購物車 ─────────────────────────────────── */
.nc-store .nc-empty {
  padding: var(--nc-sp-6) 0; display: flex; flex-direction: column;
  align-items: flex-start; gap: var(--nc-sp-3);
}
.nc-store .nc-empty-title { font-size: 19px; margin: 0; }
.nc-store .nc-empty-note { color: var(--nc-ink2); font-size: 14px; margin: 0 0 var(--nc-sp-2); }

@media (max-width: 900px) {
  .nc-store .nc-single-grid,
  .nc-store .nc-checkout-grid { grid-template-columns: minmax(0, 1fr); }
  .nc-store .nc-checkout-side { position: static; }
}

/* ── 購物車抽屜 ────────────────────────────────── */
.nc-drawer-root { position: fixed; inset: 0; z-index: 9999; }
.nc-drawer-root[hidden] { display: none; }
.nc-scrim {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--nc-ink) 45%, transparent);
  opacity: 0; transition: opacity .22s ease-out;
}
.nc-drawer-root.is-open .nc-scrim { opacity: 1; }
.nc-drawer {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(400px, 88vw);
  background: var(--nc-surface); color: var(--nc-ink);
  border-left: 1px solid var(--nc-hair);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.22,.61,.36,1);
  font-family: inherit;
}
.nc-drawer-root.is-open .nc-drawer { transform: none; }
.nc-drawer-inner { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.nc-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--nc-sp-4) var(--nc-sp-5);
  border-bottom: 1px solid var(--nc-hair-soft);
}
.nc-drawer-head strong { font-weight: 500; font-size: 15px; }
.nc-drawer-items { flex: 1; overflow-y: auto; min-height: 0; }
.nc-drawer-empty { flex: 1; display: grid; place-items: center; color: var(--nc-ink2); font-size: 14px; }
.nc-drawer-item {
  display: grid; grid-template-columns: 64px 1fr auto;
  gap: var(--nc-sp-3);
  padding: var(--nc-sp-4) var(--nc-sp-5);
  border-bottom: 1px solid var(--nc-hair-soft);
  align-items: start;
}
.nc-drawer-thumb { aspect-ratio: 1/1; background: var(--nc-hair-soft); border-radius: var(--nc-radius); overflow: hidden; }
.nc-drawer-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nc-drawer-name { font-size: 13.5px; line-height: 1.5; }
.nc-drawer-variant { font-size: 12px; color: var(--nc-ink3); margin-top: 2px; }
.nc-drawer-price { font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nc-drawer-foot {
  padding: var(--nc-sp-5);
  border-top: 1px solid var(--nc-hair);
  display: flex; flex-direction: column; gap: var(--nc-sp-3);
}
.nc-line { display: flex; justify-content: space-between; font-size: 15px; font-variant-numeric: tabular-nums; }

/* ── 共用控制項 ───────────────────────────────── */
.nc-store .nc-btn-primary,
.nc-drawer .nc-btn-primary {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 20px;
  background: var(--nc-ink); color: var(--nc-sand);
  border: 0; border-radius: var(--nc-radius);
  font-size: 15px; letter-spacing: .06em; font-family: inherit;
  cursor: pointer; text-decoration: none;
  transition: opacity .18s ease-out;
}
.nc-store .nc-btn-primary:hover,
.nc-drawer .nc-btn-primary:hover { opacity: .86; color: var(--nc-sand); }
.nc-btn-ghost {
  min-height: 44px; padding: 0 16px;
  background: none; color: var(--nc-ink);
  border: 1px solid var(--nc-hair); border-radius: var(--nc-radius);
  font-size: 13.5px; font-family: inherit; cursor: pointer;
}
.nc-ico {
  background: none; border: 0; padding: 6px; cursor: pointer; color: inherit;
  min-width: 32px; min-height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
}
.nc-btn-primary:focus-visible,
.nc-btn-ghost:focus-visible,
.nc-ico:focus-visible { outline: 2px solid var(--nc-ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .nc-scrim, .nc-drawer, .nc-store .nc-card-thumb img { transition: none; }
}

/* ⚠ 手機欄數**不能**寫成 media query 裡的 `:root{--nc-cols:2}`：
 *   外掛用 wp_add_inline_style 注入的 `:root{--nc-cols:3}` 排在這份檔案之後，
 *   特異性相同、後者勝，media query 會被無聲蓋掉。直接對格線元素下手才蓋得住。 */
@media (max-width: 860px) {
  .nc-store ul.products.nc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .nc-store ul.products.nc-grid { grid-template-columns: minmax(0, 1fr); }
}