.ym-commerce {
  --ym-commerce-coral: #ed8694;
  --ym-commerce-coral-dark: #bd4f66;
  --ym-commerce-ink: #382f31;
  --ym-commerce-muted: #74696b;
  --ym-commerce-paper: #fffaf8;
  --ym-commerce-line: #efdadd;
  --ym-commerce-band: #f7eeec;
  margin-top: 48px;
  margin-bottom: 56px;
  color: var(--ym-commerce-ink);
}

.ym-commerce *,
.ym-commerce *::before,
.ym-commerce *::after { box-sizing: border-box; }

#product-product .ym-product-main + .ym-commerce,
#product-product .ym-product-details + .ym-commerce { margin-top: 24px; margin-bottom: 0; }
.ym-commerce--purchase { margin-bottom: 0; }
.ym-commerce--purchase .ym-commerce__block { box-shadow: var(--ym-shadow-md); }
.ym-commerce--recommendations { margin-top: 24px; margin-bottom: 24px; }

/* 加購／套組滿版帶：底色出血到內容欄邊緣，讓這段跟商品描述白卡明確分開 */
.ym-commerce__band {
  margin-inline: -20px;
  padding: 18px 20px 16px;
  background: var(--ym-commerce-band);
}
.ym-commerce__band-inner { display: flow-root; }
.ym-commerce__band .ym-commerce__block { margin-top: 0; }
.ym-commerce__band .ym-commerce__block + .ym-commerce__block { margin-top: 16px; }

