/* ========================================
   購物車頁面 — Cart Page Styles
   顏色一律取自 assets/css/color-tokens.css，本檔不定義任何顏色
   ======================================== */

/* ── 結帳步驟 ── */
.cart-steps {
  margin-top: var(--header-height);
  padding: 50px 0 30px;
  background: var(--color-white);
}

.cart-steps-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 500px;
  margin: 0 auto;
}

.cart-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 2;
}

.cart-step-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-family: var(--font-primary);
  border: 1px solid var(--color-border);
  color: var(--color-text-light);
  background: transparent;
  transition: all 0.3s ease;
}

.cart-step.active .cart-step-num {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.cart-step-label {
  font-size: 12px;
  color: var(--color-text-light);
  font-weight: 400;
}

.cart-step.active .cart-step-label {
  color: var(--color-primary);
  font-weight: 700;
}

.cart-step-line {
  flex: 1;
  height: 1px;
  background: var(--color-border);
  min-width: 80px;
  margin: 0 10px;
  margin-bottom: 28px;
}

/* ── 頁面標題 ── */
.cart-title-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 30px;
}

.cart-page-title {
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
}

.cart-title-underline {
  width: 200px;
  height: 2px;
  background: var(--color-primary);
}

.cart-item-count {
  font-size: 14px;
  color: var(--color-text-light);
  text-align: center;
}

/* ── 主容器 ── */
.cart-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 50px 60px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  align-items: start;
}

/* ── 左側主欄 ── */
.cart-main {
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

/* ── 表頭 ── */
.cart-table-header {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr 60px;
  /* 設計稿是黑底。原本是 --color-primary（紫）。 */
  background: var(--color-secondary);
  padding: 12px 22px;
  align-items: center;
}

.cart-th {
  font-size: 14px;
  font-weight: 400;
  /* #FFD5D5 */
  color: var(--color-pink);
}

.cart-th-price,
.cart-th-qty,
.cart-th-subtotal,
.cart-th-action {
  text-align: center;
}

/* ── 商品列表 ── */
.cart-items {
  display: flex;
  flex-direction: column;
}

.cart-item {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr 60px;
  align-items: center;
  padding: 24px 22px;
  border: 1px solid var(--color-border-light);
  border-top: none;
  transition: background 0.2s ease;
}

.cart-item:first-child {
  border-top: 1px solid var(--color-border-light);
}

.cart-item:hover {
  background: var(--color-bg-grey);
}

/* 商品資訊（圖片+名稱） */
.cart-item-product {
  display: flex;
  gap: 20px;
  align-items: center;
}

.cart-item-image {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  background: var(--color-bg-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.cart-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cart-item-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-strong);
}

.cart-item-spec {
  font-size: 12px;
  color: var(--color-text-light);
}

/* 規格下拉（購物車內直接更換規格）：規格標籤在上、下拉在下 */
.cart-flavor-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  white-space: nowrap;
}
.cart-flavor-select {
  font-size: 12px;
  /*
   * 灰底 + 深字，桌機與手機一致。
   *
   * 原本是白底配 --color-text-muted（#666）。改灰底之後若沿用淺色字，
   * #888 對 #f5f5f5 只有 3.2:1，達不到 WCAG AA 的 4.5:1；
   * 這格顯示的是使用者選的尺寸（資料，不是說明文字），用 #333 才讀得清楚（11.6:1）。
   */
  color: var(--color-text-strong);
  background: var(--color-bg-grey);
  padding: 3px 6px;
  border: 1px solid var(--color-border);
  /* 不要圓角。寫 0 而不是直接刪掉，是因為部分瀏覽器的預設樣式會自己給 select 圓角 */
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
}
.cart-flavor-select:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* ── 移除商品確認視窗 ── */
.cart-confirm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cart-confirm-overlay.is-open {
  display: flex;
}
.cart-confirm-box {
  background: var(--color-white);
  border-radius: 4px;
  border-top: 4px solid var(--color-primary);
  max-width: 380px;
  width: 100%;
  padding: 26px 24px 22px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);
  text-align: center;
}
.cart-confirm-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-strong);
  margin: 0 0 10px;
}
.cart-confirm-msg {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0 0 20px;
  word-break: break-word;
}
.cart-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.cart-confirm-cancel,
.cart-confirm-ok {
  min-width: 110px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.cart-confirm-cancel {
  background: var(--color-white);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.cart-confirm-cancel:hover {
  border-color: var(--color-text-light);
  color: var(--color-text-strong);
}
.cart-confirm-ok {
  background: var(--color-primary);
  color: var(--color-white);
  border: 1px solid var(--color-primary);
}
.cart-confirm-ok:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* 單價 */
.cart-item-price {
  font-size: 14px;
  color: var(--color-black);
  text-align: center;
}

/* 數量控制 */
.cart-item-qty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.qty-btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--color-text-strong);
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--color-white);
}

