/* ==========================================================================
   EVOMNI STOREFRONT — 迷你購物車側邊欄（全站）
   規格：cart_management 三頁共通規則；impacts 2026-08-10 主題 A 第 (5) 項
        「購物車圖示在每一頁都能開啟本側邊欄」。

   ⚠️ 本檔**刻意自帶完整樣式、且全部 scope 在 .mini-cart / .mini-cart-overlay 內**：

   1. 側欄要出現在「沒載 storefront.css / tokens.css 的一般頁面」（首頁、文章頁、
      page-builder 動態頁）——那些頁面只會載入本檔，載入 storefront.css 會把
      `.page-title`／`.action-btn`／`[hidden]{display:none!important}` 等通用選擇器
      潑到全站。做法與 header_cart 元件的 CART_STYLE_CSS 同源（見
      evomni_vue/src/components/wysiwygEditor/components/header_cart/cartMarkup.js 檔頭）。
   2. 每個 var() 都帶字面 fallback，值對齊 tokens.css；沒有 tokens.css 的頁面
      也要長一樣。改 tokens.css 的對應值時本檔要同步。
   3. 交易三頁（cart / checkout / complete）會同時載入 storefront.css，本檔選擇器
      多一層 `.mini-cart` 特異性一律較高 ⇒ 側欄外觀在哪一頁都由本檔決定，
      不會因為日後有人改 storefront.css 的 `.cart-item` 而漂移。

   相依：無（tokens.css 有載就吃 token，沒載就吃 fallback）
   ========================================================================== */

/* 開關鐵則：.mini-cart 自身是 display:flex，會蓋掉 UA 的 [hidden]{display:none}
   （author style 恆勝 UA style，與特異性無關）⇒ 這裡搶回來，否則側欄永遠開著。
   storefront.css 原本靠全域 `[hidden]{display:none!important}` 兜住，本檔不依賴它。 */
.mini-cart[hidden],
.mini-cart-overlay[hidden],
.mini-cart [hidden] { display: none !important; }

/* 一般頁面不保證有全域 border-box，側欄自己界定 */
.mini-cart,
.mini-cart *,
.mini-cart *::before,
.mini-cart *::after { box-sizing: border-box; }

/* ---- 遮罩 ------------------------------------------------------------ */
.mini-cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  z-index: var(--z-mini-cart-overlay, 999);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur, 250ms) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
              visibility var(--dur, 250ms) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.mini-cart-overlay[data-open="true"] { opacity: 1; visibility: visible; }