.ym-commerce__eyebrow {
  color: var(--ym-commerce-ink-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}

.ym-commerce__block {
  padding: 16px 20px;
  margin-top: 20px;
  border: 1px solid var(--ym-commerce-line);
  border-radius: var(--ym-radius-lg);
  background: #fff;
  box-shadow: var(--ym-shadow-md);
}

.ym-commerce__block--addons {
  overflow: hidden;
  background: linear-gradient(145deg, #fff 0%, var(--ym-commerce-paper) 100%);
}

.ym-commerce__heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 20px;
  margin-bottom: 8px;
}

/* 眉標與大標併一行：兩行標題在加購段是純裝飾，吃掉的高度等於半張加購卡 */
.ym-commerce__heading > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.ym-commerce__heading h2 {
  margin: 0;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.2;
  font-weight: 800;
}

.ym-commerce__heading p,
.ym-commerce__group-copy p { margin: 0; color: var(--ym-commerce-muted); font-size: 12px; }

.ym-commerce__addon-group {
  display: block;
  padding: 8px 0 2px;
  border-top: 1px solid var(--ym-commerce-line);
}

.ym-commerce__group-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.ym-commerce__group-copy h3 { margin: 0; font-size: 17px; }
/* 主動提示（還差多少／已達門檻）比規則原文重要，所以它是主要那行，
   規則字級／權重壓下去。文字坐在 #f7eeec 淺粉底，用 ink-accent 才過 AA。 */
.ym-commerce__nudge {
  flex-basis: 100%;
  color: var(--ym-commerce-ink-accent);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}
.ym-commerce__nudge.is-reached { color: #1f6b4a; }
.ym-commerce__condition { color: var(--ym-commerce-muted); font-size: 12px; font-weight: 600; }

/* [YM 2026-09-01] 老闆：加購排版比照「你可能也喜歡」——
   卡片改直式（圖上／名稱／加購價／按鈕），桌機一排 4 張與推薦 rail 同節奏。 */
/* [YM 2026-09-02] 老闆：「加購優惠排版跟大小比照『你可能也喜歡』」——
   原本桌機 3~4 欄大卡（單卡 432px、圖 430px）改成與推薦 rail 同款橫向滑動窄卡：
   桌機一排 5 張、中尺寸 4 張、手機 min(72vw,278px)，卡片直式（圖上／名稱／加購價／按鈕）維持不變。 */
.ym-commerce__addon-list {
  display: flex;
  overflow-x: auto;
  flex-wrap: nowrap;
  gap: 16px;
  margin-top: 10px;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ym-commerce__addon-list::-webkit-scrollbar { display: none; width: 0; height: 0; }

.ym-commerce__addon-card {
  position: relative;
  display: flex;
  flex: 0 0 calc((100% - 4 * 16px) / 5);
  flex-direction: column;
  min-width: 0;
  scroll-snap-align: start;
  border: 1px solid var(--ym-commerce-line);
  border-radius: var(--ym-radius-md);
  background: #fff;
  box-shadow: var(--ym-shadow-sm);
  overflow: hidden;
}

.ym-commerce__addon-card[hidden] { display: none; }
.ym-commerce__addon-media { position: relative; }
/* [YM 2026-08-30 v2] 勾選框整組拿掉（老闆指示）：卡片沒有選取狀態，
   唯一操作是那顆「加入購物車」。缺規格時點按鈕會跳到下拉並亮框提示。 */
.ym-commerce__addon-card.is-need-option select.ym-commerce__addon-option[required] {
  border-color: var(--ym-commerce-coral-dark, #b3435a);
  box-shadow: 0 0 0 3px rgba(237, 134, 148, .28);
}
/* 與購物車加購卡同款「省 N%」徽章（cart_addon 的 .addon-discount-badge 同規格） */
.ym-commerce__addon-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 3px 7px;
  border-radius: var(--ym-radius-pill);
  color: #fff;
  background: var(--ym-coral-strong, #c54862);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.35;
}
.ym-commerce__addon-badge[hidden] { display: none; }

.ym-commerce__addon-media img,
.ym-commerce__product-card img {
  width: 100%;
  aspect-ratio: 1;
  display: block;
  object-fit: cover;
  background: #f7f3f1;
}

.ym-commerce__addon-copy { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; align-items: stretch; padding: 9px 10px 11px; }
.ym-commerce__addon-copy h4 { min-height: 37px; margin: 0 0 4px; display: -webkit-box; overflow: hidden; font-size: 13px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ym-commerce__addon-copy small { margin: 2px 0 0; color: var(--ym-commerce-muted); font-size: 11px; }
.ym-commerce__prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.ym-commerce__prices strong { color: var(--ym-commerce-ink-accent); font-size: 17px; }
.ym-commerce__prices del { color: #7f7376; font-size: 13px; }
.ym-commerce__addon-option-control { width: 100%; margin: 5px 0 6px; color: var(--ym-commerce-muted); font-size: 11px; font-weight: 700; }
.ym-commerce__addon-option-control span { display: block; margin-bottom: 2px; }
.ym-commerce__addon-option-control select { width: 100%; min-height: 36px; padding: 6px 28px 6px 9px; border: 1px solid var(--ym-commerce-line); border-radius: var(--ym-radius-xs); color: var(--ym-commerce-ink); background: #fff; font-size: 12px; }

/* [YM 2026-08-30 v2] 結算列拿掉後，這顆是卡片上唯一的動作：升級成實心小按鈕。 */
.ym-commerce__addon-button {
  align-self: stretch;
  min-height: 34px;
  margin-top: auto;
  padding: 7px 12px;
  border: 0;
  border-radius: var(--ym-radius-sm);
  color: #fff;
  background: var(--ym-commerce-coral-dark);
  font-size: 12.5px;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  transition: background .14s ease;
}

.ym-commerce__addon-button:hover,
.ym-commerce__addon-button:focus-visible { background: #993b50; }
.ym-commerce__addon-button:focus-visible { outline: 3px solid rgba(237, 134, 148, .45); outline-offset: 2px; }
.ym-commerce__addon-button[disabled],
.ym-commerce__addon-button[aria-busy="true"] { opacity: .6; cursor: not-allowed; }

.ym-commerce__addon-more {
  min-height: 30px;
  margin: 6px 0 0;
  padding: 5px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  color: var(--ym-commerce-ink-accent);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.ym-commerce__addon-more[hidden] { display: none; }
.ym-commerce__addon-more:focus-visible { outline: 3px solid rgba(237, 134, 148, .35); outline-offset: 2px; }

/* [YM 2026-08-30] 加入購物車通知卡（.ym-cart-toast）樣式已搬到 ym-v2.css：
   購物車頁／結帳頁的橫幅提示也統一用同一張卡，全站都要載得到。 */

.ym-commerce__bundle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ym-commerce__bundle-card { position: relative; display: flex; min-width: 0; flex-direction: column; gap: 7px; padding: 14px; border: 1px solid var(--ym-commerce-line); border-radius: var(--ym-radius-md); background: #fff; }
.ym-commerce__bundle-card.is-featured { border-color: var(--ym-commerce-coral); box-shadow: var(--ym-shadow-cta); }
.ym-commerce__bundle-tag { position: absolute; top: 12px; right: 12px; padding: 4px 9px; border-radius: var(--ym-radius-pill); color: #fff; background: var(--ym-commerce-coral-dark); font-size: 11px; font-weight: 800; }
.ym-commerce__bundle-images { display: flex; min-height: 78px; align-items: center; gap: 8px; padding-right: 68px; }
.ym-commerce__bundle-images > span { position: relative; flex: 0 0 72px; }
.ym-commerce__bundle-images img { width: 72px; height: 72px; border: 1px solid var(--ym-commerce-line); border-radius: var(--ym-radius-sm); object-fit: cover; }
.ym-commerce__bundle-images b { position: absolute; right: -3px; bottom: 2px; padding: 2px 5px; border-radius: var(--ym-radius-xs); color: #fff; background: #4c4246; font-size: 10px; }
.ym-commerce__bundle-card h3 { margin: 0; font-size: 17px; }
.ym-commerce__bundle-card p { margin: 0; color: var(--ym-commerce-muted); font-size: 13px; line-height: 1.45; }
.ym-commerce__bundle-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 10px; }
.ym-commerce__bundle-price span { color: var(--ym-commerce-muted); font-size: 13px; font-weight: 700; }
.ym-commerce__bundle-price strong { color: var(--ym-commerce-ink-accent); font-size: 23px; line-height: 1; }
.ym-commerce__bundle-price del { color: #7f7376; font-size: 13px; }
.ym-commerce__bundle-price b { padding: 3px 7px; border-radius: var(--ym-radius-pill); color: #9d364d; background: #fff0f2; font-size: 12px; }
.ym-commerce__bundle-button { min-height: 44px; margin-top: auto; border: 0; border-radius: var(--ym-radius-sm); color: #fff; background: var(--ym-commerce-coral-dark); font-weight: 900; cursor: pointer; transition: background .16s ease, box-shadow .16s ease, transform .16s ease; }
.ym-commerce__bundle-button:hover, .ym-commerce__bundle-button:focus-visible { background: #993b50; box-shadow: var(--ym-shadow-cta); }
.ym-commerce__bundle-button:focus-visible { outline: 3px solid rgba(237, 134, 148, .35); outline-offset: 2px; }
.ym-commerce__bundle-button:active { transform: translateY(1px); }
.ym-commerce__bundle-button[disabled] { opacity: .65; cursor: wait; }
.ym-commerce__notice { min-height: 0; margin-top: 12px; color: var(--ym-commerce-ink-accent); font-weight: 700; }
.ym-commerce__notice:empty { display: none; }
.ym-commerce__notice.is-error { color: #a22c2c; }

/* 三個推薦區合併成一個分頁 rail（酷澎：描述 → 評價 緊鄰，推薦全丟到評價之後） */
.ym-commerce__rec-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; padding: 0; list-style: none; }
.ym-commerce__rec-tab {
  min-height: 40px;
  padding: 9px 18px;
  border: 1px solid var(--ym-commerce-line);
  border-radius: var(--ym-radius-pill);
  color: var(--ym-commerce-muted);
  background: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.ym-commerce__rec-tab[aria-selected="true"] { border-color: var(--ym-commerce-ink-accent); color: #fff; background: var(--ym-commerce-coral-dark); }
.ym-commerce__rec-tab:focus-visible { outline: 3px solid rgba(237, 134, 148, .45); outline-offset: 2px; }
.ym-commerce__rec-panel[hidden] { display: none; }

.ym-commerce__product-grid {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ym-commerce__product-grid::-webkit-scrollbar { display: none; width: 0; height: 0; }

.ym-commerce__product-card {
  display: flex;
  min-width: 0;
  flex: 0 0 calc((100% - 4 * 16px) / 5);
  flex-direction: column;
  gap: 9px;
  scroll-snap-align: start;
  color: var(--ym-commerce-ink);
}

.ym-commerce__product-card > span {
  display: -webkit-box;
  overflow: hidden;
  min-height: 42px;
  font-weight: 700;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 1199px) {
  .ym-commerce__addon-card { flex-basis: calc((100% - 3 * 16px) / 4); }
  .ym-commerce__product-card { flex-basis: calc((100% - 3 * 16px) / 4); }
}

@media (max-width: 767px) {
  .ym-commerce__band { margin-inline: -14px; padding: 12px 14px 12px; }
  .ym-commerce__bundle-grid { display: flex; overflow-x: auto; gap: 10px; padding: 2px 2px 8px; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ym-commerce__bundle-card { flex: 0 0 min(86%, 300px); padding: 13px; scroll-snap-align: start; }
  .ym-commerce__bundle-images { min-height: 70px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ym-commerce__bundle-images > span { flex: 0 0 64px; }
  .ym-commerce__bundle-images img { width: 64px; height: 64px; }
  .ym-commerce { margin-top: 24px; margin-bottom: 32px; }
  .ym-commerce--purchase { margin-top: 16px; margin-bottom: 0; }
  .ym-commerce--recommendations { margin-top: 20px; margin-bottom: 20px; }
  .ym-commerce__block { padding: 12px 12px; margin-top: 10px; border-radius: var(--ym-radius-md); }
  .ym-commerce__heading { display: block; margin-bottom: 8px; }
  .ym-commerce__heading h2 { font-size: 18px; }
  .ym-commerce__heading p { display: none; }
  .ym-commerce__addon-group { padding: 8px 0 2px; }
  .ym-commerce__group-copy h3 { font-size: 15px; }
  .ym-commerce__group-copy p { display: none; }
  .ym-commerce__condition { font-size: 12px; }
  .ym-commerce__addon-list { gap: 12px; padding: 2px 2px 8px; }
  /* 手機同「你可能也喜歡」rail：直式窄卡橫向滑，同寬 min(72vw,278px) */
  .ym-commerce__addon-card { flex: 0 0 min(72vw, 278px); scroll-snap-align: start; }
  .ym-commerce__addon-copy h4 { min-height: 38px; margin: 0 0 4px; display: -webkit-box; overflow: hidden; font-size: 13px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .ym-commerce__addon-copy small { display: none; }
  .ym-commerce__prices strong { font-size: 15px; }
  .ym-commerce__addon-button { min-height: 36px; padding: 8px 10px; font-size: 13px; }
  .ym-commerce__rec-tabs { flex-wrap: nowrap; overflow-x: auto; margin-bottom: 10px; scrollbar-width: none; }
  .ym-commerce__rec-tabs::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .ym-commerce__rec-tab { flex: 0 0 auto; min-height: 38px; padding: 8px 14px; font-size: 14px; }
  .ym-commerce__product-grid { gap: 12px; }
  .ym-commerce__product-card { flex: 0 0 46%; }
  .ym-commerce__bundle-images::-webkit-scrollbar,
  .ym-commerce__bundle-grid::-webkit-scrollbar,
  .ym-commerce__addon-list::-webkit-scrollbar { display: none; width: 0; height: 0; }
}

@media (max-width: 420px) {
  .ym-commerce__product-card { flex-basis: 68%; }
}

@media (prefers-reduced-motion: reduce) {
  .ym-commerce__product-grid { scroll-behavior: auto; }
}

/* ============================================================
   角色驗收修正（2026-08-28 UI-UX 稽核）
   [元件一致性] 推薦鐵軌的卡片補上與 .product-thumb 相同的框／圓角／陰影／白底。
   ============================================================ */
.ym-commerce__product-card {
  padding: 12px 12px 14px;
  border: 1px solid var(--ym-line, #eadfe1);
  border-radius: var(--ym-radius-md);
  background: #fff;
  box-shadow: var(--ym-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}

.ym-commerce__product-card:hover,
.ym-commerce__product-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--ym-shadow-md);
}

/* [按鈕層級] 併回全站 primary token（#c54862）。白底實算 4.7:1（原註記 5.4:1 有誤）。
   這個階只給「填色」用：白字壓在 #c54862 上是 4.7:1，過 AA。 */
.ym-commerce { --ym-commerce-coral-dark: var(--ym-coral-strong, #c54862); }

/* [文字層級] 壓在淺粉底上的文字必須再深一階。
   #c54862 在白底 4.7:1 過關，但這一段的文字幾乎都坐在
   --ym-commerce-band #f7eeec 或 --ym-commerce-paper #fffaf8 上，
   實測只剩 4.11~4.40:1，低於 AA 4.5。改用全站的 --ym-coral-dark
   後在同樣底色上是 5.6:1。填色與文字分開兩個 token，才不會為了修文字
   把所有按鈕一起壓暗。 */
.ym-commerce { --ym-commerce-ink-accent: var(--ym-coral-dark, #9f3d53); }

@media (min-width: 1760px) {
  .ym-commerce__product-card { flex-basis: calc((100% - 5 * 16px) / 6); }
  .ym-commerce__bundle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 供貨狀態分級配色：現貨綠、低量橘（催單）、缺貨灰 */
.ym-ship-promise--low strong { color: #b4472a; }
.ym-ship-promise--out strong { color: #6d6064; }

/* =========================================================================
   [版面統一][桌機+手機] 加購段切齊全頁網格 —— .ym-shell 二次內縮的第二個案例
   .ym-commerce--purchase 同時帶 .ym-shell（width: min(100% - 40px, 1520px)），
   但它已經在 .container 版心裡，等於再內縮一次：實測桌機 55→1385、手機 49→341，
   而商品詳情／評論／標籤三張卡都是 35→1405（手機 35→355）。
   前人只修了 --recommendations，--purchase 被漏掉。

   __band 原本用 margin-inline:-20px 把底色出血回 35→1405，
   於是「底色帶 35→1405」外框對齊、但裡面那張白卡 55→1385 又不對齊 ——
   卡中卡正是使用者說的「東拼西湊」。這裡改成：
   band 自己就是那張卡（保留區隔用的淡底色 + 與其他卡同一組圓角／內距），
   裡面的 __block 不再自帶卡片外觀，內容直接貼齊卡片內容框。
   ========================================================================= */
#product-product .ym-commerce--purchase.ym-shell { width: 100%; }

#product-product .ym-commerce--purchase .ym-commerce__band {
  margin-inline: 0;
  padding: var(--ym-pdp-card-pad-y) var(--ym-pdp-card-pad-x);
  border: 1px solid var(--ym-commerce-line);
  border-radius: var(--ym-pdp-card-radius);
  background: var(--ym-commerce-band);
}
#product-product .ym-commerce--purchase .ym-commerce__band .ym-commerce__block {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
#product-product .ym-commerce--purchase .ym-commerce__band .ym-commerce__block + .ym-commerce__block {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--ym-commerce-line);
}

/* 推薦段的白卡跟商品詳情／評論卡共用同一組圓角與內距 */
#product-product .ym-commerce--recommendations .ym-commerce__block {
  padding: var(--ym-pdp-card-pad-y) var(--ym-pdp-card-pad-x);
  border-radius: var(--ym-pdp-card-radius);
}

/* 區塊間距：跟 .ym-product-details / .ym-reviews / .ym-product-tags 同一個節奏 */
#product-product .ym-product-main + .ym-commerce,
#product-product .ym-product-details + .ym-commerce,
#product-product .ym-commerce + .ym-commerce,
#product-product .ym-commerce--purchase,
#product-product .ym-commerce--recommendations {
  margin-top: var(--ym-pdp-card-gap);
  margin-bottom: 0;
}

/* 區塊標題與其他卡同一級（原本 clamp(18,1.7vw,22) 在 1440 是 22，比評論卡大） */
#product-product .ym-commerce .ym-commerce__heading h2 { font-size: var(--ym-pdp-title); }

@media (max-width: 767px) {
  #product-product .ym-commerce--purchase .ym-commerce__band {
    padding: var(--ym-pdp-card-pad-y) var(--ym-pdp-card-pad-x);
  }
}

/* [YM 2026-09-02] 加購卡太擠：加內距、卡片略放大，文字不要黏在一起 */
.ym-commerce__addon-card { padding: 12px; }
@media (min-width: 992px) {
  /* 桌機一排 4 張改成更舒服的間距（原 (100%-3*16)/4） */
  .ym-commerce__addon-list { gap: 18px; }
  .ym-commerce__addon-card { flex-basis: calc((100% - 3 * 18px) / 4); }
}