.qty-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* 數量：可直接點進去手動輸入（原本是唯讀的 <span>） */
.qty-value {
  width: 40px;
  height: 30px;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--color-text-strong);
  background: var(--color-white);
  /* 以下是換成 <input> 之後才需要的 */
  text-align: center;
  font-family: inherit;
  border-radius: 0;
  padding: 0;
  cursor: text;
  -moz-appearance: textfield;
}

/* 拿掉數字欄位的上下小箭頭 —— 這格只有 40px 寬，塞不下也不需要 */
.qty-value::-webkit-outer-spin-button,
.qty-value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-value:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* 小計 */
.cart-item-subtotal {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;
}

/* 刪除按鈕 */
.cart-item-delete {
  width: 24px;
  height: 24px;
  color: var(--color-text-light);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.cart-item-delete svg {
  width: 24px;
  height: 24px;
}

.cart-item-delete:hover {
  color: var(--color-danger);
  transform: scale(1.15);
}

/* 繼續購物 */
.cart-continue-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 36px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-size: 14px;
  margin-top: 20px;
  margin-bottom: 30px;
  transition: all 0.3s ease;
}

.cart-continue-btn:hover {
  background: var(--color-primary);
  color: var(--color-white);
  opacity: 1;
}

/* ── 加購推薦區 ── */
.cart-upsell {
  margin-top: auto;
  border: 1px dashed var(--color-primary);
  padding: 26px 29px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  background: var(--color-bg-grey);
  overflow: hidden;
}

.cart-upsell-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.cart-upsell-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.cart-upsell-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
}

.cart-upsell-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  /*
   * position: relative 不是裝飾用的，是必要的。
   *
   * WooCommerce 的價格 HTML 內含 .screen-reader-text（絕對定位）。
   * 捲軸容器若不是「定位祖先」，那些絕對定位的子孫會以 body 為基準，
   * 逃出 overflow 的裁切範圍 —— 第四張卡片的價格落在 x≈750，
   * 整份文件就被撐到 750px 寬，手機上整頁被縮放、看起來只佔半個畫面。
   */
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  /* 滑鼠也能直接抓著卡片左右拖（行為在 cart.js） */
  cursor: grab;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* 拖曳中：
   - scroll-snap 要關掉，否則每移動一下就被吸回定點，跟手感相衝
   - 關掉選取，避免變成反白商品名稱
   - smooth 會讓 scrollLeft 的設定延遲生效，拖起來會黏 */
.cart-upsell-grid.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
  -webkit-user-select: none;
}

.cart-upsell-grid::-webkit-scrollbar {
  height: 6px;
}

.cart-upsell-grid::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.cart-upsell-grid::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-primary) 45%, transparent);
  border-radius: 999px;
}

.cart-upsell-card {
  flex: 0 0 250px;
  min-width: 0;
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
  display: flex;
  align-items: center;
  padding: 10px;
  gap: 8px;
  scroll-snap-align: start;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.cart-upsell-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px
    color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.cart-upsell-card-image {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--color-bg-grey);
}

.cart-upsell-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-upsell-card-image a {
  display: block;
  width: 100%;
  height: 100%;
}

