/* ==========================================================================
   EVOMNI STOREFRONT — 交易三頁共用元件
   依 impacts.yaml 2026-08-10-checkout-five-block-order-and-order-complete-page (5)
   「三頁共通介面規則」（SSOT＝cart_management）。
   相依：tokens.css（須先載入）
   ========================================================================== */

/* 本檔多處為排版補 display（.notice-alert、.method-option__expand、.order-block__summary…），
   特異性會蓋掉 UA 的 [hidden]{display:none}，讓 hidden 屬性失效。
   切版與互動全靠 hidden 開合 → 全域搶回：hidden 一律就是藏。 */
[hidden] { display: none !important; }

/* ---- 頁面骨架 -------------------------------------------------------- */
.page-main {
  background: var(--bg);
  padding: var(--s-10) 0 var(--s-20);
}
.page-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.page-title {
  font: var(--w-bold) var(--t-h2)/var(--lh-snug) var(--font-display);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
  margin: 0 0 var(--s-6);
}

/* 交易頁雙欄：主內容 + 右側摘要欄 */
.order-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--s-8);
  align-items: start;
}
.order-layout__aside { position: sticky; top: var(--s-6); }

@media (max-width: 1023px) {
  .order-layout { grid-template-columns: minmax(0, 1fr); }
  .order-layout__aside { position: static; }
}

/* ---- 區塊卡片 -------------------------------------------------------- */
.order-block {
  background: var(--fill-100);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  margin-bottom: var(--s-5);
}
.order-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--border-light);
}
.order-block__title {
  font: var(--w-semibold) var(--t-h4)/var(--lh-snug) var(--font-sans);
  color: var(--fg);
  margin: 0;
}
.order-block__body { padding: var(--s-6); }
.order-block__body--flush { padding: 0; }

/* 收合為摘要（結帳頁①運送方式自購物車帶入且仍有效時） */
.order-block__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
}
.order-block__summary-text { font-size: var(--t-body); color: var(--fg); }
.order-block__summary-text strong { font-weight: var(--w-medium); }

/* ---- 流程步驟指示器（三頁共通，impacts 2026-08-11 入規） ------------- */
.checkout-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-8);
  padding: 0;
  list-style: none;
}
.checkout-steps__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font: var(--w-medium) var(--t-sm)/1 var(--font-sans);
  letter-spacing: var(--ls-wide);
  color: var(--fg-disabled);
  white-space: nowrap;
}
.checkout-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  font-size: var(--t-xs);
}
.checkout-steps__item.is-current { color: var(--fg); }
.checkout-steps__item.is-done { color: var(--fg-subtle); }
.checkout-steps__sep {
  width: 48px; height: 1px;
  background: var(--border);
}
/* 流程列可點的那一步（目前只有：結帳頁上的「購物車」）。
   ⚠️ 繼承既有 item 的字色與排版，只加游標與 hover ——⛔ 不要讓它看起來像另一種元件。 */
.checkout-steps__link {
  display: inline-flex;
  align-items: center;
  gap: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.checkout-steps__link:hover .checkout-steps__label { text-decoration: underline; }
.checkout-steps__link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 767px) {
  .checkout-steps { gap: var(--s-1); }
  .checkout-steps__sep { width: 14px; flex-shrink: 1; }
  .checkout-steps__item { font-size: var(--t-xs); }
  .checkout-steps__num { width: 20px; height: 20px; }
}

/* ---- 品項列（購物車 / 結帳摘要 / 完成頁明細共用） -------------------- */
.cart-item-list { margin: 0; padding: 0; list-style: none; }
.cart-item {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--border-light);
}
.cart-item:last-child { border-bottom: 0; }
.cart-item__thumb {
  width: 88px; height: 88px;
  object-fit: cover;
  background: var(--surface-sunken);
  border-radius: var(--radius);
}
/* 沒有商品圖（src 缺或空字串）⇒ 畫佔位圖，⛔ 留破圖框／整個隱藏（尺寸沿用 .cart-item__thumb，
   購物車、結帳摘要、迷你車、訂單完成頁同一張；mini-cart.css 另有同規則，因迷你車在不載本檔的頁面也出現） */