/* ---- 面板 ------------------------------------------------------------ */
.mini-cart {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(400px, 100vw);
  background: var(--fill-100, #ffffff);
  color: var(--fg, #303133);
  font-family: var(--font-sans, "Inter", "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif);
  z-index: var(--z-mini-cart, 1000);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur, 250ms) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
  box-shadow: var(--shadow-overlay, 0 16px 48px rgba(0, 0, 0, 0.12));
}
.mini-cart[data-open="true"] { transform: translateX(0); }

/* 手機（≤767）：由底部推起、高 88vh，頂端留一段頁面讓消費者還看得到自己在哪一頁（evomni/issues#183；
   購物車與結帳流程 PRD §6.4.1「行動版底部推起」、前台購物流程契約 §15.4 第 6 點「高 88vh，單手可及且保留上方脈絡」）。
   ⚠️ 只改面板的定位與進場方向；內容區的捲動（.mini-cart__body flex:1 overflow-y:auto）照舊，頁尾按鈕仍貼在面板底部。
   ⛔ 不用 100vh／整頁滿版——那正是本單的症狀（標題列貼齊視窗頂端、上方一點都看不到）。 */
@media (max-width: 767px) {
  .mini-cart {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 88vh;
    transform: translateY(100%);
  }
  .mini-cart[data-open="true"] { transform: translateY(0); }
}

.mini-cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-5, 20px) var(--s-6, 24px);
  border-bottom: 1px solid var(--border-light, #ebeef5);
}
.mini-cart__title {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2, 8px);
  font: var(--w-semibold, 600) var(--t-h4, 18px)/1.4 var(--font-sans, "Inter", "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif);
  color: var(--fg, #303133);
  margin: 0;
}
.mini-cart__close {
  background: none; border: 0;
  font-size: var(--t-h3, 22px);
  line-height: 1;
  color: var(--fg-muted, #606266);
  cursor: pointer;
}
.mini-cart__body { flex: 1; overflow-y: auto; }
.mini-cart__foot {
  padding: var(--s-5, 20px) var(--s-6, 24px);
  border-top: 1px solid var(--border-light, #ebeef5);
}

/* 計數徽章（側欄標題內；header 圖示上的徽章是 header_cart 自帶的 .cart-link__badge） */
.mini-cart .cart-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: var(--brand, #303133);
  color: var(--brand-on, #ffffff);
  border-radius: var(--radius-pill, 9999px);
  font: var(--w-medium, 500) 11px/1 var(--font-sans, "Inter", "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif);
  font-variant-numeric: tabular-nums;
}

/* ---- 空狀態 ---------------------------------------------------------- */
.mini-cart .empty-state {
  padding: var(--s-20, 80px) var(--s-6, 24px);
  text-align: center;
}
.mini-cart .empty-state__title {
  font: var(--w-medium, 500) var(--t-h3, 22px)/var(--lh-snug, 1.35) var(--font-sans, "Inter", "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif);
  color: var(--fg, #303133);
  margin: 0 0 var(--s-3, 12px);
}
.mini-cart .empty-state__desc {
  font-size: var(--t-sm, 14px);
  color: var(--fg-subtle, #909399);
  margin: 0 0 var(--s-6, 24px);
}

/* ---- 品項列 ----------------------------------------------------------
   側欄寬度固定 ⇒ 直接寫最終樣式（縮圖 64、資訊與操作各一行），
   不做 storefront.css 品項列那套 767 斷點兩行式排序。 */
.mini-cart .cart-item-list { margin: 0; padding: 0; list-style: none; }
.mini-cart .cart-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--s-4, 16px);
  padding: var(--s-4, 16px) var(--s-6, 24px);
  border-bottom: 1px solid var(--border-light, #ebeef5);
}
.mini-cart .cart-item:last-child { border-bottom: 0; }
.mini-cart .cart-item__thumb {
  width: 64px; height: 64px;
  object-fit: cover;
  background: var(--surface-sunken, #f5f7fa);
  border-radius: var(--radius, 0px);
}
/* 無商品圖 ⇒ 佔位圖（同 storefront.css 的 .cart-item__thumb 規則；同一張 no-image.svg） */
.mini-cart .cart-item__thumb:not([src]),
.mini-cart .cart-item__thumb[src=""] { content: url('../../images/storefront/no-image.svg'); }
.mini-cart .cart-item__info { min-width: 0; }
.mini-cart .cart-item__name {
  font: var(--w-medium, 500) var(--t-body, 16px)/var(--lh-snug, 1.35) var(--font-sans, "Inter", "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif);
  color: var(--fg, #303133);
  margin: 0 0 var(--s-2, 8px);
}
.mini-cart .cart-item__spec {
  font-size: var(--t-sm, 14px);
  color: var(--fg-subtle, #909399);
  margin: 0;
}
/* 標籤：側欄自帶（一般頁面沒有 storefront.css）；外觀對齊 storefront.css 的 .product-tag／--addon */
.mini-cart .cart-item__tags { display: flex; flex-wrap: wrap; gap: var(--s-1, 4px); margin: var(--s-1, 4px) 0 0; }
.mini-cart .product-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--s-2, 8px);
  border-radius: var(--radius, 0px);
  font: var(--w-medium, 500) var(--t-xs, 14px)/1.5 var(--font-sans, "Inter", "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif);
  white-space: nowrap;
}
.mini-cart .product-tag--addon { background: var(--info-soft, #f4f4f5); color: var(--fg-muted, #606266); }
/* 只有隱藏的標籤時整排不佔高度（⚠️ :has 不支援時退化為多一行空隙，不影響功能） */
.mini-cart .cart-item__tags:not(:has(> :not([hidden]))) { display: none; }
/* 「未計入小計」註記 */
.mini-cart .cart-item__note { margin: var(--s-1, 4px) 0 0; font-size: var(--t-xs, 14px); color: var(--fg-subtle, #909399); }
.mini-cart .cart-item__side {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3, 12px);
}
.mini-cart .cart-item__price {
  font: var(--w-medium, 500) var(--t-h4, 18px)/1 var(--font-sans, "Inter", "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif);
  font-variant-numeric: tabular-nums;
  color: var(--fg, #303133);
  white-space: nowrap;
}

/* ---- 數量調整 -------------------------------------------------------- */
.mini-cart .qty-picker {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border, #dcdfe6);
  border-radius: var(--radius, 0px);
}
.mini-cart .qty-picker__btn {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--fg-muted, #606266);
  font-size: var(--t-body, 16px);
  cursor: pointer;
  transition: background var(--dur-fast, 150ms) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.mini-cart .qty-picker__btn:hover:not(:disabled) { background: var(--fill-200, #fafafa); }
.mini-cart .qty-picker__btn:disabled { color: var(--fg-disabled, #c0c4cc); cursor: not-allowed; }
.mini-cart .qty-picker__input {
  width: 44px; height: 32px;
  border: 0;
  border-left: 1px solid var(--border, #dcdfe6);
  border-right: 1px solid var(--border, #dcdfe6);
  text-align: center;
  font: var(--w-regular, 400) var(--t-sm, 14px)/1 var(--font-sans, "Inter", "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif);
  font-variant-numeric: tabular-nums;
  color: var(--fg, #303133);
}

/* ---- footer 摘要（PRD §6.4.1：小計＋免運進度＋下一步註記） ------------ */
.mini-cart__summary { margin-bottom: var(--s-4, 16px); }
.mini-cart__summary .amount-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4, 16px);
  padding: 0 0 var(--s-2, 8px);
  font-size: var(--t-body, 16px);
  color: var(--fg, #303133);
}
.mini-cart__summary .amount-summary__value { font-variant-numeric: tabular-nums; }
.mini-cart__shipbar {
  height: 4px;
  background: var(--fill-300, #f9fafb);
  border-radius: var(--radius-pill, 9999px);
  overflow: hidden;
}
.mini-cart__shipbar-fill {
  display: block;
  height: 100%;
  background: var(--brand, #303133);
  border-radius: var(--radius-pill, 9999px);
}
.mini-cart__shiphint {
  font-size: var(--t-xs, 14px);
  color: var(--fg-muted, #606266);
  margin: var(--s-2, 8px) 0 0;
}
.mini-cart__note {
  font-size: var(--t-xs, 14px);
  color: var(--fg-subtle, #909399);
  margin: var(--s-2, 8px) 0 0;
}

/* ---- 按鈕 ------------------------------------------------------------ */
.mini-cart .action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2, 8px);
  padding: var(--s-3, 12px) var(--s-6, 24px);
  border: 1px solid transparent;
  border-radius: var(--radius, 0px);
  font: var(--w-medium, 500) var(--t-sm, 14px)/1.4 var(--font-sans, "Inter", "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif);
  letter-spacing: var(--ls-wide, 0.08em);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast, 150ms) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
              color var(--dur-fast, 150ms) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.mini-cart .action-btn--primary { background: var(--brand, #303133); color: var(--brand-on, #ffffff); }
.mini-cart .action-btn--primary:hover { background: var(--brand-hover, #1a1b1d); }
.mini-cart .action-btn--text {
  background: none;
  color: var(--fg-muted, #606266);
  padding: 0;
  letter-spacing: var(--ls-normal, 0);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mini-cart .action-btn--text:hover { color: var(--fg, #303133); }
.mini-cart .action-btn--block { width: 100%; }
.mini-cart .action-btn--lg { padding: var(--s-4, 16px) var(--s-8, 32px); font-size: var(--t-body, 16px); }

/* 不可購列的灰色單價（D1）與到貨通知（D4） */
.mini-cart .cart-item__unit-price { font-size: var(--t-sm, 14px); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--fg-disabled, #a8abb2); }
.mini-cart .cart-item__unit-price[hidden] { display: none; }
.mini-cart [data-mini-row-notify] { margin-top: var(--s-2, 8px); }
.mini-cart [data-mini-row-notify][hidden] { display: none; }