.cart-upsell-card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.cart-upsell-card-name {
  font-size: 12px;
  color: var(--color-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-upsell-card-price {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-black);
}

.cart-upsell-card-price del {
  color: var(--color-text-light);
  font-weight: 400;
  font-size: 11px;
  margin-right: 4px;
}

.cart-upsell-card-price ins {
  text-decoration: none;
  color: var(--color-primary);
}

.cart-upsell-add-btn {
  margin-top: 4px;
  width: 100%;
  height: 22px;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.cart-upsell-add-btn:hover {
  background: var(--color-primary-dark);
}

.cart-upsell-add-btn:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.cart-upsell-empty {
  flex: 1 0 100%;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

/* ── 右側：訂單摘要 ── */
.cart-summary {
  position: sticky;
  top: calc(var(--header-height) + var(--admin-bar-height) + 20px);
  border: 1px solid var(--color-primary);
  padding: 28px 24px;
  background: var(--color-white);
}

.cart-summary-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-black);
  margin-bottom: 20px;
}

/* 優惠碼 */
.cart-coupon-section {
  margin-bottom: 10px;
}

.cart-coupon-label {
  font-size: 14px;
  color: var(--color-text-light);
  margin-bottom: 8px;
  display: block;
}

.cart-coupon-row {
  display: flex;
  gap: 0;
}

.cart-coupon-input {
  flex: 1;
  /*
   * min-width: 0 不能省。
   *
   * flex 項目的自動最小寬度是「內容的最小尺寸」，而 <input> 的最小尺寸來自
   * size 屬性（預設 20 個字元，實測約 214px）—— 所以 flex: 1 根本縮不下去，
   * 輸入框 214 + 按鈕 76 = 290 塞進 285 的列，「套用」就凸出卡片右緣 4px。
   */
  min-width: 0;
  height: 36px;
  border: 1px solid var(--color-border);
  padding: 0 12px;
  font-size: 13px;
  font-family: var(--font-primary);
  outline: none;
  transition: border-color 0.2s ease;
}

.cart-coupon-input:focus {
  border-color: var(--color-primary);
}

.cart-coupon-btn {
  height: 36px;
  padding: 0 20px;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 13px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-primary);
  transition: background 0.2s ease;
}

.cart-coupon-btn:hover {
  background: var(--color-primary-dark);
}

/* 已套用優惠 */
.cart-coupons-applied {
  margin-top: 10px;
}

.cart-coupon-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-soft);
  border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
  border-radius: 0;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.cart-coupon-applied-text {
  font-size: 12px;
  color: var(--color-primary);
}

.cart-coupon-remove {
  font-size: 14px;
  color: var(--color-primary);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.2s ease;
}

.cart-coupon-remove:hover {
  color: var(--color-danger);
}

/* 分隔線 */
.cart-summary-divider {
  height: 1px;
  background: var(--color-border-light);
  margin: 14px 0;
}

/* 金額明細 */
.cart-summary-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-summary-label {
  font-size: 14px;
  color: var(--color-text-muted);
}

.cart-summary-value {
  font-size: 14px;
  color: var(--color-text-strong);
  text-align: right;
}

.cart-summary-row.success .cart-summary-label,
.cart-summary-row.success .cart-summary-value {
  color: var(--color-success);
}

.cart-summary-row.coupon-row .cart-summary-label,
.cart-summary-row.coupon-row .cart-summary-value {
  color: var(--color-primary);
}

/* 應付金額 */
.cart-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.cart-summary-total-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-black);
}

.cart-summary-total-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary);
}

/* 前往結帳按鈕 */
.cart-checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  background: var(--color-secondary-dark);
  color: var(--color-white);
  font-size: 16px;
  font-weight: 700;
  margin-top: 10px;
  transition: all 0.3s ease;
}

.cart-checkout-btn:hover {
  background: var(--color-secondary-deeper);
  opacity: 1;
}

/* 信任標記 */
.cart-trust-badges {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 12px;
}

.cart-trust-badges span {
  font-size: 11px;
  color: var(--color-text-light);
}

.cart-trust-badges span:first-child::before {
  content: "🔒 ";
}

.cart-trust-badges span:last-child::before {
  content: "✓ ";
}

/* ========================================
   動畫效果
   ======================================== */

@keyframes cartItemFadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 進場動畫已移除：商品由伺服器直接輸出，不需淡入滑動，避免載入時「跳動」 */