.cart-item__thumb:not([src]),
.cart-item__thumb[src=""] { content: url('../../images/storefront/no-image.svg'); }
.cart-item__info { min-width: 0; }
.cart-item__name {
  font: var(--w-medium) var(--t-body)/var(--lh-snug) var(--font-sans);
  color: var(--fg);
  margin: 0 0 var(--s-2);
}
.cart-item__spec {
  font-size: var(--t-sm);
  color: var(--fg-subtle);
  margin: 0 0 var(--s-3);
}
.cart-item__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
}
.cart-item__price { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 劃線原價（限時折扣 T17）：購物車列劃單價、結帳側欄劃小計；<del> 自帶刪除線 */
.cart-item__prices { display: inline-flex; align-items: baseline; gap: var(--s-2); }
/* 單列小計金額不折行（T17 browser-check ②：375px 有劃線時「NT$ 1,600」被擠成兩行） */
.cart-item__subtotal { white-space: nowrap; }
.cart-item__price-was { color: var(--fg-subtle); font-size: var(--t-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-item__price-was[hidden] { display: none; }
/* 讀屏用「原價」前綴 */
.cart-item__sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.cart-item__actions { display: flex; align-items: center; gap: var(--s-4); }
.cart-item__actions .action-btn { white-space: nowrap; }

@media (max-width: 767px) {
  .cart-item { grid-template-columns: 72px minmax(0, 1fr); }
  .cart-item__thumb { width: 72px; height: 72px; }
  /* 手機品項列拆兩行：第一行 單價｜小計＋移除，第二行 數量調整。
     一行塞不下（單價＋數量＋小計＋移除 > 375 內容寬）會被瀏覽器折行折到直排。 */
  .cart-item__side {
    grid-column: 1 / -1;
    display: grid;
    /* 價格欄可縮、小計＋移除欄不縮（T17：劃線吃掉寬度時讓價格欄讓位，⛔ 讓小計被擠斷行） */
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: space-between;
    align-items: center;
    row-gap: var(--s-2);
  }
  /* 劃線與單價各自不折行；空間不夠時劃線整組換到單價上一行（⛔ 折斷金額、⛔ 溢出成橫向捲動） */
  .cart-item__prices { order: 1; min-width: 0; flex-wrap: wrap; column-gap: var(--s-2); row-gap: 0; }
  .cart-item__actions { order: 2; justify-self: end; white-space: nowrap; }
  /* 數量調整框：grid 項目預設 stretch，會被拉滿第一欄（375 寬外框 155px、內容只有 108px，右側多空白）⇒ 貼內容寬靠左（evomni/issues#385） */
  .cart-item__side .qty-picker { order: 3; justify-self: start; }
}

/* ---- 數量調整 -------------------------------------------------------- */
.qty-picker {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.qty-picker__btn {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--fg-muted);
  font-size: var(--t-body);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.qty-picker__btn:hover:not(:disabled) { background: var(--fill-200); }
.qty-picker__btn:disabled { color: var(--fg-disabled); cursor: not-allowed; }
.qty-picker__input {
  width: 44px; height: 32px;
  border: 0;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  text-align: center;
  font: var(--w-regular) var(--t-sm)/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}

/* ---- 標籤 ------------------------------------------------------------ */
.product-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--s-2);
  border-radius: var(--radius);
  font: var(--w-medium) var(--t-xs)/1.5 var(--font-sans);
  white-space: nowrap;
}
/* 完成頁明細列的贈品 Tag（B3）：與 .product-tag 同款外觀，但另立 class（.product-tag--gift 在購物車列被當折扣標籤節點） */
.tag--gift {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--s-2);
  border-radius: var(--radius);
  font: var(--w-medium) var(--t-xs)/1.5 var(--font-sans);
  white-space: nowrap;
  background: var(--brand-soft);
  color: var(--fg);
}
.tag--gift[hidden] { display: none; }
.product-tag--gift { background: var(--brand-soft); color: var(--fg); }
.product-tag--free { background: var(--success-soft); color: var(--success); }
.product-tag--temp { background: var(--info-soft); color: var(--fg-muted); }
/* 加購：與溫層同一色調（原型 Badge tone="ink"）。加購品與一般商品同底色，靠這個標籤區分（PM 2026-09-04） */
.product-tag--addon { background: var(--info-soft); color: var(--fg-muted); }
.product-tag--soldout { background: var(--fill-400); color: var(--fg-subtle); }

/* ---- 警示條 ---------------------------------------------------------- */
.notice-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
}
.notice-alert--warning { background: var(--warning-soft); color: #a06520; }
.notice-alert--danger  { background: var(--danger-soft);  color: #c04b4b; }
.notice-alert--info    { background: var(--info-soft);    color: var(--fg-muted); }
.notice-alert--success { background: var(--success-soft); color: #4a9028; }

/* ---- 金額列 ---------------------------------------------------------- */
.amount-summary { padding: var(--s-5) var(--s-6); }
.amount-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-2) 0;
  font-size: var(--t-sm);
  color: var(--fg-muted);
}
/* 長活動名稱只換行標籤、金額整段不斷行（B2A-W28） */
.amount-summary__label { min-width: 0; overflow-wrap: anywhere; }
.amount-summary__value { font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }
.amount-summary__row--discount .amount-summary__value { color: var(--danger); }
.amount-summary__row--total {
  margin-top: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-light);
  font-size: var(--t-body);
  color: var(--fg);
}
.amount-summary__row--total .amount-summary__value {
  font: var(--w-semibold) var(--t-h3)/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.amount-summary__note {
  font-size: var(--t-xs);
  color: var(--fg-subtle);
  margin-top: var(--s-2);
}

/* ---- 按鈕 ------------------------------------------------------------ */
.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: var(--w-medium) var(--t-sm)/1.4 var(--font-sans);
  letter-spacing: var(--ls-wide);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.action-btn--primary { background: var(--brand); color: var(--brand-on); }
.action-btn--primary:hover { background: var(--brand-hover); }
.action-btn--primary:disabled { background: var(--fg-disabled); cursor: not-allowed; }
.action-btn--ghost { background: none; color: var(--fg); border-color: var(--border); }
.action-btn--ghost:hover { background: var(--fill-200); }
.action-btn--text {
  background: none;
  color: var(--fg-muted);
  padding: 0;
  letter-spacing: var(--ls-normal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.action-btn--text:hover { color: var(--fg); }
/* box-sizing 的來龍去脈見下方〈表單〉段的長註解：`--block` 撐滿寬 ＋ `--lg` 帶左右內距 32px，content-box 下同樣溢出。 */
.action-btn { box-sizing: border-box; }
.action-btn--block { width: 100%; }
.action-btn--lg { padding: var(--s-4) var(--s-8); font-size: var(--t-body); }

/* ---- 表單 ------------------------------------------------------------ */
.form-field { margin-bottom: var(--s-5); }
.form-field__label {
  display: block;
  font: var(--w-medium) var(--t-sm)/1.4 var(--font-sans);
  color: var(--fg);
  margin-bottom: var(--s-2);
}
.form-field__label .req { color: var(--danger); margin-left: 2px; }
/* ⚠️⚠️ **box-sizing：切版一直假設有一條全站規則，但那條規則從來沒有被寫出來**
 * （2026-09-10 結帳頁接真時由執行工程師目視發現：輸入框超出外框、欄位之間看起來零間距）。
 *
 * 證據三則：
 *   · `product-detail002.css` 的註解逐字寫「…**且全站 box-sizing: border-box**，改 padding 會把圖壓小」
 *     ——它**依賴**這條規則存在；
 *   · `mini-cart.css` 與 `restock-notify.css` 各自加了**元件內**的局部 reset
 *     （`.mini-cart *::after` / `.restock-notify *::after`）——它們早就各自撞過同一個坑、各修各的；
 *   · 本 repo `public/css/` grep `box-sizing`：除上述三處外，只有 `product-recommend001.css` 自己的
 *     元件內 reset（`.template-wrapper.product-recommend001-* *`，2026-08-19）——同樣是各修各的，**沒有全站規則**。
 *
 * ⇒ 症狀成因：`width: 100%` ＋ `padding: 12px 16px` ＋ `1px border` 在預設的 `content-box` 下
 *   實際佔寬 = 100% + 34px ⇒ **必然溢出容器**；而溢出又把 `.form-field-row` 的 `gap: 16px`
 *   在視覺上吃掉 ⇒ 看起來「緊貼無間距」。**一個根因、兩個症狀。**
 *
 * ⚠️ **這裡刻意只修「同時設了 width:100% 與 padding」的那兩類元素（本段表單控制項＋上方 `.action-btn`），⛔ 不下全域 reset**：
 *   全域 reset 是正解、也是切版本來就以為存在的東西，但它會一次改變前台每一頁「所有元素」的盒模型。
 * ⚠️ **射程不只結帳頁**：這兩類是**共用類別**，本檔由交易頁 layout（`layouts/storefront.blade.php`）載入，
 *   而商品列表（`product-list.blade.php`）與商品詳情（`product-detail.blade.php`）也 extends 同一個 layout
 *   ⇒ 本規則同樣作用在那兩頁（例：商品列表的關鍵字搜尋框 `.form-input.keyword-search__input`、篩選的 `.action-btn--block`）。
 *   方向是修好同一種溢出，但那兩頁**沒有瀏覽器實證**；那兩頁若出現寬度變化，先查這裡。
 *   ⇒ 全站收斂（全域 reset）另案處理。 */
.form-input, .form-select, .form-textarea {
  box-sizing: border-box;
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--fill-100);
  font: var(--w-regular) var(--t-body)/1.4 var(--font-sans);
  color: var(--fg);
  transition: border-color var(--dur-fast) var(--ease);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--brand);
}
.form-input::placeholder { color: var(--fg-disabled); }
.form-textarea { min-height: 88px; resize: vertical; }
.form-field__hint { font-size: var(--t-xs); color: var(--fg-subtle); margin-top: var(--s-2); }
.form-field__error { font-size: var(--t-xs); color: var(--danger); margin-top: var(--s-2); }
.form-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}
@media (max-width: 767px) { .form-field-row { grid-template-columns: minmax(0, 1fr); } }