.cart-item.removing {
  animation: cartItemRemove 0.35s ease forwards;
}

@keyframes cartItemRemove {
  to {
    opacity: 0;
    transform: translateX(40px);
    height: 0;
    padding: 0 22px;
    overflow: hidden;
  }
}

/* ========================================
   響應式 RWD
   ======================================== */
@media screen and (max-width: 992px) {
  .cart-container {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 30px 40px;
    /* 單欄堆疊時，列間距由 gap 統一控制，避免與 summary 的 margin-top 疊加成大空白 */
    gap: 24px;
  }

  .cart-summary {
    position: static;
    order: 2;
    margin-top: 0;
    margin-bottom: 0;
  }

  .cart-main {
    order: 1;
    /* 手機單欄不需要桌機的等高拉伸（避免 .cart-upsell 的 margin-top:auto 撐開空白） */
    align-self: start;
  }

  /* 手機一律取消桌機「加購區貼底」技巧，任何情況都不會被撐開多餘空白 */
  .cart-upsell {
    margin-top: 24px;
  }

  .cart-upsell-grid {
    display: flex;
    overflow-x: auto;
  }

  .cart-upsell-card {
    flex-basis: 240px;
  }

  /* 行動版訂單摘要 */
  .cart-summary {
    padding: 24px 20px 28px;
    border: 1px solid var(--color-primary);
  }

  .cart-summary-title {
    text-align: center;
    font-size: 18px;
    margin-bottom: 22px;
  }

  .cart-coupon-section {
    margin-bottom: 0;
  }

  .cart-coupon-label {
    font-size: 14px;
    color: var(--color-text-light);
    margin-bottom: 10px;
  }

  .cart-coupon-input {
    height: 40px;
    font-size: 14px;
  }

  .cart-coupon-btn {
    height: 40px;
    min-width: 76px;
    font-size: 14px;
  }

  .cart-coupons-applied {
    margin-top: 12px;
  }

  .cart-coupon-applied {
    margin-bottom: 0;
  }

  .cart-summary-divider {
    margin: 18px 0;
  }

  .cart-summary-rows {
    gap: 14px;
  }

  .cart-summary-label,
  .cart-summary-value {
    font-size: 14px;
  }

  .cart-summary-total {
    padding: 10px 0 18px;
  }

  .cart-summary-total-label {
    font-size: 16px;
  }

  .cart-summary-total-value {
    font-size: 22px;
  }

  .cart-checkout-btn {
    height: 48px;
    font-size: 16px;
    margin-top: 0;
  }

  .cart-trust-badges {
    gap: 18px;
    margin-top: 14px;
  }

  .cart-trust-badges span {
    font-size: 11px;
  }
}

@media screen and (max-width: 768px) {
  .cart-title-section {
    gap: 6px;
    padding-bottom: 20px;
  }

  .cart-page-title {
    font-size: 22px;
    line-height: 1.25;
  }

  .cart-title-underline {
    width: 184px;
  }

  .cart-item-count {
    font-size: 14px;
    line-height: 20px;
  }

  .cart-container {
    padding: 0 var(--mobile-gutter) 30px;
  }

  .cart-table-header {
    display: none;
  }

  .cart-items {
    gap: 10px;
  }

  .cart-item {
    /* ── 尺寸旋鈕（數值依設計稿）── */
    --ci-img-h: 88px; /* 圖片最小邊長（1:1 正方形）—— 這個值同時決定卡片高度 */
    --ci-name: 13px; /* 標題字級 */
    --ci-spec: 11px; /* 規格字級（比標題小兩級，它是輔助資訊） */
    --ci-price: 14px; /* 價錢字級 */
    --ci-qtybtn: 21px; /* ＋／−按鈕 */
    --ci-qtyval: 34px; /* 數量框寬 */
    --ci-qtygap: 4px; /* 數量元件間距 */
    --ci-gap-y: 6px; /* 列與列的垂直間距 */
    /* 數量欄固定寬度 = 兩顆按鈕 + 數字框 + 兩個間距 */
    --ci-qtycol: calc(
      var(--ci-qtybtn) * 2 + var(--ci-qtyval) + var(--ci-qtygap) * 2
    );

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) var(--ci-qtycol);
    /* 第二列吃掉剩餘高度，把價錢與數量壓到卡片底部——
       設計稿上這兩者是跟圖片下緣對齊的 */
    grid-template-rows: auto 1fr auto;
    column-gap: 8px;
    row-gap: var(--ci-gap-y);
    /* 圖片 91 + 上下 padding 13 = 104，取 110 留一點餘裕；
       用 min-height 而不是 height，商品名太長換行時才不會溢出 */
    /*
     * 不再寫 min-height，改由圖片決定卡片高度（圖 91 + 上下 padding 13 = 104）。
     *
     * 設計稿標的是卡片 110、圖片 91 —— 這兩個數字本身就差 6px，
     * 不管怎麼排都一定會在圖片上下看到縫。讓圖片擐滿就沒這個問題，
     * 商品名換行而卡片變高時，圖片也會跟著齊高。
     */
    padding: 6px 8px 7px;
    border: 1px solid var(--color-border);
    margin-bottom: 0;
    position: relative;
    align-items: center;
    background: var(--color-white);
  }

  .cart-item:first-child {
    border-top: 1px solid var(--color-border-light);
  }

  .cart-item:hover {
    background: var(--color-white);
  }

  .cart-item-product,
  .cart-item-info {
    display: contents;
  }

  /*
   * 圖片填滿卡片高度，上下不留空。
   *
   * 原本是固定 91px + align-self: center，但卡片內容區有 97px（110 減上下 padding），
   * 圖片就被置中在中間、上下各留一道縫。改成 stretch 之後，
   * 不管卡片因為商品名換行而變多高，圖片都跟著齊高。
   * 實際比例由內層 <img> 的 object-fit: cover 處理，不會變形。
   */
  /*
   * 1:1 正方形，且上下貼齊卡片。
   *
   * 高度由 align-self: stretch 吃滿整張卡片（三列＋列間距），
   * 寬度再由 aspect-ratio 回推 —— 所以「正方形」與「不留空隙」兩件事
   * 不會互相打架：卡片因商品名換行而變高時，圖片會同步變大並維持正方。
   * 欄寬設 auto 就是為了讓格線跟著圖片實際寬度走。
   */
  .cart-item-image {
    grid-column: 1;
    grid-row: 1 / 4;
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    min-height: var(--ci-img-h);
    align-self: stretch;
    background: var(--color-bg-grey);
  }

  /*
   * 圖改用絕對定位擐滿外框。
   *
   * 外框改成 height: auto + stretch 之後，高度是格線算出來的，
   * 不是寫死的值 —— 子元素的 height: 100% 找不到參照對象，
   * 實測會算成 0×0（只剩灰底，商品圖根本不見）。
   * 外框已經是 position: relative，inset: 0 就能穩穩填滿。
   */
  .cart-item-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 標題橫跨中間+數量欄，吃滿寬度、可換行不截斷 */
  .cart-item-name {
    grid-column: 2 / 4;
    grid-row: 1;
    font-size: var(--ci-name);
    font-weight: 600;
    line-height: 22px;
    color: var(--color-text-strong);
    align-self: start;
    justify-self: start;
    text-align: left;
    margin: 0;
    padding: 0 22px 0 0; /* 右邊留位給右上角刪除鈕 */
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .cart-item-spec {
    /* 只佔中間欄。原本跨到第三欄，下拉會伸進數量按鈕的欄位裡（實測超出 3px） */
    grid-column: 2;
    grid-row: 2;
    max-width: 100%;
    font-size: var(--ci-spec);
    line-height: 1.4;
    align-self: start;
    justify-self: start;
    text-align: left;
    margin: 0;
    padding: 0;
    color: var(--color-text-light);
    white-space: nowrap; /* 「規格：」與下拉不斷行 */
  }

  /* 手機維持「規格：＋下拉」同一行（直排只用於桌機） */
  /*
   * 標籤與下拉維持同一列。
   *
   * 中間欄只有 ~113px，而「淨手圍尺寸：」加上下拉原本要 119px ——
   * 所以標籤字級再降一級（見 .cart-flavor-label），才塞得進去不換行。
   */
  .cart-flavor-wrap {
    flex-direction: row;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex-wrap: nowrap;
  }

  /*
   * 屬性名稱長短不一（「規格」2 字、「淨手圍尺寸」5 字）。
   * 空間不夠時讓標籤省略，而不是把下拉擠出欄位——
   * 下拉是要點的，標籤只是說明。
   */
  .cart-flavor-label {
    min-width: 0;
    /* 比下拉再小一級：它只是說明，下拉裡的「13cm」才是資料 */
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cart-flavor-select {
    flex: 0 0 auto;
  }

  .cart-item-price {
    display: none;
  }

  .cart-item-qty {
    grid-column: 3;
    grid-row: 3;
    justify-content: flex-end;
    justify-self: end;
    align-self: end;
    gap: var(--ci-qtygap);
  }

  .qty-btn {
    width: var(--ci-qtybtn);
    height: var(--ci-qtybtn);
    font-size: 12px;
    border-color: var(--color-border);
  }

  .qty-value {
    width: var(--ci-qtyval);
    height: var(--ci-qtybtn);
    font-size: 12px;
    border-color: var(--color-border);
  }

  /* 刪除鈕固定卡片右上角（絕對定位，不佔欄寬） */
  .cart-item-delete {
    position: absolute;
    top: 6px;
    right: 8px;
    margin: 0;
    color: var(--color-text-strong);
    width: 14px;
    height: 24px;
  }

  .cart-item-delete svg {
    width: 14px;
    height: 24px;
  }

  /* 規格下拉：設計稿 55×21、細邊框、小三角。
     寬度用 min-width，遇到「白水晶貌貝手鏈 - 18cm」這種長值才不會被截 */
  .cart-flavor-select {
    min-width: 46px;
    max-width: 100%;
    height: 20px;
    padding: 0 4px;
    font-size: var(--ci-spec);
    line-height: 1;
    /* 底色、字色、圓角都跟基底規則走，這裡只調尺寸 */
  }

  /* 價錢：與標題/規格左緣切齊，和數量同一水平列 */
  .cart-item-subtotal {
    grid-column: 2;
    grid-row: 3;
    text-align: left;
    font-size: var(--ci-price);
    line-height: 1.2;
    font-weight: 700;
    color: var(--color-accent);
    align-self: end;
    margin: 0;
    padding: 0;
    white-space: nowrap;
  }

  .cart-item-subtotal::before {
    content: none;
  }

  .cart-continue-btn {
    display: flex;
    width: 180px;
    height: 40px;
    margin: 24px auto 0;
    font-size: 14px;
  }

  .cart-upsell {
    margin-top: 24px;
    padding: 20px 16px;
    background: var(--color-white);
    gap: 16px;
    align-items: stretch;
  }

  .cart-upsell-header {
    justify-content: center;
    text-align: center;
  }

  .cart-upsell-text {
    font-size: 14px;
    line-height: 1.5;
  }

  .cart-upsell-grid {
    gap: 12px;
    padding-bottom: 8px;
  }

  .cart-upsell-card {
    flex: 0 0 178px;
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
  }

  .cart-upsell-card:hover {
    transform: none;
    box-shadow: none;
  }

  .cart-upsell-card-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .cart-upsell-card-info {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
    width: 100%;
  }

  .cart-upsell-card-name,
  .cart-upsell-card-price {
    display: inline;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-strong);
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  .cart-upsell-add-btn {
    flex-basis: 100%;
    width: 100%;
    height: 30px;
    margin-top: 8px;
    font-size: 12px;
  }

  .cart-steps-inner {
    max-width: 320px;
  }

  .cart-step-line {
    min-width: 40px;
  }
}

@media screen and (max-width: 480px) {
  .cart-summary {
    padding: 22px 16px 26px;
  }

  .cart-summary-total-value {
    font-size: 20px;
  }
}

@media screen and (max-width: 380px) {
  .cart-container {
    padding-left: var(--mobile-gutter);
    padding-right: var(--mobile-gutter);
  }
}

/*
 * 360px 以下才縮小旋鈕。
 *
 * 斷點原本是 380px —— 但 375（iPhone SE / 8 / 13 mini）正是設計稿的基準寬度，
 * 落在那個範圍裡就會拿到縮小版，量出來的尺寸跟設計稿對不上。
 */
@media screen and (max-width: 360px) {
  /*
   * 窄螢幕直接收掉「淨手圍尺寸：」這種長標籤。
   * 留著只有兩種下場：把下拉擠掉，或被省略成「手…」—— 都沒意義。
   * 下拉本身就寫著「13cm」，讀屏軟體也靠 aria-label 拿得到完整名稱。
   */
  .cart-flavor-label {
    display: none;
  }

  .cart-item {
    --ci-img-h: 64px;
    --ci-qtybtn: 20px;
    --ci-qtyval: 34px;
    column-gap: 6px;
    padding: 6px;
  }
}

/* ============================================================
   加購區：快速選購彈窗

   可變商品要先選規格才能加入購物車。彈窗蓋在整頁上、置中顯示，
   讓人不必離開購物車就能選規格 —— 結帳動線不中斷。
   ============================================================ */

.cart-qv {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  /* opacity: 0 只是看不見，照樣攔截點擊 —— 淡出期間別擋住底下的購物車 */
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/*
 * 這條不能省。
 *
 * 瀏覽器內建的 [hidden] { display: none } 是 UA 樣式，
 * 上面那條 display: flex 是作者樣式，優先權比較高 ——
 * 沒有這條的話彈窗關著也一直鋪滿整頁，整個購物車都點不動。
 */
.cart-qv[hidden] {
  display: none;
}

.cart-qv.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cart-qv-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.cart-qv-box {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--color-white);
  border-radius: 4px;
  padding: 28px;
  /* 開啟時由下往上帶一點位移，比純淡入有方向感 */
  transform: translateY(12px);
  transition: transform 0.24s ease;
}

.cart-qv.is-open .cart-qv-box {
  transform: translateY(0);
}

.cart-qv-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--color-text-light);
  cursor: pointer;
}