/* 勾選 / 單選 */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--t-sm);
  color: var(--fg-muted);
  cursor: pointer;
}
.form-check input { margin-top: 3px; flex-shrink: 0; }

/* 選項卡（運送方式 / 付款方式共用） */
.method-option {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--s-3);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
.method-option:hover { border-color: var(--fg-subtle); }
.method-option.is-selected { border-color: var(--brand); background: var(--brand-soft); }
.method-option__body { flex: 1; min-width: 0; }
.method-option__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  font: var(--w-medium) var(--t-body)/1.4 var(--font-sans);
  color: var(--fg);
}
/* 說明是商家填的多行純文字（匯款帳號一行一項）：保留換行（evomni/issues#25 P25-C04） */
.method-option__desc { font-size: var(--t-sm); color: var(--fg-subtle); margin-top: var(--s-1); white-space: pre-line; overflow-wrap: anywhere; }
.method-option__desc:empty { display: none; }
.method-option__fee { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 展開區（選信用卡後才展開卡片欄位 / 選發票類型後才展開對應欄位） */
.method-option__expand {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-light);
}

/* ---- 商家文案槽（購物車公告 / 完成頁感謝語） ------------------------- */
/* 規格：前台文案槽元件樣式規範 v1.2（ec-docs 01_Original_PRDs/前台文案槽_元件樣式規範.md）§3.2／§4／§5；
   未設定時整區不顯示、不留空白卡片（checkout_order_complete §6.3.3）。
   結構：`.copy-slot`＝卡片（完成頁感謝槽的外觀；購物車公告槽在 cart.css 收掉卡片外觀與心形圖示），
   `.copy-slot__body`＝元件容器（flex-wrap、間距 12：元件由上而下堆疊、連續按鈕自然併成一列並可換行、圖片獨佔一行）。
   圖示不用字型（站台沒有 Material 圖示字型）：以 CSS mask 內嵌 SVG 畫，顏色跟 currentColor／token 走。
   ⚠️ 共用規則：兩槽同一個 class，兩頁一起生效（⛔ 不要只在 cart.css 加，會讓兩槽分岔）。 */
.copy-slot {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px var(--s-6);
  background: var(--bg);
  border: 1px solid var(--line-300);
  border-radius: 0;
  margin-bottom: var(--s-4);
}
/* 左側心形（volunteer_activism 20px，--fg-subtle，固定不縮） */
.copy-slot::before {
  content: '';
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background: var(--fg-subtle);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 11h4v11H1v-11zm15-7.75C16.65 2.49 17.66 2 18.7 2 20.55 2 22 3.45 22 5.3c0 2.27-2.91 4.9-6 7.7-3.09-2.81-6-5.44-6-7.7C10 3.45 11.45 2 13.3 2c1.04 0 2.05.49 2.7 1.25zM20 17h-7l-2.09-.73.33-.94L13 16h2.82c.65 0 1.18-.53 1.18-1.18 0-.49-.31-.93-.77-1.11L8.97 11H7v9.02L14 22l8-3c-.01-1.1-.89-2-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 11h4v11H1v-11zm15-7.75C16.65 2.49 17.66 2 18.7 2 20.55 2 22 3.45 22 5.3c0 2.27-2.91 4.9-6 7.7-3.09-2.81-6-5.44-6-7.7C10 3.45 11.45 2 13.3 2c1.04 0 2.05.49 2.7 1.25zM20 17h-7l-2.09-.73.33-.94L13 16h2.82c.65 0 1.18-.53 1.18-1.18 0-.49-.31-.93-.77-1.11L8.97 11H7v9.02L14 22l8-3c-.01-1.1-.89-2-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.copy-slot__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-3);
}
.copy-slot__text {
  flex: 0 0 100%;
  font: 400 var(--t-sm)/1.7 var(--font-sans);
  color: var(--fg-muted);
  margin: 0;
  /* 段內換行保留（影響單 2026-09-17-copy-slot-text-newline-not-preserved-on-storefront）：寫入端存的是 `\n`、
     兩條渲染路徑（Blade `e()`／JS textContent）都只輸出純文字 ⇒ 用 white-space 顯示換行、⛔ 不改成 nl2br（那會開 HTML sink）。
     樣式規範 v1.2 §4.1 明文 pre-wrap（2026-11-09 起照規範；原 pre-line 是 2026-09 規範缺檔期的自裁）。 */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* 圖片橫幅獨佔一行：寬 100%、高依原圖比例、不裁切、不放大超過原圖寬度；無邊框無圓角；有連結時整張圖是連結、滑過不加效果 */
.copy-slot__link { flex: 0 0 100%; display: block; min-width: 0; }
.copy-slot__img { display: block; max-width: 100%; height: auto; border: 0; border-radius: 0; }
.copy-slot__body > .copy-slot__img { flex: 0 0 auto; }
/* 圖片載入失敗（merchant-slot-img-fallback.js 換上）：只顯示替代文字，不顯示破圖框 */
.copy-slot__img-alt { display: block; font: 400 var(--t-sm)/1.7 var(--font-sans); color: var(--fg-muted); overflow-wrap: anywhere; }
/* 按鈕連結＝幽靈按鈕（比全站主按鈕 48 小一號）：高 40、內距 0 20、邊框 --ink-900、底白、500 14px 字距 .04em、
   文字右側 arrow_forward 16px；連續按鈕併一列（間距 12 由容器 gap 提供，⛔ 不用 margin） */
.copy-slot .copy-slot__btn {
  box-sizing: border-box;
  flex: 0 0 auto;
  max-width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 var(--s-5);
  gap: var(--s-2);
  background: var(--bg);
  border: 1px solid var(--ink-900);
  color: var(--fg);
  font: 500 var(--t-sm)/1 var(--font-sans);
  letter-spacing: .04em;
  overflow-wrap: anywhere;
}
.copy-slot .copy-slot__btn::after {
  content: '';
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 滑過只在能 hover 的精準指標裝置生效（觸控不觸發） */
.copy-slot .copy-slot__btn:hover { background: var(--bg); }
@media (hover: hover) and (pointer: fine) {
  .copy-slot .copy-slot__btn:hover { background: var(--fill-200); }
}
.copy-slot .copy-slot__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* 手機版（375–767）：每顆撐滿一行、直向堆疊、高 44（觸控最小目標）。斷點全站一致＝767／1024（規範 §5）。
   ⚠️ 共用規則：購物車公告與完成頁感謝語兩槽同一個 class，兩頁一起生效。 */
@media (max-width: 767px) {
  .copy-slot .copy-slot__btn { flex: 0 0 100%; width: 100%; min-height: 44px; height: 44px; justify-content: center; }
}

/* ---- 空狀態 ---------------------------------------------------------- */
.empty-state {
  padding: var(--s-20) var(--s-6);
  text-align: center;
}
.empty-state__title {
  font: var(--w-medium) var(--t-h3)/var(--lh-snug) var(--font-sans);
  color: var(--fg);
  margin: 0 0 var(--s-3);
}
.empty-state__desc { font-size: var(--t-sm); color: var(--fg-subtle); margin: 0 0 var(--s-6); }

/* ---- 迷你購物車側邊欄 ------------------------------------------------
   已於 2026-09-09 整塊搬到 **mini-cart.css**：側欄現在每一頁都要能滑出
   （首頁 / 文章頁 / 動態頁都會載入它），那些頁面不載本檔。
   本檔不再持有任何 .mini-cart / .cart-count-badge 規則，改樣式請改 mini-cart.css。
   ---------------------------------------------------------------------- */

/* ---- 底部常駐結帳列（規格 UI-01／P結:1373-1418；2026-09-12 R2 黑箱 F-07）----
   ⚠️ **桌機（≥1024）一律不出現**：桌機的摘要側欄本來就 sticky（.order-layout__aside），
   再疊一條底部列等於同一個金額與同一顆按鈕出現兩次。
   ⚠️ 斷點＝單欄化那一條（≤1023；evomni/issues#182，PM 2026-10-08 裁示「結帳頁 768 到 1023 用手機的單欄加底部固定送出列」）：
   單欄時摘要與送出鈕被推到整頁最底端，平板直向／手機橫向一樣要捲到底才找得到。
   ⛔ 不要改回 640：原本只到 640，768–1023 就成了「單欄卻沒有底部列」的空窗。
   ⚠️ 購物車頁也掛同一個元件（`--cart` 修飾），但它只在手機（≤767）出現，平板規格未定義——顯示條件寫在 cart.css。
   ⚠️ `env(safe-area-inset-bottom)`：iOS 底部手勢條會蓋住按鈕。
   ⛔ 這條列的金額**不是另外算的**：由頁面 JS 與側欄 total 同步寫入
   （結帳頁唯一本體仍是後端的 recalculatedSummary）。
   ------------------------------------------------------------------- */
.checkout-sticky-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  background: var(--fill-100);
  border-top: 1px solid var(--border-light);
}
.checkout-sticky-bar__amount { flex: 1 1 auto; min-width: 0; }
.checkout-sticky-bar__label { display: block; font-size: var(--t-xs); color: var(--fg-subtle); }
.checkout-sticky-bar__value { font: var(--w-medium) var(--t-h4)/var(--lh-snug) var(--font-sans); }
.checkout-sticky-bar__action { flex: 0 0 auto; }

/* 左側整塊是按鈕（evomni/issues#200）：點金額或「查看明細」都展開明細面板；外觀維持純文字。 */
.checkout-sticky-bar__amount--toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s-3);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.checkout-sticky-bar__amount--toggle .checkout-sticky-bar__label { flex: 0 0 100%; }
.checkout-sticky-bar__details-link { font-size: var(--t-xs); color: var(--fg-muted); text-decoration: underline; white-space: nowrap; }