.cart-qv-close:hover {
  color: var(--color-accent);
}

.cart-qv-loading {
  margin: 0;
  padding: 40px 0;
  text-align: center;
  color: var(--color-text-light);
}

.cart-qv-content {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
}

.cart-qv-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.cart-qv-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* grid 項目的自動最小值是 min-content，長商品名會把左欄擠掉 */
  min-width: 0;
}

.cart-qv-name {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-strong);
}

.cart-qv-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-accent);
}

.cart-qv-excerpt {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-light);
}

.cart-qv-label {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}

.cart-qv-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 與商品頁的規格按鈕同一套視覺語言 */
.cart-qv-opt {
  min-width: 0;
  padding: 8px 14px;
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text-strong);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.cart-qv-opt:hover:not(:disabled),
.cart-qv-opt:focus-visible:not(:disabled) {
  outline: none;
  background: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.cart-qv-opt.active {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}

.cart-qv-opt:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cart-qv-submit {
  height: 46px;
  border: none;
  background: var(--color-secondary);
  font-family: inherit;
  font-size: 15px;
  color: var(--color-white);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.cart-qv-submit:hover:not(:disabled) {
  opacity: 0.85;
}

.cart-qv-submit:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cart-qv-more {
  font-size: 13px;
  color: var(--color-text-light);
  text-decoration: underline;
}

.cart-qv-more:hover {
  color: var(--color-accent);
}

/* 彈窗開啟時鎖住背景捲動 */
body.cart-qv-open {
  overflow: hidden;
}

@media (max-width: 600px) {
  .cart-qv {
    padding: 12px;
  }

  .cart-qv-box {
    padding: 20px 16px;
  }

  /* 窄螢幕改單欄堆疊，圖片縮小讓選項與按鈕留在第一屏 */
  .cart-qv-content {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .cart-qv-media {
    max-width: 160px;
    margin-inline: auto;
  }

  .cart-qv-name {
    font-size: 16px;
  }

  .cart-qv-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .cart-qv-opt {
    padding: 8px 4px;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart-qv,
  .cart-qv-box {
    transition: none;
  }
}