/* 訂單明細面板：從底部列上緣往上展開、蓋在頁面內容之上（不推擠版面）。
   ⚠️ `bottom: 100%`／`100vh - 100%` 的 100% ＝底部列自己的高度（面板以底部列為定位基準）⇒ 面板永遠不會頂出視窗。
   ⚠️ 內容是側欄節點的複製品（checkout-ui.js），樣式沿用 .cart-item-list--compact／.amount-summary，⛔ 這裡不另定金額列樣式。 */
.checkout-sticky-bar__details {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  box-sizing: border-box;
  max-height: min(60vh, calc(100vh - 100%));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-4);
  background: var(--fill-100);
  border-top: 1px solid var(--border-light);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .12);
}
.checkout-sticky-bar__details[hidden] { display: none; }

@media (max-width: 1023px) {
  .checkout-sticky-bar { display: flex; }
  .checkout-sticky-bar[hidden] { display: none; }
  /* 底部列會蓋住頁尾最後一段內容 ⇒ 把頁面墊高，⛔ 不要讓同意事項被壓在下面點不到 */
  .page-main { padding-bottom: calc(var(--s-20) + env(safe-area-inset-bottom, 0px)); }
}

/* 視窗高度不足 500（手機橫向）：明細以覆蓋式面板展開——蓋滿底部列以上的整個視窗（PRD §6.2；evomni/issues#200）。 */
@media (max-width: 1023px) and (max-height: 499px) {
  .checkout-sticky-bar__details { height: calc(100vh - 100%); max-height: none; }
  /* 單行精簡版，高度不超過 56px（PRD §6.4.6 第 5 點；evomni/issues#201）：可視高度只有三、四百，底部列不能再佔兩行。
     高度＝上下留白 4×2＋主按鈕 45.6＋上框線 1＝54.6（主按鈕尺寸在 .action-btn；改那邊要重算，StorefrontBreakpointsTest 守）。
     ⚠️ 購物車頁的底部列（--cart）是同一個元件，同一條規則一起縮。 */
  .checkout-sticky-bar {
    padding-top: var(--s-1);
    padding-bottom: calc(var(--s-1) + env(safe-area-inset-bottom, 0px));
  }
  .checkout-sticky-bar__amount { white-space: nowrap; }
  .checkout-sticky-bar__label { display: inline; margin-right: var(--s-2); }
  .checkout-sticky-bar__amount--toggle { flex-wrap: nowrap; }
  .checkout-sticky-bar__amount--toggle .checkout-sticky-bar__label { flex: 0 0 auto; margin-right: 0; }
}

/* ---- 外幣參考價切換器（pl-mc T16；購物車／結帳頁應付總額下方，僅顯示） ---- */
.amount-summary__reference {
  margin-top: var(--s-2);
}
.amount-summary__reference-label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-xs);
  color: var(--fg-subtle);
}
.amount-summary__reference-select {
  font-size: var(--t-xs);
  max-width: 100%;
}
.amount-summary__reference-line[hidden] {
  display: none;
}