:root {
  --ym-coral: #ed8694;
  --ym-coral-strong: #c54862;
  --ym-coral-dark: #9f3d53;
  --ym-blush: #fceef1;
  --ym-cream: #fffaf7;
  --ym-ink: #30292b;
  --ym-muted: #766d70;
  --ym-line: #eadfe1;
  --ym-white: #fff;
  --ym-success: #26735e;
  --ym-warning: #b65d21;
  /* ---- 高度：4 階，全站只准用這 4 個 ----
     稽核（getComputedStyle，dev2 首頁＋商品頁）量到 24 種一次性 box-shadow，
     其中 rgba(81,46,54) 與 rgba(93,62,67) 兩套色調並存（product-commerce.css 自己另開一套），
     同一張卡在首頁與商品頁陰影不一樣。收斂成一條 elevation 量表。 */
  --ym-shadow-xs: 0 3px 12px rgba(81, 46, 54, .06);
  --ym-shadow-sm: 0 5px 18px rgba(81, 46, 54, .08);
  --ym-shadow-md: 0 16px 42px rgba(81, 46, 54, .14);
  --ym-shadow-lg: 0 22px 55px rgba(81, 46, 54, .2);
  /* 三個「不是高度、是角色」的陰影：CTA 光暈、往上打的固定列、燈箱遮罩。
     原本這三個角色各有 4-5 種寫法（CTA 就有 rgba(153,59,80)/(159,61,83)/(184,74,96)/(195,70,98) 四種）。 */
  --ym-shadow-cta: 0 8px 20px rgba(159, 61, 83, .2);
  --ym-shadow-up: 0 -8px 24px rgba(94, 48, 57, .12);
  --ym-shadow-overlay: 0 26px 80px rgba(0, 0, 0, .28);
  /* ---- 圓角：4 階 + 藥丸 ----
     稽核量到 17 種圓角字面值（4/5/6/8/9/10/11/12/13/14/15/16/18/20/22/99/999），
     同一個角色（卡片、按鈕、chip）各自長出好幾種值。收斂成 xs/sm/md/lg/pill。
     50% 是「正圓」另一個角色，保留。 */
  --ym-radius-xs: 8px;
  --ym-radius-sm: 10px;
  --ym-radius-md: 16px;
  --ym-radius-lg: 24px;
  --ym-radius-pill: 999px;
  /* ---- 控制項高度：3 階（sm/md/lg）----
     稽核量到桌機商品頁 10 種按鈕高度（17/19/36/38/40/42/44/46/48/52/58）。 */
  --ym-ctl-sm: 36px;
  --ym-ctl-md: 44px;
  --ym-ctl-lg: 52px;
  --ym-shell: 1520px; /* 站台版心：1240 在 1920 螢幕只用 64.6%，左右各空 340px */
  --ym-font: "Microsoft JhengHei UI", "PingFang TC", "Heiti TC", sans-serif;
}

@font-face {
  font-family: "FontAwesome YM";
  src: url("../fonts/fontawesome-ym-v2.woff2?v=1.0.0") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.ym-v2 .fa {
  font-family: "FontAwesome YM", "FontAwesome";
}

/* Native checkout skin: keep D QuickCheckout's transaction engine, replace its legacy UI. */
.route-checkout-checkout #container {
  max-width: 1240px;
  padding-top: 34px;
  padding-bottom: 48px;
}

.route-checkout-checkout #d_quickcheckout {
  color: var(--ym-ink);
  font-family: var(--ym-font);
}

.route-checkout-checkout .ym-topbar,
.route-checkout-checkout .ym-category-bar,
.route-checkout-checkout .ym-menu-toggle,
.route-checkout-checkout .ym-header__search,
.route-checkout-checkout .ym-header__actions {
  display: none !important;
}

.route-checkout-checkout .ym-header {
  border-bottom: 1px solid var(--ym-line);
  background: rgba(255, 255, 255, .98);
  box-shadow: var(--ym-shadow-xs);
}

.route-checkout-checkout .ym-header__main {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.route-checkout-checkout .ym-header__main::after {
  content: "安全加密結帳";
  color: var(--ym-success);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
}

.route-checkout-checkout .ym-logo {
  width: 154px;
}

.route-checkout-checkout .qc .qc-row {
  margin-right: -10px;
  margin-left: -10px;
}

.route-checkout-checkout .qc [class*="qc-col-"] {
  padding-right: 10px;
  padding-left: 10px;
}

.route-checkout-checkout .qc .ve-card {
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid #f0dfe2;
  border-radius: var(--ym-radius-md);
  background: #fff;
  box-shadow: var(--ym-shadow-md);
}

.route-checkout-checkout .qc .ve-card__header {
  min-height: 54px;
  padding: 15px 18px;
  border-bottom: 1px solid #f4e7e9;
  background: linear-gradient(135deg, #fff 0%, #fff8f9 100%);
  color: #3f3033;
  font-size: 18px;
  font-weight: 800;
}

.route-checkout-checkout .qc .ve-card__body {
  padding: 18px;
}

.route-checkout-checkout .qc .ve-form-group {
  margin-bottom: 14px;
}

.route-checkout-checkout .qc label {
  margin-bottom: 7px;
  color: #59484b;
  font-size: 14px;
  font-weight: 700;
}

.route-checkout-checkout .qc input[type="text"],
.route-checkout-checkout .qc input[type="email"],
.route-checkout-checkout .qc input[type="tel"],
.route-checkout-checkout .qc input[type="password"],
.route-checkout-checkout .qc input[type="number"],
.route-checkout-checkout .qc select,
.route-checkout-checkout .qc textarea {
  min-height: 46px;
  border: 1px solid #928589;
  border-radius: var(--ym-radius-sm);
  background: #fff;
  color: #2f292a;
  box-shadow: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.route-checkout-checkout .qc textarea {
  min-height: 92px;
}

.route-checkout-checkout .qc input:focus,
.route-checkout-checkout .qc select:focus,
.route-checkout-checkout .qc textarea:focus {
  border-color: var(--ym-coral);
  outline: 0;
  box-shadow: 0 0 0 4px rgba(235, 133, 147, .16);
}

.route-checkout-checkout .qc .ve-btn--primary,
.route-checkout-checkout .qc .btn-primary,
.route-checkout-checkout .qc button[type="submit"] {
  min-height: 46px;
  border-color: var(--ym-coral-dark) !important;
  border-radius: var(--ym-radius-sm);
  background: var(--ym-coral-dark) !important;
  color: #fff !important;
  font-weight: 800;
  box-shadow: var(--ym-shadow-cta);
}

.route-checkout-checkout .qc .ve-btn--primary:hover,
.route-checkout-checkout .qc .btn-primary:hover,
.route-checkout-checkout .qc button[type="submit"]:hover {
  background: #993a4d !important;
}

.route-checkout-checkout .qc .btn-group .ve-btn,
.route-checkout-checkout .qc .btn-group label {
  min-height: 44px;
  border-color: #ead8dc;
  background: #fff5f7;
  color: #6a5055;
  font-weight: 800;
}

.route-checkout-checkout .qc .btn-group .active,
.route-checkout-checkout .qc .btn-group .ve-btn--primary {
  border-color: var(--ym-coral-dark) !important;
  background: var(--ym-coral-dark) !important;
  color: #fff !important;
}

.route-checkout-checkout .qc input[type="radio"],
.route-checkout-checkout .qc input[type="checkbox"] {
  accent-color: var(--ym-coral-dark);
}

.route-checkout-checkout .qc .qc-shipping-method label.ve-radio,
.route-checkout-checkout .qc .qc-payment-method label.ve-radio {
  width: 100%;
  min-height: 44px;
  margin-bottom: 7px;
  padding: 9px 11px 9px 32px;
  display: flex;
  align-items: center;
  border: 1px solid #eadde0;
  border-radius: var(--ym-radius-sm);
  background: #fff;
  cursor: pointer;
}

.route-checkout-checkout .qc .qc-shipping-method label.ve-radio--selected,
.route-checkout-checkout .qc .qc-payment-method label.ve-radio--selected {
  border-color: var(--ym-coral);
  background: #fff5f7;
}

.route-checkout-checkout .qc .qc-shipping-method label.ve-radio:focus-within,
.route-checkout-checkout .qc .qc-payment-method label.ve-radio:focus-within {
  outline: 3px solid rgba(237, 134, 148, .24);
  outline-offset: 1px;
}

.route-checkout-checkout .qc .qc-shipping-method label.ve-radio input[type="radio"],
.route-checkout-checkout .qc .qc-payment-method label.ve-radio input[type="radio"] {
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 44px;
  margin: 0;
  cursor: pointer;
}

.route-checkout-checkout .qc a {
  color: var(--ym-coral-dark);
}

.route-checkout-checkout .qc .ve-btn,
.route-checkout-checkout .qc button {
  min-height: 44px;
  border-radius: var(--ym-radius-sm);
  font-weight: 800;
}

.route-checkout-checkout .qc .ve-btn:focus-visible,
.route-checkout-checkout .qc button:focus-visible {
  outline: 3px solid rgba(237, 134, 148, .3);
  outline-offset: 2px;
}

.route-checkout-checkout .qc .qc-quantity .ve-input-group {
  max-width: none;
  display: inline-flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
}

.route-checkout-checkout .qc .qc-quantity .ve-btn {
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 0;
}

.route-checkout-checkout .qc .qc-quantity .decrease {
  border-radius: var(--ym-radius-sm) 0 0 var(--ym-radius-sm);
}

.route-checkout-checkout .qc .qc-quantity .increase {
  border-radius: 0 var(--ym-radius-sm) var(--ym-radius-sm) 0;
}

.route-checkout-checkout .qc .qc-quantity .delete {
  margin-left: 8px;
  border-radius: var(--ym-radius-sm);
}

.route-checkout-checkout .qc .qc-product-quantity {
  width: 58px;
  min-width: 58px;
  height: 46px;
  min-height: 46px;
  padding-right: 6px;
  padding-left: 6px;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

.route-checkout-checkout .qc #child3 .ve-card {
  border-color: #eac9cf;
}

.route-checkout-checkout .qc #child3 .ve-card__header::after {
  content: "即時確認金額與運費";
  float: right;
  color: #92787d;
  font-size: 12px;
  font-weight: 500;
}

@media (min-width: 992px) {
  .route-checkout-checkout #d_quickcheckout #row0 > .qc-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: start;
  }

  .route-checkout-checkout #d_quickcheckout #row0 > .qc-row > #col0,
  .route-checkout-checkout #d_quickcheckout #row0 > .qc-row > #col1 {
    width: auto;
    float: none;
  }

  .route-checkout-checkout #d_quickcheckout #col0 {
    position: sticky;
    top: 92px;
    z-index: 2;
  }
}

.route-checkout-checkout #payment_address_fields .field-sortable:has(#payment_address_agree),
.route-checkout-checkout #payment_address_fields .field-sortable:has(#payment_address_company),
.route-checkout-checkout #payment_address_fields .field-sortable:has(#payment_address_address_2) {
  display: none;
}

.route-checkout-checkout .qc .ve-text-danger,
.route-checkout-checkout .qc .ve-help.ve-text-danger {
  color: #b3263f;
  font-weight: 700;
}

/* 相關商品：橫向 rail 原本只寫在手機，桌機退回 Bootstrap .row 網格排 5 列共 1,069px（全頁 21%）。
   改成全斷點適用的 rail，一次露 5 張、可左右滑，商品一個都沒少。 */
.ym-product-related { margin-top: 28px; }
.ym-product-related__rail { display: flex; overflow-x: auto; flex-wrap: nowrap; margin-inline: -6px; padding: 2px 6px 10px; scroll-snap-type: x proximity; overscroll-behavior-inline: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ym-product-related__rail > [class*="col-"] { width: auto; flex: 0 0 calc((100% - 4 * 16px) / 5); float: none; scroll-snap-align: start; }
.ym-product-related__rail > .clearfix { display: none !important; }
.ym-product-related__rail .product-thumb .caption > p:not(.price) { display: none; }
.ym-product-related__rail::-webkit-scrollbar { display: none; width: 0; height: 0; }
@media (max-width: 1199px) { .ym-product-related__rail > [class*="col-"] { flex-basis: calc((100% - 3 * 16px) / 4); } }

@media (max-width: 767px) {
	.ym-product-related__rail > [class*="col-"] { flex: 0 0 min(72vw, 278px); }
  .route-checkout-checkout .ym-header__main {
    min-height: 62px;
  }

  .route-checkout-checkout .ym-logo {
    width: 132px;
  }

  .route-checkout-checkout .ym-header__main::after {
    font-size: 12px;
  }

  .route-checkout-checkout #container {
    padding: 12px 10px 30px;
  }

  .route-checkout-checkout .qc .qc-row {
    margin-right: -5px;
    margin-left: -5px;
  }

  .route-checkout-checkout .qc [class*="qc-col-"] {
    width: 100%;
    padding-right: 5px;
    padding-left: 5px;
  }

  .route-checkout-checkout .qc .ve-card {
    margin-bottom: 12px;
    border-radius: var(--ym-radius-sm);
  }

  .route-checkout-checkout .qc .ve-card__header {
    min-height: 50px;
    padding: 13px 14px;
    font-size: 17px;
  }

  .route-checkout-checkout .qc .ve-card__body {
    padding: 14px;
  }

  .route-checkout-checkout .qc .qc-totals .qc-total {
    margin: 0;
    padding: 8px 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 12px;
    direction: ltr;
  }

  .route-checkout-checkout .qc .qc-totals .qc-total > [class*="ve-col-"] {
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    padding-right: 0 !important;
    padding-left: 0 !important;
    float: none !important;
  }

  .route-checkout-checkout .qc .qc-totals .qc-total > .ve-label {
    margin: 0;
    grid-column: 1;
    grid-row: 1;
    justify-self: stretch;
    text-align: left;
  }

  .route-checkout-checkout .qc .qc-totals .qc-total > .text-right {
    width: auto;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    white-space: nowrap;
  }

  .route-checkout-checkout .qc .qc-totals .qc-total:last-child {
    margin-top: 4px;
    padding-top: 12px;
    padding-bottom: 4px;
  }

  .route-checkout-checkout .qc input,
  .route-checkout-checkout .qc select,
  .route-checkout-checkout .qc textarea,
  .route-checkout-checkout .qc button {
    font-size: 16px;
  }

  .route-checkout-checkout .qc #child3 .ve-card__header::after {
    display: none;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.ym-v2 {
  margin: 0;
  color: var(--ym-ink);
  background: var(--ym-cream);
  font-family: var(--ym-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.ym-v2.ym-menu-open { overflow: hidden; }
.ym-v2 a { color: inherit; text-decoration: none; }
.ym-v2 a:hover, .ym-v2 a:focus { color: var(--ym-coral-strong); text-decoration: none; }
.ym-v2 img { max-width: 100%; height: auto; }
.ym-v2 button, .ym-v2 input, .ym-v2 select, .ym-v2 textarea { font: inherit; }
.ym-v2 :focus-visible { outline: 3px solid #9f3d53; outline-offset: 3px; }
body.ym-v2 [name="ymshop"] { display: none !important; }
.ym-shell { width: min(calc(100% - 40px), var(--ym-shell)); margin-inline: auto; }
/* overflow:clip 會讓 .ym-main 成為捲動容器，站上 10 個 position:sticky 元件全部失效
   （購物車訂單摘要實測 top -83 = 完全沒黏住，捲動時被頁首蓋掉 156px）。
   改成只裁橫向：overflow-x:clip 與 overflow-y:visible 是規範允許的組合，
   y 軸不會被轉成 auto，sticky 才能運作，同時保留原本防橫向溢出的目的。 */
.ym-main { min-height: 48vh; overflow-x: clip; overflow-y: visible; }
.ym-skip-link { position: fixed; top: -80px; left: 18px; z-index: 9999; padding: 10px 16px; background: var(--ym-ink); color: #fff !important; border-radius: var(--ym-radius-xs); }
.ym-skip-link:focus { top: 14px; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

/* Header */
.ym-announcement { position: relative; z-index: 1021; color: #fff; background: var(--ym-coral-dark); font-size: 13px; letter-spacing: .02em; }
.ym-announcement__inner { min-height: 34px; display: flex; align-items: center; gap: 24px; }
.ym-announcement__inner > span:first-child { font-weight: 800; }
.ym-announcement__inner i { margin-right: 6px; }
.ym-announcement__inner a { margin-left: auto; color: #fff; font-weight: 700; }
.ym-announcement__inner a:hover { color: #fff; opacity: .82; }
.ym-header-marker { position: absolute; width: 1px; height: 1px; pointer-events: none; }
.ym-header { position: relative; z-index: 1020; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--ym-line); backdrop-filter: blur(14px); }
.ym-header.is-stuck { position: sticky; top: 0; box-shadow: var(--ym-shadow-sm); }
/* 搜尋欄原本 minmax(280px, 1fr) 會吃掉所有剩餘寬度：版心放寬到 1520 後，1920 螢幕上
   搜尋框被拉成 1028px，「搜尋」按鈕跑到離輸入位置近千像素的右端。改為給上限，
   多出來的寬度讓 grid 用留白吸收，欄位本身維持可讀尺寸。 */
.ym-header__main { min-height: 88px; display: grid; grid-template-columns: 210px minmax(280px, 720px) auto; justify-content: space-between; align-items: center; gap: 34px; }
.ym-logo { display: block; width: 205px; line-height: 0; }
.ym-logo img { display: block; width: 100%; aspect-ratio: 3.075 / 1; object-fit: contain; }
.ym-header__actions { display: flex; align-items: center; gap: 6px; }
.ym-header-action { min-width: 62px; min-height: 58px; padding: 7px 9px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: transparent; color: var(--ym-ink); font-size: 12px; font-weight: 700; border-radius: var(--ym-radius-sm); cursor: pointer; }
.ym-header-action:hover { background: var(--ym-blush); }
.ym-header-action i { color: var(--ym-coral-strong); font-size: 22px; }
.ym-header-cart .btn-group, .ym-header-cart #cart { margin: 0; }
.ym-menu-toggle { display: none; }
.ym-icon-button { width: 44px; height: 44px; border: 0; border-radius: var(--ym-radius-sm); background: var(--ym-blush); color: var(--ym-coral-dark); font-size: 20px; }

/* Search */
/* [YM 2026-08-30] 搜尋列高度改成由內容決定
   原本寫死 height:50px（手機 44px），但裡面的送出鈕是 height:44px + margin:3px，
   連同容器 2px 邊框一共需要 54px。手機量到按鈕上下各溢出 5px、桌機 2px，
   而 overflow:visible 讓它直接露在圓角外面 —— 就是「搜尋欄跑掉」。
   改用 min-height 當下限、height 交給內容，容器就永遠包得住。 */
.ym-search { position: relative; display: flex; align-items: center; height: auto; min-height: 50px; border: 2px solid var(--ym-coral); border-radius: var(--ym-radius-pill); background: #fff; box-shadow: var(--ym-shadow-cta); overflow: visible; }
.ym-search:focus-within { border-color: var(--ym-coral-strong); box-shadow: 0 0 0 4px rgba(237, 134, 148, .16); }
.ym-search__icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--ym-coral-strong); font-size: 17px; }
.ym-search input { min-width: 0; flex: 1; padding: 0 14px 0 49px; border: 0; outline: 0; color: var(--ym-ink); background: transparent; }
.ym-search input::placeholder { color: var(--ym-muted); }
.ym-search button { min-width: 82px; margin: 4px; border: 0; border-radius: var(--ym-radius-pill); color: #fff; background: var(--ym-coral-strong); font-weight: 800; cursor: pointer; transition: background .18s ease, transform .18s ease; }
.ym-search button:hover { background: var(--ym-coral-dark); }
.ym-search-suggest { position: absolute; z-index: 80; top: calc(100% + 10px); left: 0; right: 0; max-height: min(520px, 72vh); overflow-y: auto; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); background: #fff; box-shadow: var(--ym-shadow-lg); }
.ym-search-suggest[hidden] { display: none; }
.ym-search-suggest__item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 82px; padding: 9px 14px; border-bottom: 1px solid #f3e9eb; color: var(--ym-ink); text-decoration: none; }
.ym-search-suggest__item:hover, .ym-search-suggest__item.is-active { background: var(--ym-blush); color: var(--ym-ink); }
.ym-search-suggest__item img { width: 64px; height: 64px; border-radius: var(--ym-radius-sm); object-fit: cover; background: var(--ym-cream); }
.ym-search-suggest__copy { min-width: 0; display: grid; gap: 5px; }
.ym-search-suggest__copy strong { overflow: hidden; color: #403638; font-size: 14px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.ym-search-suggest__copy small { color: var(--ym-muted); font-size: 12px; }
.ym-search-suggest__price { color: var(--ym-coral-dark); font-size: 15px; font-weight: 900; white-space: nowrap; }
.ym-search-suggest__all { display: block; padding: 13px; color: var(--ym-coral-dark); background: #fffafb; font-weight: 900; text-align: center; }
.ym-search-suggest__empty { margin: 0; padding: 24px; color: var(--ym-muted); text-align: center; }
.ym-search-suggest__heading { display: block; padding: 16px 17px 8px; color: #493c3f; font-size: 14px; }
.ym-search-suggest__terms { display: flex; flex-wrap: wrap; gap: 9px; padding: 4px 16px 17px; }
.ym-search-suggest__terms a { padding: 8px 14px; border: 1px solid #efcbd2; border-radius: var(--ym-radius-pill); color: var(--ym-coral-dark); background: #fff8f9; font-size: 13px; font-weight: 800; }
.ym-search-suggest__terms a:hover { border-color: var(--ym-coral-strong); background: var(--ym-blush); }

/* Navigation */
.ym-category-bar { border-top: 1px solid #f5eaec; background: #fff; }
.ym-nav__list { margin: 0; padding: 0; display: flex; align-items: stretch; justify-content: center; list-style: none; }
.ym-nav__item { position: relative; }
.ym-nav__item > a { min-height: 47px; padding: 0 18px; display: flex; align-items: center; color: #4d4548; font-size: 14px; font-weight: 700; white-space: nowrap; }
.ym-nav__item > a:hover { color: var(--ym-coral-strong); background: var(--ym-blush); }
.ym-nav__item--accent > a { color: var(--ym-coral-strong); }
.ym-nav__item--accent i { margin-right: 6px; }
.ym-nav__dropdown { position: absolute; top: calc(100% - 1px); left: 0; width: 360px; padding: 22px; visibility: hidden; opacity: 0; transform: translateY(8px); border: 1px solid var(--ym-line); border-radius: 0 0 var(--ym-radius-md) var(--ym-radius-md); background: #fff; box-shadow: var(--ym-shadow-md); transition: .16s ease; }
.ym-nav__item:nth-last-child(-n+3) .ym-nav__dropdown { right: 0; left: auto; }
.ym-nav__item:hover .ym-nav__dropdown, .ym-nav__item:focus-within .ym-nav__dropdown { visibility: visible; opacity: 1; transform: none; }
.ym-nav__dropdown strong { display: block; margin-bottom: 12px; color: var(--ym-coral-dark); font-size: 17px; }
.ym-nav__dropdown ul { margin: 0 0 13px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 14px; list-style: none; }
.ym-nav__dropdown li a { display: block; padding: 6px 0; color: var(--ym-muted); font-size: 14px; }
.ym-nav__all { display: block; padding-top: 11px; border-top: 1px solid var(--ym-line); color: var(--ym-coral-strong) !important; font-weight: 800; }
.ym-mobile-nav, .ym-nav-backdrop { display: none; }

/* Mini cart */
.ym-cart-dropdown { position: relative; }
.ym-cart-button { min-width: 62px; }
.ym-cart-button__icon { position: relative; display: inline-grid; place-items: center; }
.ym-cart-button__badge { position: absolute; top: -7px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; display: none; place-items: center; border-radius: var(--ym-radius-xs); color: #fff; background: var(--ym-coral-strong); font-size: 11px; font-weight: 900; line-height: 1; }
.ym-cart-button__badge.is-visible { display: grid; }
/* 金額只留在 mini-cart；按鈕文字改為輔助技術可讀 */
.ym-cart-button #cart-total { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; white-space: nowrap; border: 0; clip: rect(0, 0, 0, 0); }
.ym-cart-menu { width: min(390px, calc(100vw - 24px)); margin-top: 9px; padding: 0; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); box-shadow: var(--ym-shadow-md); overflow: hidden; }
.ym-cart-menu__items { max-height: 320px; padding: 8px 16px; overflow-y: auto; }
.ym-mini-product { display: grid; grid-template-columns: 64px 1fr 30px; gap: 11px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ym-line); }
.ym-mini-product img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--ym-radius-sm); }
.ym-mini-product > div > a { display: -webkit-box; overflow: hidden; font-size: 13px; font-weight: 700; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ym-mini-product small, .ym-mini-product span { display: block; color: var(--ym-muted); font-size: 12px; }
.ym-mini-product button { border: 0; background: transparent; color: #a99fa2; }
.ym-cart-menu__totals { padding: 13px 18px; background: var(--ym-cream); }
.ym-cart-menu__totals > div { display: flex; justify-content: space-between; font-size: 13px; }
.ym-cart-menu__totals > div:last-child { margin-top: 5px; color: var(--ym-coral-dark); font-size: 16px; }
.ym-cart-menu__actions { padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ym-cart-empty { min-height: 220px; padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; }
.ym-cart-empty i { color: var(--ym-coral); font-size: 35px; }
.ym-cart-empty a { color: var(--ym-coral-strong); font-weight: 800; }

/* Buttons and native OpenCart controls */
.ym-v2 .btn, .ym-btn-primary, .ym-btn-secondary { min-height: 44px; padding: 10px 18px; border-radius: var(--ym-radius-sm); border-width: 1px; font-weight: 800; box-shadow: none; transition: transform .16s ease, background .16s ease, box-shadow .16s ease; }
.ym-v2 .btn:hover { transform: translateY(-1px); }
.ym-v2 .btn-primary, .ym-btn-primary { color: #fff !important; border-color: var(--ym-coral-strong); background: var(--ym-coral-strong); }
.ym-v2 .btn-primary:hover, .ym-btn-primary:hover { border-color: var(--ym-coral-dark); background: var(--ym-coral-dark); box-shadow: var(--ym-shadow-cta); }
.ym-v2 .btn-default, .ym-btn-secondary { color: var(--ym-coral-dark); border-color: #e8c8cf; background: #fff; }
.ym-v2 .btn-danger { border-color: #b73e4b; background: #b73e4b; }
.ym-v2 .form-control { min-height: 44px; border-color: #928589; border-radius: var(--ym-radius-sm); box-shadow: none; }
.ym-v2 .form-control:focus { border-color: var(--ym-coral); box-shadow: 0 0 0 3px rgba(237, 134, 148, .13); }
.ym-v2 h1, .ym-v2 h2, .ym-v2 h3, .ym-v2 h4, .ym-v2 h5 { color: var(--ym-ink); font-weight: 800; letter-spacing: -.02em; }
.ym-v2 h1 { font-size: clamp(28px, 4vw, 44px); }
.ym-v2 .breadcrumb { margin: 18px 0; padding: 0; background: transparent; font-size: 13px; }
.ym-v2 .breadcrumb > li + li:before { color: #b8afb1; content: "›"; }
.ym-v2 .breadcrumb a { color: var(--ym-muted); }
.ym-v2 .alert { border: 0; border-radius: var(--ym-radius-sm); }
.ym-v2 .panel { border-color: var(--ym-line); border-radius: var(--ym-radius-md); box-shadow: none; overflow: hidden; }
.ym-v2 .panel-default > .panel-heading { border-color: var(--ym-line); background: var(--ym-cream); }

/* Page foundations and Journal/default module normalization */
.ym-v2 #content { min-height: 340px; }
.ym-v2 .container { width: min(calc(100% - 40px), var(--ym-shell)); }
/* 版心流體化：固定 1140px 在 1920 螢幕只用 59.4%、左右各空 390px（老闆：留白太多）。
   收的是元件本身的肥度，不是整頁寬度——圖庫仍有上限，多出來的寬給資訊欄與網格。 */
.ym-v2 .container.ym-product-native { width: min(calc(100% - 40px), 1520px); max-width: none; margin-inline: auto; }
@media (min-width: 992px) {
  .ym-v2 #product-product .ym-product-gallery { max-width: 660px; }
  .ym-v2 #product-product .ym-product-summary { flex: 1 1 auto; min-width: 420px; }
}
.ym-home__content { padding-block: 22px 48px; }
.ym-home > .container, .ym-home > .journal-row, .ym-home > .module { width: min(calc(100% - 40px), var(--ym-shell)); margin-inline: auto; }
.ym-v2 .module-title, .ym-v2 #content > h2, .ym-v2 #content > h3 { margin-top: 36px; margin-bottom: 18px; }
.ym-v2 .module-title:after { display: none; }

.ym-home-hero { margin-top: 22px; overflow: hidden; border-radius: var(--ym-radius-lg); background: var(--ym-blush); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); border: 1px solid rgba(245, 234, 236, 0.9); transition: transform .25s ease, box-shadow .25s ease; }
.ym-home-hero:hover { box-shadow: 0 8px 26px rgba(0, 0, 0, 0.08); }
.ym-home-hero a, .ym-home-hero img { display: block; width: 100%; }
.ym-home-hero img { aspect-ratio: 4 / 1; object-fit: cover; }
/* ==========================================================================
   .ym-trust-strip — 全站唯一一套信任列樣式
   首頁 .ym-value-strip（購物條件）與頁尾 .ym-footer__trust（服務保障）共用這一份。
   統一前實測：首頁那條 padding 15/20、圖示裸 21px、strong 13px、small 11px、
   卡片圓角 16px、無陰影、格子之間用 1px 直線分隔；
   頁尾那條 padding 20/24、圖示 42px 圓章、strong 14px、圓角 24px、有陰影。
   同一件事兩種語言，桌機高度 148px vs 72px。收斂成同一組 token：
   圖示 40px 圓章、strong 14px/800、small 12px/muted、圓角 md、陰影 sm、內距 16/20。
   ========================================================================== */
.ym-trust-strip {
  --ym-trust-icon: 40px;
  --ym-trust-pad: 16px 20px;
  padding: var(--ym-trust-pad);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  border: 1px solid var(--ym-line);
  border-radius: var(--ym-radius-md);
  background: #fff;
  box-shadow: 0 2px 10px rgba(40, 24, 30, 0.03);
}
.ym-trust-strip > div,
.ym-trust-strip > a {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
}
.ym-trust-strip > a:hover,
.ym-trust-strip > a:focus-visible { color: var(--ym-coral-dark); text-decoration: none; }
.ym-trust-strip i {
  width: var(--ym-trust-icon);
  height: var(--ym-trust-icon);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ym-coral-strong);
  background: linear-gradient(135deg, #fff0f3 0%, #ffe9ee 100%);
  font-size: calc(var(--ym-trust-icon) * .45);
  box-shadow: 0 2px 6px rgba(229, 116, 135, 0.12);
}
/* span 用 flex column 置中：block + inline strong 會被 line-height strut 推到偏上（見下方 P2 註記）。 */
.ym-trust-strip > * > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.35;
}
.ym-trust-strip strong { display: block; font-size: 14px; font-weight: 800; line-height: 1.35; }
.ym-trust-strip small { display: block; margin: 0; color: var(--ym-muted); font-size: 12px; line-height: 1.35; }

.ym-value-strip { margin-top: 18px; }

/* 手機：兩欄、圖示縮一階，兩條信任列用同一組密度變數，不再各自寫 padding/字級。
   統一前首頁那條在手機是 strong 12px / small 9px（9px 已經小到讀不了），
   頁尾那條則是直接把 small 整個 display:none —— 同一種資訊兩種處理。 */
@media (max-width: 767px) {
  .ym-trust-strip {
    --ym-trust-icon: 32px;
    --ym-trust-pad: 12px 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 8px;
  }
  .ym-trust-strip > div, .ym-trust-strip > a { gap: 9px; }
  .ym-trust-strip strong { font-size: 13px; }
  .ym-trust-strip small { font-size: 11px; }
}
.ym-campaign-strip { margin-top: 12px; padding: 12px 18px; display: flex; align-items: center; gap: 10px; overflow-x: auto; scrollbar-width: none; border-radius: var(--ym-radius-md); color: #5f4148; background: linear-gradient(100deg, #fff0f3, #fff9f3); }
.ym-campaign-strip::-webkit-scrollbar { display: none; }
.ym-campaign-strip strong, .ym-campaign-strip a { flex: 0 0 auto; }
.ym-campaign-strip strong { margin-right: 4px; color: var(--ym-coral-dark); font-size: 13px; }
.ym-campaign-strip strong i { color: var(--ym-coral-strong); }
.ym-campaign-strip a { padding: 7px 11px; border: 1px solid rgba(229,116,135,.22); border-radius: var(--ym-radius-pill); color: #704e56; background: rgba(255,255,255,.82); font-size: 12px; font-weight: 800; }
.ym-campaign-strip a:hover, .ym-campaign-strip a:focus { border-color: var(--ym-coral-strong); color: var(--ym-coral-dark); background: #fff; }
.ym-campaign-showcase { margin-top: 28px; }
.ym-campaign-showcase__heading { margin-bottom: 12px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.ym-campaign-showcase__heading span { display: block; color: var(--ym-coral-strong); font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.ym-campaign-showcase__heading h2 { margin: 2px 0 0; font-size: 24px; }
.ym-campaign-showcase__heading > a { min-height: 44px; padding: 10px 2px; display: inline-flex; align-items: center; gap: 7px; color: var(--ym-coral-dark); font-weight: 800; }
.ym-campaign-showcase__rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ym-campaign-card { position: relative; min-width: 0; aspect-ratio: 4 / 1; display: block; overflow: hidden; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); color: #fff; background: #72505a; box-shadow: 0 2px 8px rgba(40,24,30,.06); transition: transform .25s ease, box-shadow .25s ease; }
.ym-campaign-card picture, .ym-campaign-card img { width: 100%; height: 100%; display: block; }
.ym-campaign-card img { object-fit: cover; transition: transform .25s ease; }
.ym-campaign-card > span { position: absolute; inset: auto 0 0; padding: 38px 14px 11px; display: flex; align-items: end; justify-content: space-between; gap: 12px; background: linear-gradient(transparent, rgba(40,24,30,.55) 45%, rgba(40,24,30,.93)); }
.ym-campaign-card strong { min-width: 0; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.ym-campaign-card small { flex: 0 0 auto; color: #fff; font-size: 11px; font-weight: 800; }
/* 覆蓋 .ym-v2 a{color:inherit}(0,1,1)：原本 .ym-campaign-card{color:#fff}(0,1,0) 輸掉，標題變深色疊在深色圖上等於看不見 */
.ym-v2 a.ym-campaign-card, .ym-v2 a.ym-campaign-card:hover, .ym-v2 a.ym-campaign-card:focus { color: #fff; }
.ym-campaign-card:hover, .ym-campaign-card:focus { color: #fff; transform: translateY(-3px); box-shadow: 0 8px 24px rgba(40,24,30,.14); }
.ym-campaign-card:hover img { transform: scale(1.025); }
.ym-campaign-card--text { min-height: 96px; aspect-ratio: auto; background: linear-gradient(135deg, var(--ym-coral-dark), #73515b); }
.ym-home-section { padding-block: 64px 22px; }
.ym-home-section--tint { margin-top: 38px; padding-block: 58px; background: linear-gradient(135deg, #fff4f6 0%, #fffaf7 62%, #f8eeeb 100%); }
.ym-home-section--compact { padding-top: 45px; }
.ym-section-heading { margin-bottom: 24px; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.ym-section-heading span, .ym-procurement > div > span { display: block; margin-bottom: 3px; color: var(--ym-coral-strong); font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.ym-section-heading h2 { margin: 0; font-size: clamp(25px, 3vw, 35px); }
.ym-section-heading p, .ym-section-heading > a { margin: 0 0 4px; color: var(--ym-muted); font-size: 13px; }
.ym-section-heading > a { min-height: 44px; display: inline-flex; align-items: center; color: var(--ym-coral-strong); font-weight: 800; }
.ym-category-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px; }
.ym-category-card { min-width: 0; padding: 10px 8px 14px; display: flex; flex-direction: column; align-items: center; border: 1px solid var(--ym-line); border-radius: 20px; background: #fff; text-align: center; transition: transform .22s cubic-bezier(0.2, 0, 0.2, 1), box-shadow .22s cubic-bezier(0.2, 0, 0.2, 1), border-color .22s ease; box-shadow: 0 1px 4px rgba(40, 24, 30, 0.04); }
.ym-category-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(197, 72, 98, 0.12); border-color: rgba(229, 116, 135, 0.45); }
.ym-category-card img { width: 100%; max-width: 96px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: #fdf6f7; border: 2px solid #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07); transition: transform .25s ease; }
.ym-category-card:hover img { transform: scale(1.06); }
.ym-category-card strong { margin-top: 10px; overflow: hidden; font-size: 13px; font-weight: 700; color: var(--ym-ink); text-overflow: ellipsis; white-space: nowrap; }
.ym-category-card span { color: var(--ym-coral-strong); font-size: 10px; font-weight: 800; margin-top: 3px; }
.ym-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ym-product-grid .product-layout { width: auto; margin: 0; padding: 0; float: none; }
.ym-product-card .image { position: relative; }
.ym-product-card .ym-product-badge { position: absolute; top: 11px; left: 11px; padding: 5px 9px; border-radius: var(--ym-radius-pill); color: #fff; background: var(--ym-coral-strong); font-size: 10px; font-weight: 900; }
.ym-product-card .ym-product-wish { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--ym-coral-dark); background: rgba(255,255,255,.93); box-shadow: var(--ym-shadow-xs); }
.ym-product-card .caption h3 { min-height: 46px; margin: 0 0 9px; font-size: 15px; line-height: 1.52; }
/* max-height 必須剛好等於 2 行(2 x 1.52em)：原本 min-height:44px > 手機 2 行的 39.5px，
   line-clamp 只補了刪節號沒真的砍掉第 3 行 → 標題底下露出被切一半的第三行文字 */
.ym-product-card .caption h3 a { max-height: 3.04em; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ym-product-card .rating { min-height: 18px; font-size: 12px; }
.ym-product-card .button-group button.is-loading { pointer-events: none; opacity: .66; }
.ym-procurement { margin-top: 64px; padding: 48px 56px; display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 60px; border-radius: var(--ym-radius-lg); color: #fff; background: radial-gradient(circle at 88% 20%, rgba(245, 184, 194, 0.2), transparent 40%), linear-gradient(135deg, #443138 0%, #35252b 100%); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 12px 36px rgba(40, 24, 30, 0.18); }
.ym-procurement h2 { max-width: 620px; margin: 4px 0 12px; color: #fff; font-size: clamp(25px, 3vw, 38px); line-height: 1.3; }
.ym-procurement p { max-width: 620px; margin: 0 0 24px; color: #e4d7da; font-size: 14px; line-height: 1.6; }
.ym-procurement .btn.ym-btn-primary { padding: 13px 28px; border-radius: var(--ym-radius-pill); font-size: 15px; font-weight: 800; box-shadow: 0 4px 14px rgba(229, 116, 135, 0.38); transition: transform .2s ease, box-shadow .2s ease; }
.ym-procurement .btn.ym-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(229, 116, 135, 0.5); }
.ym-procurement__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ym-procurement__facts > div { min-height: 112px; padding: 16px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--ym-radius-md); background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-align: center; transition: transform .2s ease, background .2s ease; }
.ym-procurement__facts > div:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.14); }
.ym-procurement__facts strong { color: #fff; font-size: 19px; }
.ym-procurement__facts span { color: #d8c8cc; font-size: 11px; }
/* 「BUSINESS & EVENT」小標原本沿用 .ym-section-heading span 的 --ym-coral-strong(#c54862)，
   但 .ym-procurement 是深色區塊（#4b363d）→ 實測只有 2.36:1，11px 幾乎讀不到。
   淺色區塊的同款小標維持 coral-strong 不動，只有深底這個要換成淺一階（6.6:1）。 */
.ym-procurement > div > span { color: #f5b8c2; }

/* Category and search */
.ym-catalog-page { padding-bottom: 40px; }
.ym-page-heading { min-height: 180px; padding: 28px 36px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-radius: var(--ym-radius-lg); background: linear-gradient(135deg, #fcecf0, #fff8f5 70%); overflow: hidden; }
.ym-page-heading > div { max-width: 780px; }
.ym-page-heading span { color: var(--ym-coral-strong); font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.ym-page-heading h1 { margin: 2px 0 8px; }
.ym-page-heading img { width: 150px; height: 150px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); background: #fff; }
.ym-page-heading--simple { min-height: 122px; }
.ym-page-lead { margin: 4px 0 0; color: var(--ym-muted); font-size: 14px; }
.ym-page-description { max-height: 72px; overflow: hidden; color: var(--ym-muted); font-size: 13px; }
.ym-subcategories { margin: 18px 0 8px; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.ym-subcategories::-webkit-scrollbar { display: none; }
.ym-subcategories a { padding: 9px 16px; flex: 0 0 auto; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-pill); background: #fff; color: #5f5559; font-size: 13px; font-weight: 700; transition: all .2s ease; }
.ym-subcategories a:hover { border-color: var(--ym-coral-strong); color: var(--ym-coral-dark); background: #fff8f9; text-decoration: none; transform: translateY(-1px); }
.ym-catalog-layout { margin-top: 24px; display: grid; grid-template-columns: 238px minmax(0, 1fr); gap: 28px; align-items: start; }
.ym-catalog-layout--full { grid-template-columns: minmax(0, 1fr); }
.ym-catalog-results { min-width: 0; }
.ym-catalog-sidebar { padding: 18px; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); background: #fff; }
.ym-v2 .ym-catalog-sidebar #column-left { width: 100%; margin: 0; padding: 0; float: none; }
.ym-catalog-sidebar__head { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.ym-catalog-sidebar__head button { display: none; }
.ym-filters-open { overflow: hidden; }
.ym-catalog-sidebar .list-group-item { padding: 9px 3px; border: 0; border-bottom: 1px solid #f2e8ea; }
.ym-catalog-sidebar .list-group-item:last-child { border-bottom: 0; }
.ym-catalog-quick-filters { min-height: 56px; margin: 0 0 12px; padding: 7px 9px; display: flex; align-items: center; gap: 9px; border: 1px solid #efdfe2; border-radius: var(--ym-radius-md); background: linear-gradient(135deg, #fffafa, #fff 72%); }
.ym-catalog-quick-filters__title { margin: 0 auto 0 3px; color: var(--ym-coral-dark); font-size: 13px; white-space: nowrap; }
.ym-catalog-quick-filters__title i { margin-right: 5px; color: var(--ym-coral-strong); }
.ym-catalog-quick-filters__price { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--ym-muted); font-size: 12px; font-weight: 700; }
.ym-catalog-quick-filters select { min-width: 142px; min-height: 42px; padding: 7px 30px 7px 10px; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-sm); color: var(--ym-ink); background: #fff; }
.ym-catalog-stock-toggle { min-height: 42px; margin: 0; padding: 0 10px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-sm); color: #5f5559; background: #fff; font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.ym-catalog-stock-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ym-catalog-stock-toggle span { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid #d9c7cb; border-radius: var(--ym-radius-xs); color: transparent; background: #fff; }
.ym-catalog-stock-toggle input:checked + span { border-color: var(--ym-coral-strong); color: #fff; background: var(--ym-coral-strong); }
.ym-catalog-stock-toggle input:focus-visible + span { outline: 3px solid rgba(237, 134, 148, .22); outline-offset: 2px; }
.ym-catalog-quick-filters__apply, .ym-catalog-quick-filters__clear { min-height: 42px; padding: 0 14px; display: inline-grid; place-items: center; border-radius: var(--ym-radius-sm); font-size: 12px; font-weight: 900; }
.ym-catalog-quick-filters__apply { border: 0; color: #fff; background: var(--ym-coral-strong); }
.ym-catalog-quick-filters__clear { border: 1px solid var(--ym-line); color: var(--ym-coral-dark); background: #fff; }
.ym-catalog-toolbar { min-height: 58px; margin-bottom: 19px; padding: 8px 11px; display: flex; align-items: center; justify-content: flex-end; gap: 11px; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); background: #fff; }
.ym-catalog-toolbar label { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--ym-muted); font-size: 12px; font-weight: 500; }
.ym-catalog-toolbar select { width: auto; min-height: 39px; padding-block: 6px; }
.ym-catalog-results-count { margin-right: auto; color: var(--ym-coral-dark); font-size: 12px; font-weight: 800; white-space: nowrap; }
.ym-compare-link { color: var(--ym-muted) !important; font-size: 12px; white-space: nowrap; }
.ym-filter-button { display: none; min-height: 40px; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-sm); background: #fff; color: var(--ym-coral-dark); font-weight: 800; }
.ym-product-grid--catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 無側欄的目錄頁（搜尋／促銷／品牌）桌機改 4 卡/列，卡寬與活動頁一致 */
@media (min-width: 992px) {
  #product-search .ym-product-grid--catalog,
  #product-special .ym-product-grid--catalog,
  #product-manufacturer .ym-product-grid--catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ym-pagination { margin-top: 30px; display: flex; align-items: center; justify-content: space-between; }
.ym-pagination p { margin: 0; color: var(--ym-muted); font-size: 12px; }
.ym-v2 .pagination > li > a, .ym-v2 .pagination > li > span { margin: 0 3px; border: 0; border-radius: var(--ym-radius-xs); color: var(--ym-coral-dark); }
.ym-v2 .pagination > .active > span { color: #fff; background: var(--ym-coral-strong); }
.ym-empty-state { min-height: 380px; padding: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed #e4cbd0; border-radius: var(--ym-radius-lg); background: #fff; text-align: center; }
.ym-empty-state > i { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%; color: var(--ym-coral-strong); background: var(--ym-blush); font-size: 26px; }
.ym-empty-state h2 { margin: 17px 0 4px; }
.ym-empty-state p { margin-bottom: 20px; color: var(--ym-muted); }
.ym-brand-index { margin: 0 0 22px; padding: 16px 18px; display: flex; align-items: center; gap: 16px; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); background: #fff; box-shadow: var(--ym-shadow-sm); }
.ym-brand-index > strong { flex: 0 0 auto; color: var(--ym-coral-dark); }
.ym-brand-index > div { min-width: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.ym-brand-index > div::-webkit-scrollbar { display: none; }
.ym-brand-index a { min-width: 44px; min-height: 44px; padding: 0 13px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #efd8dd; border-radius: var(--ym-radius-sm); color: var(--ym-coral-dark); background: var(--ym-blush); font-weight: 900; }
.ym-brand-groups { display: grid; gap: 18px; }
.ym-brand-group { scroll-margin-top: 150px; padding: 22px; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); background: #fff; box-shadow: var(--ym-shadow-sm); }
.ym-brand-group h2 { margin: 0 0 14px; color: var(--ym-coral-dark); font-size: 22px; }
.ym-brand-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ym-brand-links a { min-height: 50px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #f0e2e5; border-radius: var(--ym-radius-sm); color: var(--ym-ink); background: #fffaf9; font-weight: 700; }
.ym-brand-links a:hover, .ym-brand-links a:focus-visible { border-color: var(--ym-coral); color: var(--ym-coral-dark); background: var(--ym-blush); }
.ym-compare-hint { margin: 0 0 10px; color: var(--ym-muted); font-size: 13px; }
.ym-compare-scroll { max-width: 100%; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); background: #fff; box-shadow: var(--ym-shadow-sm); overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-color: var(--ym-coral) #f8edef; }
.ym-compare-scroll:focus-visible { outline: 3px solid rgba(210, 91, 117, .25); outline-offset: 3px; }
.ym-compare-table { width: 100%; min-width: 760px; margin: 0; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.ym-compare-table th, .ym-compare-table td { width: 250px; padding: 15px 17px; vertical-align: top; border-right: 1px solid #f1e5e8; border-bottom: 1px solid #f1e5e8; color: var(--ym-ink); }
.ym-compare-table tr > :first-child { position: sticky; left: 0; z-index: 2; width: 160px; color: var(--ym-coral-dark); background: #fff8f7; box-shadow: 1px 0 #f1e5e8; }
.ym-compare-table thead th { position: sticky; top: 0; z-index: 3; color: var(--ym-coral-dark); background: #fff4f5; }
.ym-compare-table thead th:first-child { z-index: 4; }
.ym-compare-table thead a { color: var(--ym-ink); font-size: 15px; line-height: 1.45; }
.ym-compare-table td img { width: 160px; max-width: 100%; height: 160px; object-fit: contain; border-radius: var(--ym-radius-sm); background: #fff; }
.ym-compare-price span { display: block; color: var(--ym-coral-dark); font-size: 20px; font-weight: 900; }
.ym-compare-price del { color: var(--ym-muted); font-size: 12px; }
.ym-compare-summary { color: var(--ym-muted) !important; font-size: 13px; line-height: 1.7; }
.ym-compare-attributes tr:first-child th { position: static; color: #fff; background: var(--ym-coral-dark); }
.ym-compare-table tfoot td { padding-block: 17px; }
.ym-compare-table tfoot .btn { width: 100%; margin: 4px 0; }
.ym-success-page .row { margin-inline: -15px; }
.ym-success-card { max-width: 720px; margin: 24px auto 40px; padding: 48px 42px; border: 1px solid #f0dce1; border-radius: var(--ym-radius-lg); background: radial-gradient(circle at 88% 12%, rgba(231,127,145,.16), transparent 31%), #fff; box-shadow: var(--ym-shadow-md); text-align: center; }
.ym-success-card__icon { width: 74px; height: 74px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--ym-coral-strong); box-shadow: var(--ym-shadow-cta); font-size: 28px; }
.ym-success-card h1 { margin: 0 0 14px; font-size: clamp(28px, 4vw, 39px); }
.ym-success-card__reference { width: fit-content; margin: 0 auto 18px; padding: 9px 14px; border: 1px solid #efd6dc; border-radius: var(--ym-radius-pill); color: var(--ym-ink); background: var(--ym-blush); font-weight: 700; }
.ym-success-card__reference strong { margin-left: 6px; color: var(--ym-coral-dark); font-size: 18px; letter-spacing: .04em; }
.ym-success-card__message { margin-bottom: 26px; color: var(--ym-muted); line-height: 1.8; }
.ym-success-card__message p:last-child { margin-bottom: 0; }
.ym-success-card .btn { min-width: 190px; }
.ym-payment-result { max-width: 760px; margin: 24px auto 42px; padding: 44px 40px; border: 1px solid #d8eadf; border-radius: var(--ym-radius-lg); background: radial-gradient(circle at 88% 12%, rgba(80, 170, 118, .13), transparent 31%), #fff; box-shadow: var(--ym-shadow-md); text-align: center; }
.ym-payment-result--error { border-color: #f0d3d9; background: radial-gradient(circle at 88% 12%, rgba(210, 74, 100, .12), transparent 31%), #fff; }
.ym-payment-result__icon { width: 72px; height: 72px; margin: 0 auto 19px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #3f9a68; box-shadow: 0 12px 28px rgba(47, 132, 85, .22); font-size: 27px; }
.ym-payment-result--error .ym-payment-result__icon { background: #c84c63; box-shadow: var(--ym-shadow-cta); }
.ym-payment-result h1 { margin: 0 0 18px; font-size: clamp(28px, 4vw, 39px); }
.ym-payment-result__message, .ym-payment-result__store { margin: 12px 0; padding: 16px 18px; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-sm); color: #554c4f; background: #fffaf9; line-height: 1.75; overflow-wrap: anywhere; text-align: left; }
.ym-payment-result__message > :last-child, .ym-payment-result__store > :last-child { margin-bottom: 0; }
.ym-payment-result__message img, .ym-payment-result__store img, .ym-payment-result__message table, .ym-payment-result__store table { max-width: 100%; }
.ym-payment-result__actions { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ym-payment-result__actions .btn { min-width: 180px; min-height: 48px; }
.ym-payment-confirm { margin-top: 14px; padding: 20px; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); background: #fff; }
.ym-payment-confirm--compact { padding-top: 17px; }
.ym-payment-confirm h2 { margin: 0 0 10px; font-size: 20px; }
.ym-payment-confirm__lead { margin: 0 0 14px; color: var(--ym-muted); line-height: 1.65; }
.ym-payment-confirm__notice { padding: 15px 16px; border: 1px solid #f0dde1; border-radius: var(--ym-radius-sm); color: #574c50; background: #fff8f7; line-height: 1.7; }
.ym-payment-confirm__notice > :last-child { margin-bottom: 0; }
.ym-payment-confirm__actions { margin-top: 16px; display: flex; justify-content: flex-end; }
.ym-payment-confirm__actions .btn { min-width: 180px; min-height: 48px; }
.ym-native-checkout { padding-bottom: 48px; }
.ym-native-checkout > .row > #content { min-width: 0; }
.ym-native-checkout > .row > #content > h1 { margin: 8px 0 22px; font-size: clamp(28px, 4vw, 40px); }
.ym-native-checkout__steps { display: grid; gap: 12px; }
.ym-native-checkout__section { margin: 0 !important; overflow: hidden; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); background: #fff; box-shadow: var(--ym-shadow-sm); }
.ym-native-checkout__section-heading { padding: 0; border: 0; background: #fff7f8 !important; }
.ym-native-checkout__section-heading .panel-title, .ym-native-checkout__section-heading .panel-title > a { min-height: 52px; margin: 0; padding: 13px 16px; display: flex; align-items: center; color: var(--ym-coral-dark); font-size: 16px; font-weight: 900; }
.ym-native-checkout__section-heading .panel-title > a { width: 100%; justify-content: space-between; }
.ym-native-checkout__section-body > .panel-body { padding: 22px; border-top: 1px solid var(--ym-line) !important; }
.ym-native-checkout__block { min-width: 0; }
.ym-native-checkout__block .form-control { min-height: 44px; border-color: #dfd5d8; border-radius: var(--ym-radius-xs); }
.ym-native-checkout__block textarea.form-control { min-height: 104px; }
.ym-native-checkout__block .input-group-btn .btn, .ym-native-checkout__block .btn, .ym-native-checkout__block input[type="button"] { min-width: 44px; min-height: 44px; }
.ym-native-checkout__block .radio label, .ym-native-checkout__block .checkbox label { min-height: 44px; padding-top: 10px; padding-bottom: 9px; display: inline-flex; align-items: flex-start; gap: 7px; }
.ym-native-checkout__block .buttons { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ym-line); }
.ym-native-checkout__block--confirm { border: 1px solid var(--ym-line); border-radius: var(--ym-radius-sm); }
.ym-native-checkout__block--confirm .table { margin-bottom: 0; }
.ym-cart-tool { border-color: var(--ym-line); border-radius: var(--ym-radius-md); overflow: hidden; box-shadow: none; }
.ym-cart-tool .panel-heading { padding: 0; border: 0; background: #fff; }
.ym-cart-tool .panel-title > a { min-height: 48px; padding: 11px 15px; display: flex; align-items: center; justify-content: space-between; color: var(--ym-coral-dark); font-weight: 800; }
.ym-cart-tool .panel-body { padding: 16px; border-top: 1px solid var(--ym-line) !important; background: #fffaf9; }
.ym-cart-tool .input-group { width: 100%; }
.ym-cart-tool .input-group .form-control, .ym-cart-tool .input-group .btn { min-height: 44px; }
.ym-cart-tool .input-group .btn, .ym-cart-tool .input-group input[type="button"] { min-width: 44px; }
.ym-side-nav { width: 100%; min-width: 0; max-width: 100%; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); background: #fff; overflow: hidden; box-shadow: var(--ym-shadow-sm); }
.ym-side-nav .list-group-item { min-width: 0; min-height: 46px; padding: 11px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-color: #f2e6e8; color: #554b4e; }
.ym-side-nav .list-group-item span { min-width: 0; overflow-wrap: anywhere; }
.ym-side-nav .list-group-item.active { border-color: var(--ym-coral-strong); color: #fff; background: var(--ym-coral-strong); }
/* [YM 2026-08-30] 側選單三態 + 圓角對齊

   圓角：.ym-side-nav 有 border-radius:16px + overflow:hidden，本來就負責整體外框，
   但 Bootstrap 3 的 .list-group-item:first-child/:last-child 帶著 4px 圓角活了下來
   （ym-v2.css 只覆寫了 padding/color，沒覆寫 border-radius）。16px 弧線與 4px 弧線
   之間會露出白色直角。歸零交給父層裁切即可。

   三態：原本只有 .active，沒有 hover 也沒有 focus-visible，鍵盤使用者無法定位。 */
.ym-side-nav .list-group-item:first-child,
.ym-side-nav .list-group-item:last-child { border-radius: 0; }
.ym-side-nav .list-group-item:hover,
.ym-side-nav .list-group-item:focus { background: var(--ym-blush); color: var(--ym-coral-dark); }
.ym-side-nav .list-group-item:focus-visible { outline: 2px solid var(--ym-coral-strong); outline-offset: -2px; }
.ym-side-nav .list-group-item.active:hover,
.ym-side-nav .list-group-item.active:focus { color: #fff; background: var(--ym-coral-dark); border-color: var(--ym-coral-dark); }
.ym-category-nav__child { padding-left: 28px !important; font-size: 13px; }
.ym-captcha__entry { display: flex; align-items: stretch; gap: 10px; }
.ym-captcha__entry input { min-width: 0; }
.ym-captcha__entry img { width: auto; min-width: 112px; height: 44px; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-sm); object-fit: contain; background: #fff; }
.ym-free-shipping-teaser { min-height: 44px; padding: 10px 13px; display: flex; align-items: center; gap: 9px; border: 1px solid #f0d9de; border-radius: var(--ym-radius-sm); color: var(--ym-coral-dark); background: #fff6f7; }
.ym-free-shipping-teaser--success { border-color: #b9dfca; color: #256f47; background: #f2fbf6; }
.ym-cvs-pickup { margin: 14px 0; padding: 15px; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); background: #fffaf9; }
.ym-cvs-pickup__status { min-height: 48px; margin-bottom: 10px; padding: 10px 12px; display: flex; align-items: center; gap: 11px; border-radius: var(--ym-radius-sm); color: #79555e; background: var(--ym-blush); }
.ym-cvs-pickup__status--selected { color: #256f47; background: #eef9f3; }
.ym-cvs-pickup__status p { margin: 2px 0 0; }
.ym-cvs-pickup__status small { color: inherit; }
.ym-cvs-pickup .btn { min-height: 46px; }
.ym-promotions { min-width: 0; }
.ym-promotions--module { margin-block: 24px; }
.ym-promotions__header { margin-bottom: 13px; }
.ym-promotions__title { margin: 0; font-size: 22px; }
.ym-promotions__banners { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ym-promotions__banner { min-width: 0; overflow: hidden; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); background: #fff; box-shadow: var(--ym-shadow-sm); }
.ym-promotions__banner a, .ym-promotions__banner img { width: 100%; display: block; }
.ym-promotions__banner img { aspect-ratio: 4 / 1; object-fit: cover; }
.ym-promotions--page, .ym-promotions--detail { padding-bottom: 48px; }
.ym-promotions__content { min-width: 0; }
.ym-promotions__hero { margin-bottom: 22px; }
.ym-promotions__hero h1 { margin: 6px 0 18px; font-size: clamp(28px, 4vw, 42px); }
.ym-promotions__hero-image { width: 100%; overflow: hidden; border-radius: var(--ym-radius-md); }
.ym-promotions__message { min-width: 0; color: #564d50; line-height: 1.75; overflow-wrap: anywhere; }
.ym-promotions__message img, .ym-promotions__message iframe { max-width: 100%; }
.ym-promotions__carousel { min-width: 0; margin-block: 18px; padding: 3px 2px 12px; border: 0; box-shadow: none; }
.ym-promotions__slide { height: auto; }
.ym-promotions__product, .ym-promotions__product .ym-product-card { height: 100%; }
.ym-promotions__tax { margin: 7px 12px 0; color: var(--ym-muted); font-size: 11px; }
.ym-promotions__taxonomy { margin-block: 28px; }
.ym-promotions__taxonomy-header { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ym-promotions__taxonomy-header h3 { margin: 0; }
.ym-promotions__taxonomy-header a { min-height: 44px; padding: 10px 2px; display: inline-flex; align-items: center; color: var(--ym-coral-dark); font-weight: 800; }
.ym-promotions__pager .swiper-button-next, .ym-promotions__pager .swiper-button-prev { width: 44px; min-width: 44px; height: 44px; min-height: 44px; border: 1px solid var(--ym-line); border-radius: 50%; background-color: #fff; box-shadow: var(--ym-shadow-sm); }
.ym-search-refine { margin: 18px 0 4px; padding: 7px; display: grid; grid-template-columns: 32px minmax(180px, 1fr) 190px 92px; align-items: center; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); background: #fff; box-shadow: var(--ym-shadow-sm); }
.ym-search-refine > i { color: var(--ym-coral-strong); text-align: center; }
.ym-search-refine input, .ym-search-refine select { height: 44px; padding: 0 13px; border: 0; outline: 0; background: transparent; }
.ym-search-refine select { border-left: 1px solid var(--ym-line); }
.ym-search-refine button { height: 44px; border: 0; border-radius: var(--ym-radius-sm); color: #fff; background: var(--ym-coral-strong); font-weight: 900; }

/* Product detail */
.ym-v2 #product-product .ym-product-main { display: flex; align-items: flex-start; }
.ym-v2 #product-product .ym-product-main > [class*="col-sm-"]:last-child { position: relative; padding: 26px 28px; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-lg); background: #fff; box-shadow: var(--ym-shadow-sm); }
@media (min-width: 768px) {
  .ym-v2 #product-product .ym-product-gallery { width: 55%; }
  .ym-v2 #product-product .ym-product-summary { width: 45%; padding: 20px 22px; }
  .ym-v2 #product-product .thumbnails > li:first-child .thumbnail { height: clamp(380px, 38vw, 500px); aspect-ratio: auto; }
}
@media (min-width: 992px) {
  .ym-v2 #product-product .ym-product-main { margin-inline: 0; gap: 18px; }
  .ym-v2 #product-product .ym-product-gallery,
  .ym-v2 #product-product .ym-product-summary { float: none; padding-inline: 0; }
  .ym-v2 #product-product .ym-product-gallery { width: calc(55% - 9px); }
  .ym-v2 #product-product .ym-product-summary { width: calc(45% - 9px); padding: 20px 22px; }
}
.ym-v2 #product-product .ym-option-unavailable { opacity: .58; }
.ym-v2 #product-product .ym-option-unavailable label { cursor: not-allowed; }
.ym-v2 #product-product .ym-option-unavailable small { display: block; color: #8b5f68; font-size: 12px; }
.ym-v2 #product-product h1 { margin: 8px 0 6px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: clamp(22px, 2vw, 28px); line-height: 1.3; }
.ym-product-tools { margin-bottom: 3px; }
/* Keyword-stuffed titles pushed the desktop CTA below the 1366x768 fold; the
   single wishlist control floats over the card instead of taking its own row. */
@media (min-width: 768px) {
  .ym-v2 #product-product .ym-product-summary > .ym-product-tools { position: absolute; top: 16px; right: 18px; z-index: 3; margin: 0; }
  .ym-v2 #product-product .ym-product-summary > .ym-product-tools .btn { width: 42px; height: 42px; padding: 0; display: grid; place-items: center; float: none; border: 1px solid rgba(210, 91, 117, .24); border-radius: 50%; color: var(--ym-coral-dark); background: #fff; }
  .ym-v2 #product-product .ym-product-summary > .ym-product-tools .btn:hover { border-color: var(--ym-coral-strong); background: var(--ym-blush); }
  .ym-v2 #product-product .ym-product-summary > h1 { margin-top: 0; padding-right: 52px; }
}
.ym-product-meta { margin: 0 0 9px; display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--ym-muted); font-size: 12px; }
.ym-product-meta > li { margin: 0; }
.ym-product-pricing { margin: 0 0 7px; }
.ym-product-pricing > li { margin: 0; }
.ym-product-pricing h2 { margin: 4px 0; color: var(--ym-coral-dark); font-size: clamp(27px, 3vw, 35px); }
.ym-product-pricing h2 .ym-price-from { color: inherit; margin-left: 3px; font-size: .52em; font-weight: 800; letter-spacing: .02em; vertical-align: baseline; }
.ym-v2 #product-product .thumbnails { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; list-style: none; }
.ym-v2 #product-product .thumbnails > li { margin: 0; }
.ym-v2 #product-product .thumbnails > li:first-child { grid-column: 1 / -1; }
.ym-v2 #product-product .thumbnail { margin: 0; padding: 4px; border-color: var(--ym-line); border-radius: var(--ym-radius-sm); background: #fff; overflow: hidden; }
.ym-v2 #product-product .thumbnails > li:first-child .thumbnail { display: grid; place-items: center; aspect-ratio: 1 / 1; }
.ym-v2 #product-product .thumbnails > li:first-child img { width: 100%; height: 100%; object-fit: contain; }
.ym-v2 #product-product .image-additional .thumbnail { aspect-ratio: 1 / 1; }
.ym-v2 #product-product .image-additional img { width: 100%; height: 100%; object-fit: cover; }
.ym-mobile-primary-image { display: none; }
.ym-lightbox-open { overflow: hidden; }
.ym-product-lightbox[hidden] { display: none !important; }
.ym-product-lightbox { position: fixed; inset: 0; z-index: 5000; padding: 72px 84px 40px; display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; gap: 20px; background: rgba(31, 24, 26, .94); backdrop-filter: blur(8px); }
.ym-product-lightbox figure { min-width: 0; max-width: min(1040px, 100%); max-height: 100%; margin: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ym-product-lightbox img { max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; border-radius: var(--ym-radius-sm); background: #fff; box-shadow: var(--ym-shadow-overlay); }
.ym-product-lightbox figcaption { min-height: 22px; color: #fff; font-weight: 800; letter-spacing: .08em; }
.ym-product-lightbox button { width: 52px; height: 52px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.38); border-radius: 50%; color: #fff; background: rgba(255,255,255,.12); font-size: 28px; }
.ym-product-lightbox button:hover, .ym-product-lightbox button:focus-visible { outline: 0; border-color: #fff; background: rgba(255,255,255,.24); }
.ym-product-lightbox__close { position: absolute; top: 18px; right: 22px; }
.ym-product-campaigns { margin: 12px 0 4px; padding: 10px 12px; display: flex; align-items: flex-start; gap: 12px; border: 1px solid #f1cbd3; border-radius: var(--ym-radius-sm); background: linear-gradient(135deg, #fff7f8, #fffdf9); }
.ym-product-campaigns__title { padding-top: 7px; flex: 0 0 auto; color: var(--ym-coral-dark); font-size: 13px; white-space: nowrap; }
.ym-product-campaigns__title .fa { margin-right: 4px; }
.ym-product-campaigns__list { min-width: 0; display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 6px; }
.ym-product-campaigns__item { min-height: 36px; padding: 7px 10px; display: inline-flex; align-items: center; gap: 7px; border-radius: var(--ym-radius-xs); color: #55464a; background: #fff; box-shadow: inset 0 0 0 1px rgba(210, 91, 117, .14); font-size: 12px; font-weight: 800; line-height: 1.35; }
.ym-product-campaigns__item small { color: var(--ym-coral-dark); font-size: 11px; font-weight: 800; }
.ym-product-campaigns__item .fa { color: var(--ym-coral-strong); }
.ym-product-campaigns__item:hover, .ym-product-campaigns__item:focus-visible { color: var(--ym-coral-dark); text-decoration: none; box-shadow: inset 0 0 0 2px var(--ym-coral-strong); }
.ym-v2 #product-product #product { margin-top: 13px; }
.ym-v2 #product-product #product .radio label,
.ym-v2 #product-product #product .checkbox label { min-height: 44px; padding-top: 11px; padding-bottom: 8px; }
.ym-v2 #product-product #product .form-control[name="quantity"] { width: 96px; }
.ym-product-buybox { margin-bottom: 0; padding-top: 10px; border-top: 1px solid #f2e7e9; }
.ym-product-quantity { display: flex; align-items: center; gap: 12px; }
.ym-product-quantity .control-label { margin: 0; }
.ym-live-quote[hidden] { display: none !important; }
.ym-live-quote { min-height: 0; margin-top: 6px; padding: 8px 12px; border: 1px solid #efd8dd; border-radius: var(--ym-radius-sm); background: linear-gradient(135deg, #fff8f9, #fffdfb); transition: opacity .16s ease; }
.ym-live-quote.is-loading { opacity: .58; }
.ym-live-quote__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ym-live-quote__total span { color: var(--ym-muted); font-size: 13px; font-weight: 800; }
.ym-live-quote__total strong { color: var(--ym-coral-dark); font-size: 23px; line-height: 1.2; white-space: nowrap; }
.ym-live-quote__discount { margin: 6px 0 0; color: #207246; font-size: 13px; font-weight: 900; }
.ym-live-quote small { margin-top: 4px; display: block; color: var(--ym-muted); font-size: 12px; line-height: 1.45; }
/* An unmet required option is a blocker, not neutral helper text. It starts as an
   amber prompt and escalates to red once the shopper has actually been stopped. */
.ym-live-quote.is-incomplete { min-height: 0; border-color: #ecc48a; border-left: 4px solid #d98a29; background: #fff8ec; }
.ym-live-quote.is-incomplete .ym-live-quote__total { display: block; }
.ym-live-quote.is-incomplete .ym-live-quote__total span { color: #8a5514; font-weight: 900; }
.ym-live-quote.is-incomplete .ym-live-quote__total span::before { content: "\26A0"; margin-right: 5px; font-weight: 900; }
.ym-live-quote.is-incomplete small { color: #8a5514; font-weight: 700; }
.ym-live-quote.is-incomplete.is-blocking { border-color: #f0b6c0; border-left-color: var(--ym-coral-strong); background: #fff1f3; }
.ym-live-quote.is-incomplete.is-blocking .ym-live-quote__total span,
.ym-live-quote.is-incomplete.is-blocking small { color: #a3243f; }
.ym-v2 #product-product #product .form-group,
.ym-v2 #product-product #product .text-danger { scroll-margin-top: 168px; }
.ym-v2 #product-product #product .text-danger { margin-top: 6px; padding: 8px 11px; display: block; border-radius: var(--ym-radius-xs); color: #a3243f; background: #fff1f3; box-shadow: inset 0 0 0 1px #f0b6c0; font-size: 13px; font-weight: 800; }
.ym-v2 #product-product #product .text-danger::before { content: "\26A0"; margin-right: 5px; }
.ym-v2 #product-product #product .form-group.has-error > .control-label,
.ym-v2 #product-product #product .form-group.has-error > legend { color: #a3243f; }
/* The section rule plus a full-size heading duplicated the field label below it
   and cost ~30px of first-fold height on every option product. */
.ym-v2 #product-product .ym-product-options { border-top: 1px solid #f2e7e9; }
.ym-v2 #product-product .ym-product-options__title { margin: 11px 0 7px; color: var(--ym-muted); font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.ym-v2 #product-product .ym-product-options__title:not(.sr-only) { display: block; }
.ym-buy-row { margin-top: 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.ym-buy-row .ym-product-quantity { flex: 0 0 auto; }
.ym-v2 .ym-buy-row #button-cart { width: auto; min-width: 150px; margin-top: 0; flex: 1 1 150px; }
.ym-v2 #button-cart, .ym-v2 .ym-buy-now { width: 100%; min-height: 52px; margin-top: 10px; font-size: 16px; }
.ym-v2 .ym-buy-now { border: 1px solid var(--ym-coral-strong); color: var(--ym-coral-dark); background: var(--ym-blush); }
.ym-line-order { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-color: #b7ddc4; color: #087d39; background: #f2fbf5; font-weight: 800; }
.ym-line-order:hover, .ym-line-order:focus { border-color: #08a64b; color: #066f32; background: #e8f8ed; }
.ym-line-order--main { margin-top: 8px; }
.ym-line-order--card { width: calc(100% - 20px); min-height: 44px; margin: 0 10px 10px; font-size: 12px; }
.ym-product-share { min-height: 44px; padding: 8px 12px; display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: var(--ym-radius-sm); color: var(--ym-coral-dark); background: #fff5f7; font-size: 12px; font-weight: 800; }
.ym-product-share:hover, .ym-product-share:focus-visible { outline: 2px solid var(--ym-coral-strong); outline-offset: 2px; }
.ym-v2 .ym-pdp-reassurance { margin-top: 14px; padding-top: 13px; display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--ym-line); color: var(--ym-muted); font-size: 11px; }
.ym-v2 .ym-pdp-reassurance i { margin-right: 3px; color: var(--ym-coral-strong); }
.ym-product-details { margin-top: 24px; padding: 18px 22px 22px; scroll-margin-top: 150px; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-lg); background: #fff; box-shadow: var(--ym-shadow-sm); }
.ym-product-details .nav-tabs { display: flex; justify-content: center; border-bottom: 1px solid var(--ym-line); }
.ym-product-details .nav-tabs > li > a { min-width: 150px; margin: 0; padding: 14px 20px; border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: 0; text-align: center; font-weight: 800; }
.ym-product-details .nav-tabs > li.active > a { color: var(--ym-coral-strong); border-bottom-color: var(--ym-coral-strong) !important; background: transparent; }
.ym-product-details .tab-content { padding-top: 16px; }
.ym-product-details #tab-description { position: relative; width: min(100%, 960px); margin: 0 auto; overflow: hidden; }
.ym-product-details #tab-description img { display: block; max-width: 100% !important; height: auto !important; margin-inline: auto; }
.ym-product-details #tab-description img.ym-description-image-pending { visibility: hidden; }
.ym-product-details #tab-description.ym-description-collapsed { max-height: 780px; }
.ym-product-details #tab-description.ym-description-collapsed:after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 120px; background: linear-gradient(transparent, #fff); pointer-events: none; }
.ym-description-toggle { min-width: 240px; min-height: 48px; margin: 20px auto 0; padding: 10px 22px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #e4bec6; border-radius: var(--ym-radius-pill); color: var(--ym-coral-dark); background: #fff; font-weight: 800; }
.ym-pdp-mobile-bar { display: none; }

/* Account, registration and order history */
.ym-account-page { padding-bottom: 36px; }
.ym-account-content { min-width: 0; }
.ym-account-title { position: relative; margin: 6px 0 16px; padding: 18px 22px; border: 1px solid #f1dce1; border-radius: var(--ym-radius-lg); background: radial-gradient(circle at 92% 15%, rgba(231,127,145,.2), transparent 32%), linear-gradient(135deg, #fff4f6, #fffaf7); }
.ym-account-title:after { content: ""; position: absolute; bottom: 18px; left: 30px; width: 42px; height: 3px; border-radius: var(--ym-radius-pill); background: var(--ym-coral-strong); }
.ym-account-title > span { color: var(--ym-coral-dark); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.ym-account-title > h1 { margin: 3px 0 5px; font-size: clamp(28px, 3.4vw, 36px); }
.ym-account-title > p { margin: 0 0 8px; color: var(--ym-muted); font-size: 13px; }
.ym-account-content > h1.ym-account-title { padding: 21px 24px 25px; font-size: clamp(27px, 3.2vw, 35px); line-height: 1.25; }
.ym-account-signin { margin: -4px 0 14px; color: var(--ym-muted); }
.ym-account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ym-account-card { min-width: 0; padding: 18px; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); background: #fff; box-shadow: var(--ym-shadow-sm); }
.ym-account-card h2 { margin: 0 0 14px; padding-bottom: 11px; border-bottom: 1px solid #f2e7e9; font-size: 18px; }
.ym-account-card h2 .fa { width: 24px; color: var(--ym-coral-strong); text-align: center; }
.ym-account-card--wide { grid-column: 1 / -1; }
.ym-account-card--wide .ym-account-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ym-account-form .radio label, .ym-account-form .radio-inline { min-height: 44px; padding-top: 11px; padding-bottom: 9px; }
.ym-account-form .radio-inline { min-width: 44px; margin-right: 8px; }
.ym-account-form .ym-date-button { min-width: 44px; min-height: 44px; padding-inline: 12px; }
.ym-account-agree { min-height: 44px; margin: 0 10px 6px 0; display: inline-flex; align-items: center; gap: 8px; }
.ym-account-agree input { margin: 0; flex: 0 0 auto; }
.ym-account-agree label { min-height: 44px; margin: 0; display: inline-flex; align-items: center; font-weight: 500; }
.ym-account-links { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.ym-account-links a { min-height: 42px; padding: 9px 11px; display: flex; align-items: center; border-radius: var(--ym-radius-sm); color: #544a4d; background: #fff9fa; font-weight: 700; }
.ym-account-links a:after { content: "›"; margin-left: auto; color: var(--ym-coral-strong); font-size: 18px; }
.ym-account-links a:hover { color: var(--ym-coral-dark); background: var(--ym-blush); }
.ym-account-form { max-width: 960px; }
.ym-account-form fieldset { margin: 0 0 18px; padding: 18px 20px 6px; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); background: #fff; box-shadow: var(--ym-shadow-sm); }
.ym-account-form legend { width: auto; margin: 0 0 18px; padding: 0 8px; border: 0; color: var(--ym-ink); font-size: 19px; font-weight: 900; }
.ym-account-form .control-label { padding-top: 11px; color: #5d5356; }
.ym-account-form .required .control-label:before { margin-right: 4px; color: var(--ym-coral-dark); }
.ym-account-form .buttons { margin-top: 20px; padding: 18px 0 0; border-top: 1px solid var(--ym-line); }
.ym-account-table { margin-bottom: 20px; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); background: #fff; box-shadow: var(--ym-shadow-sm); }
.ym-account-table > .table { margin: 0; }
.ym-account-table > .table > thead > tr > td { color: #4f4447; background: #fff5f7; font-weight: 800; }
.ym-account-table > .table > tbody > tr > td, .ym-account-table > .table > tfoot > tr > td { vertical-align: middle; border-color: #f0e4e7; }
/* [YM 2026-08-30] 桌機表格溢出保險
   Bootstrap 的 .table-responsive{overflow-x:auto} 只存在於 @media(max-width:767px)，
   桌機完全沒有保護，欄位一多會直接撐破 #content。
   必須限定 min-width:768px —— 手機那邊 .ym-account-table--cards 是刻意設 overflow:visible
   （卡片模式不需橫捲，設 hidden/auto 反而會裁掉 box-shadow），見本檔 1538 附近。 */
@media (min-width: 768px) {
  .ym-account-table { overflow-x: auto; }
}
.ym-account-product-image img { width: 72px; height: 72px; object-fit: contain; }
.ym-action-label { display: none; }
.ym-account-empty { min-height: 220px; padding: 34px; display: grid; place-items: center; align-content: center; gap: 12px; border: 1px dashed #e4cbd0; border-radius: var(--ym-radius-lg); color: var(--ym-muted); background: #fff; text-align: center; }
.ym-account-empty i { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; color: var(--ym-coral-strong); background: var(--ym-blush); font-size: 23px; }
.ym-account-empty p { margin: 0; }
.ym-account-content > .well, .ym-account-content .well { border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); background: #fff; box-shadow: var(--ym-shadow-sm); }
.ym-social-access { margin: 0 0 12px; padding: 13px 14px 14px; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); background: linear-gradient(135deg, #fff, #fff7f8); box-shadow: var(--ym-shadow-sm); }
.ym-social-access__head { margin-bottom: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.ym-social-access__head strong { font-size: 16px; }
.ym-social-access__head small { color: var(--ym-muted); }
.ym-social-access__providers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ym-social-access__module, .ym-social-access .kbsocial-icons, .ym-social-access .kbsocial-icons li { display: contents !important; }
.ym-social-access .box-heading { display: none; }
.ym-v2 .kbsocial-icons { margin: 0; padding: 0; list-style: none; }
.ym-v2 .kbsocial-icons li { margin: 0; }
.ym-v2 .ym-social-login-link { width: 100%; min-height: 46px; padding: 10px 14px; display: flex !important; align-items: center; justify-content: center; gap: 9px; border-radius: var(--ym-radius-sm) !important; color: #fff !important; font-size: 14px; font-weight: 900; box-shadow: var(--ym-shadow-sm); }
.ym-v2 .ym-social-login-link--facebook::after { content: "Facebook"; }
.ym-v2 .ym-social-login-link--google::after { content: "Google"; }
.ym-v2 .ym-social-login-link--facebook { background: #1877f2 !important; }
.ym-v2 .ym-social-login-link--google { color: #353033 !important; background: #fff !important; border: 1px solid #ded7d9; }
.ym-v2 .ym-social-login-link i { font-size: 18px; }
.ym-login-line { width: 100%; min-height: 46px; padding: 11px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #fff !important; border-color: #087f3b; background: #087f3b; font-weight: 900; }
.ym-login-line:hover, .ym-login-line:focus { color: #fff; border-color: #06652f; background: #06652f; }
.ym-social-access--register .ym-social-access__providers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ym-login-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.ym-login-card { min-width: 0; height: auto; margin: 0 !important; padding: 20px 22px; }
.ym-login-card--returning { border-color: #e6c8ce !important; }
.ym-login-card--new { background: linear-gradient(145deg, #fff8f9, #fff) !important; }
.ym-login-card__eyebrow { color: var(--ym-coral-dark); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.ym-login-card h2 { margin: 5px 0 11px; font-size: 23px; }
.ym-login-card .form-control { min-height: 48px; }
.ym-login-forgotten { margin-top: 7px; display: inline-block; font-size: 13px; font-weight: 700; }
.ym-login-submit { width: 100%; min-height: 48px; font-weight: 900; }
.ym-login-benefits { margin: 15px 0 17px; padding: 13px 14px; display: grid; gap: 8px; border-radius: var(--ym-radius-sm); color: #5f4f53; background: #fff; list-style: none; font-size: 13px; }
.ym-login-benefits .fa { margin-right: 6px; color: var(--ym-coral-strong); }
.ym-v2 .ym-login-register.btn { min-width: 132px; min-height: 46px; padding: 11px 18px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ym-coral-strong); color: var(--ym-coral-dark); background: #fff; font-weight: 900; }
.ym-login-card--new .ym-login-register { width: 100%; }
.ym-v2 .ym-login-register.btn:hover, .ym-v2 .ym-login-register.btn:focus { color: #fff; border-color: var(--ym-coral-dark); background: var(--ym-coral-dark); }
@media (min-width: 992px) {
  .ym-account-page .ym-account-nav { position: sticky; top: 126px; border-radius: var(--ym-radius-md); overflow: hidden; box-shadow: var(--ym-shadow-sm); }
}

/* Native information and contact pages */
.ym-information-page, #information-contact { padding-bottom: 48px; }
.ym-information-heading { margin-bottom: 22px; padding: 26px 30px; border: 1px solid #efd8dd; border-radius: var(--ym-radius-md); background: linear-gradient(120deg, #fff4f6, #fff); }
.ym-information-heading > span { color: var(--ym-coral-dark); font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.ym-information-heading h1 { margin: 5px 0 4px; font-size: clamp(30px, 4vw, 42px); }
.ym-information-heading p { margin: 0; color: var(--ym-muted); font-size: 14px; }
.ym-information-card { padding: 32px; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); background: #fff; box-shadow: var(--ym-shadow-sm); }
.ym-information-card > :first-child { margin-top: 0 !important; }
.ym-information-card > :last-child { margin-bottom: 0 !important; }
.ym-info-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 22px 0; }
.ym-info-feature-box { min-width: 0; padding: 20px; display: flex; gap: 14px; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); background: var(--ym-cream); }
.ym-info-feature-icon { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; border-radius: var(--ym-radius-md); color: var(--ym-coral-dark); background: var(--ym-blush); font-size: 20px; }
.ym-info-feature-info h4 { margin: 0 0 6px; font-size: 16px; }
.ym-info-feature-info p { margin: 0; color: var(--ym-muted); font-size: 13px; line-height: 1.65; }
.ym-info-steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 22px 0; }
.ym-info-step-card { position: relative; min-width: 0; padding: 24px 18px 20px; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); background: var(--ym-cream); text-align: center; }
.ym-info-step-num { position: absolute; top: 10px; left: 12px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--ym-coral-dark); font-size: 11px; font-weight: 900; }
.ym-info-step-icon { margin: 0 auto 12px; color: var(--ym-coral-strong); font-size: 28px; }
.ym-info-step-title { margin-bottom: 7px; font-weight: 900; }
.ym-info-step-desc { color: var(--ym-muted); font-size: 13px; line-height: 1.6; }
.ym-info-alert { margin: 22px 0; padding: 17px 19px; display: flex; gap: 13px; border: 1px solid #e8cbd1; border-radius: var(--ym-radius-md); color: #5a4046; background: #fff4f6; }
.ym-info-alert > i { margin-top: 3px; color: var(--ym-coral-dark); font-size: 19px; }
.ym-info-alert.warning { border-color: #edd8b6; background: #fff9e9; }
.ym-info-alert.warning > i { color: var(--ym-warning); }
.ym-info-alert.info { border-color: #cde0dc; background: #f2faf7; }
.ym-info-alert.info > i { color: var(--ym-success); }
.ym-info-table-wrap { max-width: 100%; margin: 18px 0; overflow-x: auto; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); }
.ym-info-table { width: 100%; min-width: 620px; border-collapse: collapse; background: #fff; }
.ym-info-table th, .ym-info-table td { padding: 14px 16px; border-right: 1px solid var(--ym-line); border-bottom: 1px solid var(--ym-line); text-align: left; vertical-align: top; }
.ym-info-table th { color: var(--ym-coral-dark); background: var(--ym-blush); }
.ym-info-table tr:last-child td { border-bottom: 0; }
.ym-info-accordion { display: grid; gap: 10px; margin-top: 14px; }
.ym-info-acc-item { overflow: hidden; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-sm); background: #fff; }
.ym-info-acc-header { min-height: 50px; padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-weight: 800; cursor: pointer; }
.ym-info-acc-header .chevron { color: var(--ym-coral-strong); transition: transform .18s ease; }
.ym-info-acc-body { display: none; padding: 0 16px 16px; color: var(--ym-muted); line-height: 1.75; }
.ym-info-acc-item.open { border-color: #e6bdc5; background: #fffafb; }
.ym-info-acc-item.open .ym-info-acc-body { display: block; }
.ym-info-acc-item.open .ym-info-acc-header .chevron { transform: rotate(180deg); }
.ym-contact-card { margin-bottom: 22px; padding: 24px; display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 18px; align-items: center; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); background: #fff; box-shadow: var(--ym-shadow-sm); }
.ym-contact-brand img { width: 210px; height: auto; display: block; margin-bottom: 12px; }
.ym-contact-brand > strong { display: block; font-size: 19px; }
.ym-contact-brand address { margin: 5px 0 0; color: var(--ym-muted); font-size: 13px; }
.ym-contact-method { min-width: 0; display: flex; align-items: flex-start; gap: 11px; }
.ym-contact-method > i { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: var(--ym-radius-sm); color: var(--ym-coral-dark); background: var(--ym-blush); }
.ym-contact-method strong, .ym-contact-method a, .ym-contact-method span { display: block; }
.ym-contact-method strong { margin-bottom: 4px; }
.ym-contact-method a, .ym-contact-method span { color: var(--ym-muted); overflow-wrap: anywhere; }
.ym-contact-form-card { padding: 28px; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); background: #fff; box-shadow: var(--ym-shadow-sm); }
.ym-contact-form-card legend { padding-bottom: 12px; border-color: var(--ym-line); font-weight: 900; }
.ym-contact-form-card .buttons .btn { min-height: 46px; padding: 11px 22px; font-weight: 900; }
.ym-contact-form-card .buttons .btn i { margin-right: 5px; }

/* Sitemap */
.ym-sitemap-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(290px, .72fr); gap: 22px; align-items: start; }
.ym-sitemap-main, .ym-sitemap-aside { min-width: 0; }
.ym-sitemap-aside { position: sticky; top: 94px; }
.ym-sitemap-section-heading { min-height: 68px; margin-bottom: 12px; padding: 13px 17px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); background: #fff; box-shadow: var(--ym-shadow-sm); }
.ym-sitemap-section-heading span { display: block; color: var(--ym-coral-dark); font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.ym-sitemap-section-heading h2 { margin: 2px 0 0; font-size: 21px; }
.ym-sitemap-section-heading > i { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: var(--ym-radius-sm); color: var(--ym-coral-dark); background: var(--ym-blush); font-size: 17px; }
.ym-sitemap-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ym-sitemap-card, .ym-sitemap-shortcuts { min-width: 0; overflow: hidden; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); background: #fff; box-shadow: var(--ym-shadow-sm); }
.ym-sitemap-card[open], .ym-sitemap-shortcuts[open] { border-color: #e9c6cd; }
.ym-sitemap-card summary, .ym-sitemap-shortcuts summary, .ym-sitemap-card--direct { min-height: 54px; padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ym-ink); font-weight: 900; cursor: pointer; list-style: none; }
.ym-sitemap-card summary::-webkit-details-marker, .ym-sitemap-shortcuts summary::-webkit-details-marker { display: none; }
.ym-sitemap-card summary:focus-visible, .ym-sitemap-shortcuts summary:focus-visible, .ym-sitemap-card--direct:focus-visible { outline: 3px solid rgba(207, 86, 109, .24); outline-offset: -3px; }
.ym-sitemap-card summary > span, .ym-sitemap-shortcuts summary > span, .ym-sitemap-card--direct > span { min-width: 0; overflow-wrap: anywhere; }
.ym-sitemap-card summary > i, .ym-sitemap-shortcuts summary > i { flex: 0 0 auto; color: var(--ym-coral-strong); transition: transform .18s ease; }
.ym-sitemap-card[open] summary > i, .ym-sitemap-shortcuts[open] summary > i { transform: rotate(180deg); }
.ym-sitemap-card--direct { text-decoration: none; }
.ym-sitemap-card--direct > i { color: var(--ym-coral-strong); }
.ym-sitemap-card--direct:hover, .ym-sitemap-card--direct:focus { color: var(--ym-coral-dark); border-color: #e9c6cd; background: #fffafb; }
.ym-sitemap-card-body { padding: 0 14px 14px; border-top: 1px solid #f3e7e9; }
.ym-sitemap-view-all { min-height: 44px; margin: 8px 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ym-coral-dark); font-size: 13px; font-weight: 900; }
.ym-sitemap-children { display: grid; gap: 8px; }
.ym-sitemap-child-group { min-width: 0; padding: 10px; border-radius: var(--ym-radius-sm); background: var(--ym-cream); }
.ym-sitemap-child-title { min-height: 28px; display: flex; align-items: center; color: var(--ym-ink); font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }
.ym-sitemap-grandchildren { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 6px; }
.ym-sitemap-grandchildren a { min-height: 34px; padding: 6px 9px; display: inline-flex; align-items: center; border: 1px solid #eddde0; border-radius: var(--ym-radius-pill); color: var(--ym-muted); background: #fff; font-size: 12px; overflow-wrap: anywhere; }
.ym-sitemap-shortcuts + .ym-sitemap-shortcuts { margin-top: 10px; }
.ym-sitemap-shortcuts nav { padding: 3px 10px 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; border-top: 1px solid #f3e7e9; }
.ym-sitemap-shortcuts nav a { min-width: 0; min-height: 44px; padding: 9px 10px; display: flex; align-items: center; gap: 9px; border-radius: var(--ym-radius-sm); color: var(--ym-ink); background: var(--ym-cream); font-size: 13px; font-weight: 700; }
.ym-sitemap-shortcuts nav a:hover, .ym-sitemap-shortcuts nav a:focus { color: var(--ym-coral-dark); background: var(--ym-blush); }
.ym-sitemap-shortcuts nav a i { width: 17px; flex: 0 0 auto; color: var(--ym-coral-dark); text-align: center; }
.ym-sitemap-shortcuts nav a span { min-width: 0; overflow-wrap: anywhere; }

/* Cart */
.ym-cart-head { margin: 18px 0 24px; }
.ym-cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "products summary" "addons summary" "options summary"; gap: 28px 32px; align-items: start; }
.ym-cart-main { min-width: 0; grid-area: products; }
.ym-cart-options { grid-area: options; margin-top: 12px; }
.ym-cart-summary { z-index: 2; grid-area: summary; }
.ym-cart-addon-placement { min-width: 0; grid-area: addons; margin-top: 8px; }
.cart-addon-module { max-width: 100%; min-width: 0; padding: 24px; overflow: hidden; border: 1px solid #ead4d9; border-radius: var(--ym-radius-lg); background: linear-gradient(135deg, #fff 0%, #fff8f9 100%); box-shadow: 0 2px 14px rgba(51, 42, 45, 0.05); }
.cart-addon-intro { margin-bottom: 17px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.cart-addon-intro h2 { margin: 3px 0 0; font-size: 23px; }
.cart-addon-intro p { max-width: 260px; margin: 0; color: var(--ym-muted); font-size: 12px; text-align: right; }
/* 與商品頁 .ym-commerce__eyebrow 同一階（12px/800/.12em） */
.cart-addon-eyebrow { color: var(--ym-coral-dark); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.cart-addon-activity + .cart-addon-activity { margin-top: 18px; padding-top: 18px; border-top: 1px solid #efdfe2; }
.cart-addon-module .addon-header { margin-bottom: 10px; }
.cart-addon-module .addon-title { margin: 0; color: var(--ym-ink); font-size: 15px; font-weight: 900; }
.cart-addon-module .addon-description { margin: 4px 0 0; color: var(--ym-muted); font-size: 12px; line-height: 1.5; }
.cart-addon-module .addon-carousel-wrapper { min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 8px; align-items: center; }
.cart-addon-module .addon-carousel { min-width: 0; padding: 4px 2px 10px 2px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; }
.cart-addon-module .addon-carousel::-webkit-scrollbar { display: none; }
.cart-addon-module .addon-carousel:focus-visible { outline: 3px solid rgba(207, 86, 109, .22); outline-offset: 2px; border-radius: var(--ym-radius-sm); }
.cart-addon-module .addon-carousel-inner {
  width: max-content;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: 12px;
  transform: none !important;
}
.cart-addon-module .addon-nav { width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid #e7cbd0; border-radius: 50%; color: var(--ym-coral-dark); background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.06); transition: all .16s ease; cursor: pointer; z-index: 2; }
.cart-addon-module .addon-nav:hover:not(:disabled) { border-color: var(--ym-coral-strong); color: #fff; background: var(--ym-coral-strong); box-shadow: 0 4px 10px rgba(207, 86, 109, 0.25); }
.cart-addon-module .addon-nav:disabled { visibility: hidden; opacity: 0; pointer-events: none; }
.cart-addon-module .addon-product-card {
  width: 185px;
  min-width: 185px;
  max-width: 185px;
  flex: 0 0 185px;
  min-height: 250px;
  margin-right: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  border: 1px solid #ebdcdf;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(40, 20, 25, 0.03);
  transition: transform .18s ease, box-shadow .18s ease;
  scroll-snap-align: start;
}
.cart-addon-module .addon-product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(207, 86, 109, 0.12);
  border-color: #e2cad0;
}
.cart-addon-module .addon-product-card:last-child { margin-right: 0; }
.cart-addon-module .addon-product-image {
  position: relative;
  width: 100%;
  height: 120px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #fdfafb;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-addon-module .addon-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.cart-addon-module .addon-discount-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--ym-coral-strong, #cf566d);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.3;
}
.cart-addon-module .addon-sold-out-badge {
  position: absolute;
  right: 5px;
  bottom: 5px;
  left: 5px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(40, 30, 33, 0.85);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  text-align: center;
}
.cart-addon-module .addon-product-info {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.cart-addon-module .addon-product-name {
  margin: 0 0 4px;
  height: 32px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.cart-addon-module .addon-product-name a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #272326;
  text-decoration: none;
}
.cart-addon-module .addon-product-name a:hover {
  color: var(--ym-coral-strong, #cf566d);
}
.cart-addon-module .addon-product-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 4px;
}
.cart-addon-module .addon-price-special {
  color: var(--ym-coral-strong, #cf566d);
  font-size: 13.5px;
  font-weight: 900;
}
.cart-addon-module .addon-price-original {
  color: #9c8e93;
  font-size: 11px;
  text-decoration: line-through;
}
.cart-addon-module .addon-product-card.is-need-option select.addon-option-input[required],
.cart-addon-module select.addon-option-input.is-invalid {
  border-color: var(--ym-coral-strong, #cf566d) !important;
  box-shadow: 0 0 0 3px rgba(207, 86, 109, 0.25) !important;
}
.cart-addon-module .addon-limit-info {
  color: #a09599;
  font-size: 10.5px;
  margin-bottom: 4px;
}
.cart-addon-module .remaining-qty {
  color: var(--ym-coral-dark);
  font-weight: 900;
}
.cart-addon-module .addon-option-control {
  margin-top: auto;
  margin-bottom: 6px;
  display: block;
}
.cart-addon-module .addon-option-control span {
  display: none;
}
.cart-addon-module select.addon-option-input {
  width: 100%;
  min-height: 28px;
  height: 28px;
  padding: 2px 6px;
  border: 1px solid #e2d2d6;
  border-radius: 6px;
  background: #fff;
  font-size: 11.5px;
  color: #3b3336;
}
.cart-addon-module .addon-product-action {
  margin-top: 6px;
}
.cart-addon-module .btn-addon-add {
  width: 100%;
  min-height: 32px;
  height: 32px;
  line-height: 32px;
  padding: 0 10px;
  border: none;
  border-radius: 999px;
  background: var(--ym-coral-strong, #cf566d);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(207, 86, 109, 0.25);
  transition: all .16s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.cart-addon-module .btn-addon-add:hover {
  background: #b54359;
  transform: translateY(-1px);
  color: #fff;
}
.cart-addon-module .btn-addon-add.loading {
  pointer-events: none;
  opacity: .8;
}
.cart-addon-module .btn-addon-add.loading i { animation: ym-addon-spin .8s linear infinite; }
@keyframes ym-addon-spin { to { transform: rotate(360deg); } }

/* 輕量浮動通知 */
.ym-addon-inline-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: 99999;
  padding: 10px 22px;
  border-radius: var(--ym-radius-pill, 999px);
  background: rgba(39, 35, 38, 0.94);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: all 0.25s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
  white-space: nowrap;
}
.ym-addon-inline-toast.is-active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.ym-addon-inline-toast.error { background: #cf566d; }
.ym-addon-inline-toast.success { background: #2b8254; }

/* 空購物車狀態頁 */
.ym-cart-empty {
  text-align: center;
  padding: 48px 20px;
  background: #fff;
  border: 1px solid #ebdcdf;
  border-radius: var(--ym-radius-lg, 16px);
  box-shadow: 0 2px 12px rgba(40, 20, 25, 0.03);
  margin: 16px 0 32px;
}
.ym-cart-empty__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #fff0f3;
  color: var(--ym-coral-strong, #cf566d);
  display: grid;
  place-items: center;
  font-size: 28px;
}
.ym-cart-empty h1 {
  font-size: 22px;
  font-weight: 900;
  color: #272326;
  margin: 0 0 8px;
}
.ym-cart-empty__text {
  font-size: 14px;
  color: #71696e;
  margin: 0 0 24px;
}
.ym-cart-empty__actions {
  margin-bottom: 24px;
}
.ym-cart-empty__actions .btn {
  padding: 12px 32px;
  border-radius: var(--ym-radius-pill, 999px);
  font-weight: 800;
  font-size: 15px;
  box-shadow: 0 4px 14px rgba(207, 86, 109, 0.28);
}
.ym-cart-empty__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  font-size: 13px;
  color: #8c8286;
  padding-top: 18px;
  border-top: 1px dashed #f0e2e5;
}
.ym-cart-empty__links a {
  color: var(--ym-coral-dark, #a3384c);
  text-decoration: none;
  font-weight: 700;
}
.ym-cart-empty__links a:hover {
  text-decoration: underline;
}
.ym-cart-options { margin-top: 26px; }
.ym-cart-addon-placement { margin-top: 24px; }
.ym-cart-options > h2 { margin: 0 0 5px; font-size: 24px; }
.ym-cart-options > p { margin-bottom: 14px; color: var(--ym-muted); }
.ym-cart-options #accordion .panel { overflow: hidden; border-color: var(--ym-line); border-radius: var(--ym-radius-sm); background: #fff; box-shadow: none; }
.ym-cart-options #accordion .panel-heading { padding: 0; background: #fff; }
.ym-cart-options #accordion .panel-title > a { min-height: 48px; padding: 12px 15px; display: flex; align-items: center; font-weight: 800; }
.ym-cart-tool .panel-body > .control-label { width: 100%; margin-bottom: 7px; padding: 0; text-align: left; }
.ym-cart-tool .input-group { width: 100%; display: flex; }
.ym-cart-tool .input-group .form-control { min-width: 0; flex: 1 1 auto; }
.ym-cart-tool .input-group-btn { width: auto; flex: 0 0 auto; }
.ym-cart-tool #button-coupon { min-width: 96px; min-height: 44px; padding-inline: 14px; white-space: nowrap; }
.ym-cart-summary { position: sticky; top: 140px; padding: 28px; border: 1px solid #ebd5da; border-radius: var(--ym-radius-lg); background: #fff; box-shadow: 0 4px 20px rgba(51, 42, 45, 0.06); }
.ym-cart-summary__eyebrow { color: var(--ym-coral-dark); font-size: 11px; font-weight: 900; letter-spacing: .13em; }
.ym-cart-summary h2 { margin: 4px 0 18px; font-size: 26px; }
.ym-cart-summary__table-wrap { margin-top: 12px; overflow: hidden; border-top: 1px solid var(--ym-line); border-bottom: 1px solid var(--ym-line); }
.ym-cart-summary__table { margin: 0; }
.ym-cart-summary__table > tbody > tr > th,
.ym-cart-summary__table > tbody > tr > td { padding: 12px 0; border-top: 1px solid #f3e8ea; background: transparent; }
.ym-cart-summary__table > tbody > tr:first-child > th,
.ym-cart-summary__table > tbody > tr:first-child > td { border-top: 0; }
.ym-cart-summary__table th { color: var(--ym-muted); font-size: 14px; font-weight: 700; text-align: left; }
.ym-cart-summary__table td { color: var(--ym-ink); font-size: 15px; font-weight: 800; text-align: right; }
.ym-cart-summary__table .ym-cart-total-row--grand th,
.ym-cart-summary__table .ym-cart-total-row--grand td { padding-top: 16px; padding-bottom: 14px; color: var(--ym-coral-dark); font-size: 19px; font-weight: 900; }
.ym-cart-summary__actions { margin-top: 22px; display: grid; gap: 12px; }
.ym-cart-summary__actions .btn { width: 100%; min-height: 48px; border-radius: var(--ym-radius-pill); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.ym-cart-summary__actions .btn-primary { min-height: 52px; font-size: 16px; box-shadow: 0 4px 14px rgba(197, 72, 98, 0.28); }
.ym-cart-summary__secure { margin-top: 16px; display: block; color: var(--ym-muted); font-size: 12px; line-height: 1.5; text-align: center; }
.ym-cart-summary__secure i { margin-right: 4px; color: var(--ym-success); }
.ym-register-agree { min-height: 44px; margin: 0 12px 10px 0; display: inline-flex; align-items: center; gap: 9px; font-weight: 500; cursor: pointer; }
.ym-register-agree input { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; }
.ym-register-agree span { line-height: 1.5; }
.ym-account-agree-modal-close { width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin: -10px -10px 0 0; display: inline-flex; align-items: center; justify-content: center; opacity: 1; touch-action: manipulation; }
.ym-v2 .alert-dismissible { position: relative; padding-right: 56px; }
.ym-v2 .alert-dismissible > .close { position: absolute; top: 50%; right: 5px; width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin: 0; display: inline-flex; align-items: center; justify-content: center; transform: translateY(-50%); opacity: .58; }
/* [YM 2026-09-01] 老闆：促銷「滿千折百」訊息到處重複——這條 islpr-alert 是
   promotions 模組 ping 後 JS 插的橫幅，同樣內容已在加購 toast 的優惠線講過，
   PDP／分類／搜尋／購物車全部收掉，只留 toast 一種提示。 */
.ym-v2 .islpr-alert { display: none !important; }

/* Product cards shared by default and migrated modules */
.ym-v2 .product-layout { margin-bottom: 24px; }
.ym-v2 .product-thumb { height: 100%; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); background: #fff; box-shadow: var(--ym-shadow-sm); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ym-v2 .product-thumb:hover { transform: translateY(-4px); border-color: #ebc5cc; box-shadow: var(--ym-shadow-md); }
.ym-v2 .product-thumb .image { position: relative; padding: 0; background: #f8f5f3; overflow: hidden; }
.ym-v2 .product-thumb .image a { display: block; aspect-ratio: 1 / 1; }
.ym-v2 .product-thumb .image img { width: 100%; height: 100%; margin: 0 auto; object-fit: cover; transition: opacity .18s ease, transform .35s ease; }
.ym-v2 .product-thumb .image img.ym-product-image-pending { opacity: 0; }
.ym-v2 .product-thumb:hover .image img { transform: scale(1.025); }
.ym-v2 .product-thumb .caption { min-height: 156px; padding: 15px 16px 10px; }
.ym-v2 .product-thumb h4 { min-height: 46px; margin: 0 0 9px; font-size: 15px; line-height: 1.52; }
.ym-v2 .product-thumb h4 a { display: -webkit-box; overflow: hidden; color: #413a3c; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ym-v2 .product-thumb .description, .ym-v2 .product-thumb .caption > p:not(.price) { display: none; }
.ym-v2 .product-thumb .price { min-height: 31px; margin: 0; color: var(--ym-coral-dark); font-size: 19px; font-weight: 900; }
.ym-v2 .price-new { color: var(--ym-coral-strong); font-weight: 900; }
.ym-v2 .price-old { margin-left: 6px; color: #7f7376; font-size: 13px; font-weight: 500; text-decoration: line-through; }
.ym-v2 .price-tax { display: none; }
.ym-v2 .rating { margin-bottom: 6px; color: #a85f00; }
.ym-v2 .rating .fa-stack { width: 1.05em; height: 1.05em; font-size: 8px; }
.ym-v2 .product-thumb .button-group { display: grid; grid-template-columns: 1fr 44px 44px; border: 0; background: #fff; gap: 7px; padding: 0 12px 13px; }
.ym-v2 .product-thumb .button-group button { min-width: 0; height: 44px; border: 1px solid #928589; border-radius: var(--ym-radius-sm); background: #fff; color: var(--ym-coral-dark); font-weight: 800; }
.ym-v2 .product-thumb .button-group button:first-child { border-color: var(--ym-coral-strong); background: var(--ym-coral-strong); color: #fff; }
.ym-v2 .product-thumb .button-group button:hover { border-color: var(--ym-coral-dark); background: var(--ym-blush); color: var(--ym-coral-dark); }
.ym-v2 .product-thumb .button-group button:first-child:hover { background: var(--ym-coral-dark); color: #fff; }

/* Footer */
.ym-footer { margin-top: 58px; background: #fff; }
/* 頁尾這一條只留「它跟首頁那條不同的部分」：疊在頁尾底色上所以要 z-index 與下外距。
   卡片樣式全部來自 .ym-trust-strip，不再自己寫一份。 */
.ym-footer__trust { position: relative; z-index: 1; margin-bottom: 18px; }
.ym-footer__body { padding: 42px 0 40px; color: #f9eaed; background: #4b363d; }
.ym-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 56px; }
.ym-footer__grid h2 { margin: 0 0 14px; color: #fff; font-size: 15px; }
.ym-footer__toggle { width: 100%; padding: 0; display: flex; align-items: center; justify-content: space-between; border: 0; color: inherit; background: transparent; font: inherit; text-align: left; }
.ym-footer__toggle i { display: none; }
.ym-footer__grid ul { margin: 0; padding: 0; list-style: none; }
.ym-footer__grid li { margin: 7px 0; }
.ym-footer__grid a { color: #e7d7db; font-size: 13px; }
.ym-footer__grid a:hover { color: #fff; }
.ym-footer__brand > strong { color: #fff; font-size: 25px; letter-spacing: .04em; }
.ym-footer__brand p { max-width: 360px; margin: 12px 0 18px; color: #ddcdd1; font-size: 13px; }
.ym-footer__contact { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid rgba(255,255,255,.25); border-radius: var(--ym-radius-pill); }
.ym-footer__legal { padding: 15px 0; color: #a9989d; background: #3d2d32; font-size: 11px; }
.ym-mobile-dock { display: none; }

@media (max-width: 1100px) {
  .ym-header__main { grid-template-columns: 170px minmax(220px, 1fr) auto; gap: 18px; }
  .ym-logo { width: 165px; }
  .ym-header-action--optional { display: none; }
  .ym-nav__list { justify-content: space-between; }
  .ym-nav__item > a { padding-inline: 7px; font-size: 12px; }
  .ym-nav__item:nth-last-child(-n+4) .ym-nav__dropdown { right: 0; left: auto; }
  .ym-category-grid { grid-template-columns: repeat(4, 1fr); row-gap: 20px; }
  .ym-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .ym-product-grid--catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .ym-product-lightbox { padding: 62px 12px 26px; grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 4px; }
  .ym-product-lightbox img { max-height: calc(100vh - 132px); border-radius: var(--ym-radius-xs); }
  .ym-product-lightbox button { width: 44px; height: 44px; font-size: 23px; }
  .ym-product-lightbox__close { top: 10px; right: 12px; }
  .ym-product-campaigns { padding: 9px 10px; display: block; }
  .ym-product-campaigns__title { padding: 0 0 7px; display: block; }
  .ym-product-campaigns__list { display: grid; grid-template-columns: 1fr; }
  .ym-product-campaigns__item { justify-content: space-between; }
  /* [YM 2026-09-02] 手機版更滿版：側邊留白 14px→12px，讓商品卡與內容更貼近螢幕邊緣。 */
  .ym-shell, .ym-v2 .container, .ym-v2 .container.ym-product-native { width: min(calc(100% - 24px), var(--ym-shell)); }
  body.ym-v2 { padding-bottom: 0; font-size: 15px; }
  .ym-announcement__inner { min-height: 31px; justify-content: center; }
  .ym-announcement__secondary, .ym-announcement__inner a { display: none; }
  .ym-header { position: sticky; top: 0; }
  .ym-header__main { min-height: 62px; grid-template-columns: 44px 1fr auto; gap: 10px; }
  .ym-menu-toggle { display: block; }
  .ym-logo { width: 145px; justify-self: center; }
  .ym-header-action { display: none; }
  .ym-header__search { display: block; grid-column: 1 / -1; padding-bottom: 10px; }
  .ym-header__actions { grid-column: 3; grid-row: 1; justify-self: end; }
  .ym-header-cart .ym-cart-button { min-width: 44px; width: 44px; min-height: 44px; display: grid; padding: 0; place-items: center; background: var(--ym-blush); }
  .ym-header-cart .ym-cart-button i { font-size: 20px; }
  .ym-search { height: auto; min-height: 44px; }
  .ym-search > button, .ym-search > input[type="submit"] { height: 38px; }
  .ym-search button { min-width: 62px; }
  /* 手機黏性頁首縮小時文件高度會少 56px，瀏覽器的 scroll anchoring 會把捲動位置拉回頂端
     （實測：捲 25→50 時被彈回 0，CLS 0.515）。停用錨定後捲動正常且 CLS 降到 0.065。
     桌機頁首不縮、CLS 為 0，所以只在手機斷點停用。 */
  body { overflow-anchor: none; }
  .ym-header.is-stuck .ym-header__main { min-height: 56px; grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .ym-header.is-stuck .ym-logo { display: none; }
  .ym-header.is-stuck .ym-header__search { grid-column: 2; grid-row: 1; padding-bottom: 0; }
  .ym-header.is-stuck .ym-search__icon { left: 14px; }
  .ym-header.is-stuck #ym-search-input { padding-left: 38px; }
  .ym-header.is-stuck .ym-header__actions { grid-column: 3; }
  .ym-category-bar { display: none; }
  .ym-nav-backdrop { position: fixed; inset: 0; z-index: 1090; display: block; visibility: hidden; opacity: 0; background: rgba(38, 27, 31, .42); transition: opacity .2s ease, visibility .2s ease; }
  /* [YM 2026-09-03] 漢堡選單全滿版與緊湊一頁式手風琴導覽 */
  .ym-mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 1100;
    width: 100vw;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    visibility: hidden;
    transform: translateX(-102%);
    background: #fff;
    box-shadow: none;
    transition: transform .24s ease, visibility .24s ease;
  }
  .ym-menu-open .ym-mobile-nav { visibility: visible; transform: none; }
  .ym-mobile-nav__head {
    min-height: 48px;
    padding: 6px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f2e3e6;
    background: #fff;
    box-shadow: 0 1px 4px rgba(43, 24, 28, .03);
  }
  .ym-mobile-nav__brand {
    display: flex;
    align-items: center;
  }
  .ym-mobile-nav .ym-mobile-nav__logo,
  .ym-mobile-nav__brand img {
    height: 26px !important;
    width: auto !important;
    max-width: 130px !important;
    object-fit: contain !important;
    display: block !important;
  }
  .ym-mobile-nav__close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fbf5f6;
    border: 1px solid #f3dcdc;
    color: #63434a;
    font-size: 14px;
    display: grid;
    place-items: center;
    transition: background .15s ease, transform .15s ease;
  }
  .ym-mobile-nav__close:active {
    transform: scale(.95);
    background: #f3dcdc;
  }
  .ym-mobile-nav__content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ym-mobile-nav .ym-shell { width: 100%; padding-inline: 0; }
  .ym-mobile-nav .ym-nav__list {
    display: block;
    padding: 8px 12px 14px;
    margin: 0;
    list-style: none;
  }

  /* 本月活動 置頂精品卡片（置中對齊＋全部優惠商品移至標題列） */
  .ym-mobile-nav .ym-nav__item--accent {
    margin-bottom: 8px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff7f8 0%, #ffedf1 100%);
    border: 1px solid #f6cfd6;
    box-shadow: 0 2px 8px rgba(176, 58, 84, .06);
    overflow: hidden;
  }
  .ym-mobile-nav .ym-nav__campaign-header {
    padding: 7px 12px;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px dashed #f5cdd5;
  }
  .ym-nav__campaign-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--ym-coral-strong);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .ym-nav__campaign-all-link {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ym-coral);
    background: #fff;
    padding: 3px 9px;
    border-radius: 12px;
    border: 1px solid #f2cdd4;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    box-shadow: 0 1px 2px rgba(43, 24, 28, .03);
    transition: background .15s ease, color .15s ease;
  }
  .ym-nav__campaign-all-link:active {
    background: #fff0f3;
    color: var(--ym-coral-strong);
  }
  .ym-mobile-nav .ym-nav__item--accent .ym-nav__dropdown {
    padding: 6px 8px 8px;
    display: block;
    position: static;
    width: auto;
    visibility: visible;
    opacity: 1;
    border: 0;
    box-shadow: none;
  }
  .ym-mobile-nav .ym-nav__item--accent .ym-nav__dropdown ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ym-mobile-nav .ym-nav__item--accent .ym-nav__dropdown li {
    margin: 0;
    list-style: none;
  }
  .ym-mobile-nav .ym-nav__item--accent .ym-nav__dropdown a {
    display: block;
    text-align: center;
    padding: 5px 6px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    background: #fff;
    color: #8c263c;
    border: 1px solid #f2cdd4;
    box-shadow: 0 1px 2px rgba(43, 24, 28, .03);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .15s ease, transform .15s ease;
  }
  .ym-mobile-nav .ym-nav__item--accent .ym-nav__dropdown a:active {
    transform: scale(.98);
    background: #fff0f3;
  }

  /* 分類列表：生活選品圓章手風琴 */
  .ym-mobile-nav .ym-nav__item:not(.ym-nav__item--accent) {
    border-bottom: 1px solid #f3eaec;
  }
  .ym-nav__details summary::-webkit-details-marker { display: none; }
  .ym-nav__summary,
  .ym-nav__direct-link {
    list-style: none;
    width: 100%;
    min-height: 46px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
  }
  .ym-nav__summary-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .ym-nav__icon-badge {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #fcf1f3;
    color: var(--ym-coral);
    display: grid;
    place-items: center;
    font-size: 13px;
    transition: background .2s ease, color .2s ease;
  }
  .ym-nav__cat-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ym-ink);
    transition: color .2s ease;
  }
  .ym-nav__arrow {
    font-size: 14px;
    color: #a89095;
    transition: transform .2s ease, color .2s ease;
  }
  .ym-nav__details[open] > .ym-nav__summary .ym-nav__icon-badge {
    background: var(--ym-coral);
    color: #fff;
  }
  .ym-nav__details[open] > .ym-nav__summary .ym-nav__cat-title {
    color: var(--ym-coral);
  }
  .ym-nav__details[open] > .ym-nav__summary .ym-nav__arrow {
    color: var(--ym-coral);
    transform: rotate(180deg);
  }
  .ym-nav__details .ym-nav__dropdown {
    padding: 6px 8px 12px 40px;
    background: #faf6f6;
    border-radius: 10px;
    margin: 2px 0 8px;
    position: static;
    width: auto;
    visibility: visible;
    opacity: 1;
    border: 0;
    box-shadow: none;
  }
  .ym-nav__dropdown .ym-nav__all {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ym-coral-strong);
    margin-bottom: 8px;
    text-decoration: none;
  }
  .ym-nav__details .ym-nav__dropdown ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ym-nav__details .ym-nav__dropdown li {
    list-style: none;
    margin: 0;
  }
  .ym-nav__details .ym-nav__dropdown li a {
    padding: 5px 11px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 6px;
    background: #fff;
    color: #4a363a;
    border: 1px solid #ebd9dc;
    display: inline-block;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
  }
  .ym-nav__details .ym-nav__dropdown li a:active {
    background: #fff0f3;
    color: var(--ym-coral-strong);
  }

  /* 底部企業服務列 */
  .ym-mobile-nav__footer {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: #fffafb;
    border-top: 1px solid #f1e1e4;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(65px, 1fr));
    gap: 6px;
  }
  .ym-mobile-nav__footer a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 7px 4px;
    border-radius: 8px;
    color: #593d43;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    background: #fff;
    border: 1px solid #f2e2e5;
    text-decoration: none;
    transition: background .15s ease;
  }
  .ym-mobile-nav__footer a:active {
    background: #fff0f3;
  }
  .ym-mobile-nav__footer a i {
    font-size: 15px;
    color: var(--ym-coral);
  }
  .ym-cart-menu { position: fixed; top: 62px; right: 10px; left: 10px; width: auto; }
  .ym-home__content { padding-block: 15px 32px; }
  .ym-home-hero { width: 100%; margin-top: 0; border-radius: 0; }
  .ym-home-hero img { height: auto; aspect-ratio: 3 / 1; object-fit: cover; }
  .ym-value-strip { width: calc(100% - 20px); margin-top: 10px; }
  .ym-campaign-strip { width: calc(100% - 20px); margin-top: 9px; padding: 9px 10px; gap: 7px; scroll-snap-type: x proximity; }
  .ym-campaign-strip strong, .ym-campaign-strip a { scroll-snap-align: start; }
  .ym-campaign-showcase { width: calc(100% - 20px); margin-top: 22px; }
  .ym-campaign-showcase__heading { margin-bottom: 9px; }
  .ym-campaign-showcase__heading h2 { font-size: 20px; }
  .ym-campaign-showcase__heading > a { font-size: 12px; }
  .ym-campaign-showcase__rail { margin-right: -10px; padding-right: 10px; display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .ym-campaign-showcase__rail::-webkit-scrollbar { display: none; }
  .ym-campaign-card { flex: 0 0 min(78vw, 310px); min-height: 84px; aspect-ratio: 3 / 1; scroll-snap-align: start; }
  .ym-campaign-card > span { padding: 33px 12px 9px; }
  .ym-campaign-card small { font-size: 10px; }
  .ym-home-section { padding-block: 42px 16px; }
  .ym-home-section--tint { margin-top: 24px; padding-block: 40px; }
  .ym-section-heading { margin-bottom: 17px; align-items: flex-start; }
  .ym-section-heading h2 { font-size: 24px; }
  .ym-section-heading p { display: none; }
  .ym-category-grid { grid-template-columns: repeat(4, 1fr); gap: 10px 8px; }
  .ym-category-card { padding: 8px 6px 10px; border-radius: 16px; }
  .ym-category-card img { max-width: 64px; }
  .ym-category-card strong { font-size: 11px; margin-top: 6px; }
  .ym-category-card span { display: none; }
  .ym-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .ym-v2 .ym-product-grid .product-layout { width: 100%; padding: 0; float: none; }
  /* [YM 2026-09-02] 首頁商品橫向卡片更滿版：右側全出血到螢幕邊緣、單卡放寬到 82vw，
     每張卡幾乎佔滿一個螢幕寬、下一張只露一小截當「還有更多」的提示。 */
  .ym-home-section--rail .ym-product-grid { margin-right: -12px; padding: 2px 12px 10px 0; display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-padding-inline: 0 12px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .ym-home-section--rail .ym-product-grid::-webkit-scrollbar { display: none; }
  .ym-v2 .ym-home-section--rail .ym-product-grid .product-layout { width: auto; margin: 0; flex: 0 0 min(82vw, 320px); scroll-snap-align: start; }
  .ym-product-card .caption h3 { min-height: 44px; font-size: 13px; }
  .ym-product-card .ym-product-wish { display: none; }
  .ym-procurement { margin-top: 40px; padding: 30px 24px; grid-template-columns: 1fr; gap: 25px; border-radius: var(--ym-radius-md); }
  .ym-procurement h2 { font-size: 26px; }
  .ym-procurement__facts > div { min-height: 82px; }
  .ym-catalog-page { padding-bottom: 24px; }
  .ym-page-heading { min-height: 112px; padding: 21px 20px; border-radius: var(--ym-radius-md); }
  .ym-page-heading h1 { font-size: 27px; }
  .ym-page-heading img { width: 82px; height: 82px; }
  .ym-page-lead { font-size: 13px; }
  .ym-page-description { display: none; }
  .ym-subcategories { margin: 12px 0 8px; flex-wrap: wrap; gap: 8px; overflow-x: visible; }
  .ym-catalog-layout { grid-template-columns: 1fr; gap: 0; }
  .ym-catalog-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1110; width: min(88vw, 360px); padding: 18px; visibility: hidden; transform: translateX(-102%); border: 0; border-radius: 0; overflow-y: auto; transition: transform .2s ease, visibility 0s linear .2s; }
  .ym-filters-open .ym-catalog-sidebar { visibility: visible; transform: none; transition-delay: 0s; }
  .ym-v2 .ym-catalog-sidebar #column-left.hidden-xs { display: block !important; }
  .ym-catalog-sidebar .list-group-item { min-height: 44px; display: flex; align-items: center; }
  .ym-filters-open:after { content: ""; position: fixed; inset: 0; z-index: 1105; background: rgba(38,27,31,.42); }
  .ym-catalog-sidebar__head button { display: block; width: 44px; height: 44px; border: 0; border-radius: var(--ym-radius-sm); background: var(--ym-blush); color: var(--ym-coral-dark); }
  .ym-catalog-quick-filters { min-height: 58px; padding: 7px; display: grid; grid-template-columns: minmax(92px, 1fr) auto 56px auto; gap: 7px; }
  .ym-catalog-quick-filters__title, .ym-catalog-quick-filters__price > span { display: none; }
  .ym-catalog-quick-filters__price { min-width: 0; display: block; }
  .ym-catalog-quick-filters select { width: 100%; min-width: 0; min-height: 44px; padding-inline: 9px 24px; font-size: 12px; }
  .ym-catalog-stock-toggle { min-height: 44px; padding-inline: 8px; gap: 5px; font-size: 11px; }
  .ym-catalog-stock-toggle span { width: 19px; height: 19px; }
  .ym-catalog-quick-filters__apply, .ym-catalog-quick-filters__clear { min-width: 0; min-height: 44px; padding-inline: 8px; }
  .ym-catalog-toolbar { min-height: 62px; padding: 7px; display: flex; align-items: flex-end; gap: 7px; overflow: visible; justify-content: flex-start; }
  .ym-catalog-results-count, .ym-compare-link { display: none; }
  .ym-catalog-toolbar label { min-width: 0; display: grid; gap: 2px; flex: 1 1 0; }
  .ym-catalog-toolbar label span { display: block; padding-left: 2px; color: var(--ym-muted); font-size: 10px; line-height: 1; }
  .ym-catalog-toolbar .ym-catalog-control--sort { flex-grow: 1.35; }
  .ym-catalog-toolbar .ym-catalog-control--limit { flex-grow: .72; }
  .ym-catalog-toolbar select { width: 100%; min-width: 0; min-height: 38px; }
  .ym-filter-button { height: 44px; min-height: 44px; display: block; align-self: flex-end; flex: 0 0 auto; }
  .ym-product-grid--catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ym-pagination { display: block; text-align: center; }
  .ym-pagination p { margin-top: 8px; }
  .ym-brand-index { padding: 11px; display: block; }
  .ym-brand-index > strong { display: block; margin: 0 2px 9px; }
  .ym-brand-links { grid-template-columns: 1fr; }
  .ym-brand-group { padding: 17px 14px; }
  .ym-compare-page .ym-page-heading { min-height: 132px; }
  .ym-compare-table { min-width: 680px; }
  .ym-compare-table th, .ym-compare-table td { width: 210px; padding: 13px; }
  .ym-compare-table tr > :first-child { width: 116px; }
  .ym-success-card { margin: 10px auto 24px; padding: 34px 20px; border-radius: var(--ym-radius-md); }
  .ym-success-card .btn { width: 100%; }
  .ym-payment-result { margin: 10px auto 24px; padding: 32px 18px; border-radius: var(--ym-radius-md); }
  .ym-payment-result__message, .ym-payment-result__store { padding: 14px 12px; }
  .ym-payment-result__actions .btn { width: 100%; }
  .ym-payment-confirm { padding: 16px 14px; }
  .ym-payment-confirm__actions .btn { width: 100%; }
  .ym-native-checkout { padding-bottom: 28px; }
  .ym-native-checkout__section-body > .panel-body { padding: 17px 14px; }
  .ym-native-checkout__block .buttons .pull-left, .ym-native-checkout__block .buttons .pull-right { width: 100%; float: none !important; }
  .ym-native-checkout__block .buttons .btn, .ym-native-checkout__block .buttons input[type="button"] { width: 100%; margin-block: 4px; }
  .ym-native-checkout__block--confirm { overflow-x: auto; }
  .ym-native-checkout__block--confirm .table { min-width: 620px; }
  .ym-captcha__entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .ym-promotions--page, .ym-promotions--detail { padding-bottom: 28px; }
  .ym-promotions__hero { margin-bottom: 16px; }
  .ym-promotions__hero h1 { margin-bottom: 13px; font-size: 28px; }
  .ym-promotions__banners { grid-template-columns: 1fr; gap: 11px; }
  .ym-promotions__banner img { min-height: 82px; }
  .ym-promotions__message { font-size: 14px; }
  .ym-promotions__taxonomy { margin-block: 20px; }
  .ym-promotions__carousel { overflow: hidden; }
  .ym-search-refine { grid-template-columns: 28px minmax(0, 1fr) 72px; gap: 5px; }
  .ym-search-refine select { grid-column: 1 / -1; grid-row: 2; display: block; width: 100%; border-top: 1px solid var(--ym-line); border-left: 0; }
  .ym-search-refine button { grid-column: 3; grid-row: 1; }
  .ym-account-page { padding-bottom: 20px; }
  .ym-account-title { margin-bottom: 15px; padding: 18px 18px; border-radius: var(--ym-radius-md); font-size: 27px; }
  .ym-account-title:after { bottom: 13px; left: 20px; }
  .ym-account-title > h1 { font-size: 28px; }
  .ym-account-title > p { max-width: 280px; font-size: 12px; }
  .ym-account-grid, .ym-account-links { grid-template-columns: 1fr; }
  .ym-account-card--wide { grid-column: auto; }
  .ym-account-card--wide .ym-account-links { grid-template-columns: 1fr; }
  .ym-account-card { padding: 19px 17px; }
  .ym-account-form fieldset { padding: 18px 15px 5px; border-radius: var(--ym-radius-md); }
  .ym-account-form .control-label { padding-top: 0; text-align: left; }
  .ym-account-form .form-group { margin-bottom: 17px; }
  .ym-account-form > .buttons, .ym-account-content > .buttons { display: flex; flex-direction: column; }
  .ym-account-form .buttons .pull-left, .ym-account-form .buttons .pull-right { width: 100%; float: none !important; }
  .ym-account-content > .buttons .pull-left, .ym-account-content > .buttons .pull-right { width: 100%; float: none !important; }
  .ym-account-form > .buttons .pull-right, .ym-account-content > .buttons .pull-right { order: -1; }
  .ym-account-form .buttons .btn, .ym-account-content > .buttons .btn { width: 100%; margin: 4px 0; }
.ym-account-form .buttons .ym-account-agree { width: 100%; margin-right: 0; justify-content: flex-start; }
  .ym-social-access { padding: 14px; }
  .ym-social-access__head { align-items: flex-start; flex-direction: column; gap: 3px; }
  .ym-login-grid { margin-top: 14px; grid-template-columns: 1fr; gap: 12px; }
  .ym-login-card { padding: 20px 18px; }
  .ym-login-card h2 { font-size: 23px; }
  .ym-login-benefits { margin-block: 12px 14px; }
  .ym-login-card--new { padding-block: 18px; }
  .ym-login-card--new p { margin-bottom: 10px; }
  .ym-login-register { width: 100%; text-align: center; }
  .ym-account-table { border-radius: var(--ym-radius-sm); }
  .ym-account-table > .table { min-width: 620px; }
  .ym-account-table .btn { min-width: 44px; min-height: 44px; }
  .ym-account-table--cards { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .ym-account-table--cards > .table { min-width: 0; display: block; border: 0; background: transparent; }
  .ym-account-table--cards > .table > thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .ym-account-table--cards > .table > tbody { display: block; }
  .ym-account-table--cards > .table > tbody > tr { margin-bottom: 12px; padding: 8px 12px; display: block; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); background: #fff; box-shadow: var(--ym-shadow-sm); }
  .ym-account-table--cards > .table > tbody > tr > td { min-height: 44px; padding: 9px 0; display: grid; grid-template-columns: minmax(92px, 34%) minmax(0, 1fr); gap: 12px; align-items: center; border: 0; border-bottom: 1px solid #f3e9eb; text-align: left !important; overflow-wrap: anywhere; }
  .ym-account-table--cards > .table > tbody > tr > td:last-child { border-bottom: 0; }
  .ym-account-table--cards > .table > tbody > tr > td::before { content: attr(data-label); color: var(--ym-muted); font-size: 12px; font-weight: 800; }
  .ym-account-table--cards > .table > tbody > tr > td > * { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .ym-account-table--cards > .table > tbody > tr > td.ym-account-actions { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 8px; }
  .ym-account-table--cards .ym-account-actions::before { margin-right: auto; align-self: center; }
  .ym-account-table--cards .ym-account-actions .btn { width: auto !important; flex: 0 0 auto; }
  .ym-account-table--cards .ym-account-product-image img { max-width: 88px; height: auto; }
  .ym-account-address-list > .table > tbody > tr { padding: 15px; }
  .ym-account-address-list > .table > tbody > tr > td.ym-account-address { padding: 0 0 13px; display: block; font-size: 16px; line-height: 1.75; }
  .ym-account-address-list .ym-account-address::before { margin-bottom: 5px; display: block; }
  .ym-account-address-list .ym-account-address > div { padding-left: 1px; }
  .ym-account-address-list > .table > tbody > tr > td.ym-account-actions { padding-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ym-account-address-list .ym-account-actions::before { display: none; }
  .ym-account-address-list .ym-address-delete-form { width: 100%; }
  .ym-account-address-list .ym-account-actions .btn { width: 100% !important; }
  .ym-address-page-actions { display: flex; flex-direction: column; }
  .ym-address-page-actions .pull-right { order: -1; }
  .ym-account-wishlist-list > .table > tbody > tr { padding: 14px; display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "image name" "image price" "image stock" "image model" "actions actions"; column-gap: 14px; }
  .ym-account-wishlist-list > .table > tbody > tr > td { min-height: 34px; padding: 5px 0; grid-template-columns: 62px minmax(0, 1fr); gap: 6px; }
  .ym-account-wishlist-list > .table > tbody > tr > td.ym-wishlist-image { grid-area: image; padding: 0; display: block; align-self: start; border: 0; }
  .ym-account-wishlist-list .ym-wishlist-image::before { display: none; }
  .ym-account-wishlist-list .ym-wishlist-image a { width: 96px; height: 96px; display: grid; place-items: center; border: 1px solid #f0e4e7; border-radius: var(--ym-radius-sm); background: #fffafb; overflow: hidden; }
  .ym-account-wishlist-list .ym-wishlist-image img { width: 88px; height: 88px; max-width: none; object-fit: contain; }
  .ym-account-wishlist-list .ym-wishlist-name { grid-area: name; display: block; padding: 0 0 8px; font-size: 16px; font-weight: 800; line-height: 1.5; }
  .ym-account-wishlist-list .ym-wishlist-name::before { display: none; }
  .ym-account-wishlist-list .ym-wishlist-name a { display: -webkit-box; overflow: hidden; color: var(--ym-ink); -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .ym-account-wishlist-list .ym-wishlist-price { grid-area: price; }
  .ym-account-wishlist-list .ym-wishlist-stock { grid-area: stock; }
  .ym-account-wishlist-list .ym-wishlist-model { grid-area: model; border-bottom: 0; }
  .ym-account-wishlist-list > .table > tbody > tr > td.ym-wishlist-actions { grid-area: actions; margin-top: 9px; padding-top: 12px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; border-top: 1px solid #f3e9eb; }
  .ym-account-wishlist-list .ym-wishlist-actions::before { display: none; }
  .ym-account-wishlist-list .ym-wishlist-actions .btn { width: 100% !important; min-width: 0; display: inline-flex; align-items: center; justify-content: center; }
  .ym-account-wishlist-list .ym-action-label { margin-left: 7px; display: inline; }
  .ym-account-table--cards > .table > tbody > .ym-account-empty-row { padding: 24px 16px; }
  .ym-account-table--cards > .table > tbody > .ym-account-empty-row > td { min-height: 80px; display: flex; align-items: center; justify-content: center; border: 0; text-align: center !important; }
  .ym-account-table--cards > .table > tbody > .ym-account-empty-row > td::before { display: none; }
  .ym-cart-layout { display: block; }
  .cart-addon-module { margin-top: 18px; padding: 16px 12px; border-radius: var(--ym-radius-md); }
  .cart-addon-intro { margin-bottom: 14px; display: block; }
  .cart-addon-intro h2 { font-size: 20px; }
  .cart-addon-intro p { margin-top: 4px; max-width: none; text-align: left; }
  .cart-addon-module .addon-carousel-wrapper { display: block; }
  .cart-addon-module .addon-nav { display: none; }
  .cart-addon-module .addon-carousel { margin-right: -12px; padding-right: 12px; }
  .cart-addon-module .addon-carousel-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    width: max-content;
  }
  .cart-addon-module .addon-product-card {
    width: 148px;
    min-width: 148px;
    max-width: 148px;
    flex: 0 0 148px;
    min-height: 226px;
    padding: 8px;
    border-radius: 10px;
  }
  .cart-addon-module .addon-product-image {
    height: 96px;
  }
  .cart-addon-module .addon-product-name {
    height: 30px;
    font-size: 11.5px;
  }
  .cart-addon-module .addon-price-special {
    font-size: 12.5px;
  }
  .cart-addon-module select.addon-option-input {
    min-height: 26px;
    height: 26px;
    font-size: 11px;
  }
  .cart-addon-module .btn-addon-add {
    min-height: 29px;
    height: 29px;
    line-height: 29px;
    font-size: 11.5px;
  }
  .ym-cart-options { margin-top: 22px; }
  .ym-cart-options > h2 { font-size: 22px; }
  .ym-cart-summary { position: static; margin-top: 9px; padding: 14px; border-radius: var(--ym-radius-md); }
  .ym-cart-summary h2 { margin-bottom: 5px; font-size: 24px; }
  .ym-cart-summary__actions .btn-primary { display: inline-flex; }
  .ym-cart-summary__secure { display: none; }
  .route-checkout-cart .ym-mobile-dock { display: none; }
  /* [YM 2026-09-03] 商品詳情頁手機版滿版化：消除 Bootstrap 多層嵌套 padding，讓卡片與邊緣留白對齊全站 12px */
  .ym-v2 #product-product.container { padding-inline: 0; }
  .ym-v2 #product-product > .row { margin-inline: 0; }
  .ym-v2 #product-product #content { padding-inline: 0; }
  .ym-v2 #product-product .breadcrumb { padding-inline: 0; margin-inline: 0; margin-bottom: 8px; }
  .ym-v2 #product-product .ym-product-main { display: flex; flex-direction: column; margin-inline: 0; }
  .ym-v2 #product-product .ym-product-main > [class*="col-sm-"]:last-child,
  .ym-v2 #product-product .ym-product-summary { order: -1; position: static; margin: 0 0 16px; padding: 14px 12px; border-radius: var(--ym-radius-md); }
  .ym-v2 #product-product .ym-product-main > [class*="col-sm-"]:first-child,
  .ym-v2 #product-product .ym-product-gallery { order: 0; }
  .ym-v2 #product-product h1 { margin: 8px 0 6px; font-size: 22px; }
  .ym-v2 #product-product .ym-product-main > [class*="col-sm-"]:last-child #product,
  .ym-v2 #product-product .ym-product-summary #product { margin-top: 0; display: flow-root; }
  .ym-live-quote { margin-top: 8px; padding: 9px 12px; }
  .ym-live-quote__total strong { font-size: 21px; }
  .ym-v2 #product-product .ym-product-main > [class*="col-sm-"]:last-child::before,
  .ym-v2 #product-product .ym-product-summary::before { content: ""; width: auto; margin: -3px -1px 17px; display: block; aspect-ratio: 1 / 1; box-sizing: border-box; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-sm); background: #f8f5f3; }
  .ym-v2 #product-product .ym-product-main > [class*="col-sm-"]:last-child.ym-has-mobile-primary-image::before,
  .ym-v2 #product-product .ym-product-summary.ym-has-mobile-primary-image::before { display: none; }
  .ym-mobile-primary-image { margin: -14px -12px 12px; display: block; overflow: hidden; border-top-left-radius: var(--ym-radius-md); border-top-right-radius: var(--ym-radius-md); }
  .ym-mobile-primary-image .thumbnail { display: grid; place-items: center; aspect-ratio: 1 / 1; border: 0; border-radius: 0; padding: 0; }
  .ym-mobile-primary-image img { width: 100%; height: 100%; object-fit: contain; }
  .ym-v2 #product-product .ym-product-summary { position: relative; }
  /* ⚠ 2026-08-29：原本是 position:absolute; top:28px; right:28px，錨在 .ym-product-summary。
     促銷模組的 .islpr-alert 是購物車非空時由 JS 插進 summary 的第一個子節點（頂端 y 與容器同），
     所以圓鈕必然壓在公告上：實測 412 寬時 tools[271,251,93,44] 蓋住 close[328,235,44,44]，
     elementFromPoint(關閉鈕中心) 回傳的是分享鈕 —— 客人想關公告會跳出「複製商品連結」，
     被蓋住的還正好是「滿千折百／滿2千折250」這句拉客單價的文案。訪客只要加過購物車就中。
     改回正常流排列（右對齊），公告在 DOM 中位於圓鈕之前，結構上不可能再重疊。 */
  .ym-v2 #product-product .ym-product-summary > .btn-group { position: static; z-index: 3; margin: 0 0 2px; display: flex; justify-content: flex-end; gap: 6px; }
  .ym-v2 #product-product .ym-product-summary > .btn-group .btn { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; float: none; border: 1px solid rgba(210, 91, 117, .24); border-radius: 50%; color: var(--ym-coral-dark); background: rgba(255,255,255,.94); box-shadow: var(--ym-shadow-sm); backdrop-filter: blur(6px); }
  .ym-v2 #product-product .ym-product-gallery .thumbnails > li:first-child { display: none; }
  .ym-v2 #product-product .thumbnails { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
  .ym-product-details { margin-top: 18px; padding: 14px 12px 18px; border-radius: var(--ym-radius-md); }
  .ym-product-details .nav-tabs { justify-content: stretch; overflow: hidden; }
  .ym-product-details .nav-tabs > li { min-width: 0; flex: 1 1 0; }
  .ym-product-details .nav-tabs > li > a { min-width: 0; padding: 12px 8px; white-space: normal; }
  .ym-product-details .tab-content { padding-top: 18px; }
  .ym-product-details #tab-description.ym-description-collapsed { max-height: 620px; }
  .route-product-product .ym-mobile-dock { display: none; }
  body.route-product-product { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .ym-pdp-mobile-bar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 1085; min-height: calc(64px + env(safe-area-inset-bottom)); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(62px, .72fr) 1.14fr 1fr; gap: 7px; visibility: hidden; transform: translateY(110%); border-top: 1px solid var(--ym-line); background: rgba(255,255,255,.97); box-shadow: var(--ym-shadow-up); pointer-events: none; transition: transform .2s ease, visibility .2s ease; }
  .ym-pdp-mobile-bar.is-visible { visibility: visible; transform: none; pointer-events: auto; }
  .ym-pdp-mobile-price { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
  .ym-pdp-mobile-price small { color: var(--ym-muted); font-size: 10px; font-weight: 700; }
  .ym-pdp-mobile-price strong { overflow: hidden; color: var(--ym-coral-dark); font-size: 17px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
  /* Primary action must match the in-page buy box: cart solid, buy-now outlined. */
  .ym-pdp-mobile-bar button { border: 1px solid var(--ym-coral-strong); border-radius: var(--ym-radius-sm); color: var(--ym-coral-dark); background: #fff; font-weight: 900; }
  .ym-pdp-mobile-bar .ym-pdp-mobile-cart { color: #fff; background: var(--ym-coral-strong); }
  .ym-pdp-mobile-bar .ym-pdp-mobile-buy { color: var(--ym-coral-dark); background: var(--ym-blush); }
  .ym-pdp-mobile-price .ym-pdp-mobile-price-label { color: var(--ym-muted); font-size: 10px; font-weight: 700; }
  .ym-v2 .product-layout { width: 50%; float: left; padding-inline: 6px; margin-bottom: 12px; }
  .ym-v2 .product-thumb { border-radius: var(--ym-radius-sm); }
  .ym-v2 .product-thumb:hover { transform: none; }
  .ym-v2 .product-thumb .caption { min-height: 128px; padding: 11px 11px 7px; }
  .ym-v2 .product-thumb h4 { min-height: 42px; font-size: 13px; }
  .ym-v2 .product-thumb .price { min-height: 25px; font-size: 16px; }
  .ym-v2 .price-old { display: block; margin-left: 0; }
  .ym-v2 .product-thumb .button-group { grid-template-columns: minmax(0, 1fr) 44px; gap: 6px; padding: 0 8px 9px; }
  .ym-v2 .product-thumb .button-group button { height: 40px; }
  .ym-v2 .product-thumb .button-group button { min-height: 44px; height: auto; padding: 7px 5px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; line-height: 1.2; }
  .ym-v2 .product-thumb .button-group button:nth-child(2) { display: none; }
  .ym-v2 .product-thumb .button-group button:first-child span { display: inline !important; font-size: 12px; }
  .ym-footer { margin-top: 34px; }
  .ym-footer__trust { margin-bottom: 12px; }
  .ym-footer__body { padding: 20px 0 18px; }
  .ym-footer__grid { grid-template-columns: 1fr; gap: 0; }
  .ym-footer__brand { min-height: 52px; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; grid-column: 1 / -1; }
  .ym-footer__brand > strong { font-size: 20px; }
  .ym-footer__brand p { display: none; }
  .ym-footer__contact { min-height: 44px; padding: 8px 13px; }
  .ym-footer__links { border-top: 1px solid rgba(255,255,255,.12); }
  .ym-footer__grid .ym-footer__links h2 { margin: 0; }
  .ym-footer__toggle { min-height: 48px; cursor: pointer; }
  .ym-footer__toggle i { display: block; transition: transform .18s ease; }
  .ym-footer__toggle[aria-expanded="true"] i { transform: rotate(180deg); }
  .ym-footer__links ul { padding: 2px 2px 10px; }
  .ym-footer__links ul[hidden] { display: none !important; }
  .ym-footer__links li { margin: 0; }
  .ym-footer__links li a { min-height: 44px; display: flex; align-items: center; }
  .ym-footer__legal { text-align: center; }
  body.route-checkout-checkout,
  body[class*="route-account-"],
  body[class*="route-information-"] { padding-bottom: 0; }

  .ym-information-page, #information-contact { padding-bottom: 24px; }
  .ym-information-heading { padding: 19px 18px; border-radius: var(--ym-radius-md); }
  .ym-information-heading h1 { font-size: 29px; }
  .ym-information-card { padding: 19px 16px; border-radius: var(--ym-radius-md); }
  .ym-info-feature-grid, .ym-info-steps-grid { grid-template-columns: 1fr; }
  .ym-info-step-card { text-align: left; padding-left: 58px; }
  .ym-info-step-icon { position: absolute; top: 42px; left: 18px; margin: 0; font-size: 23px; }
  .ym-contact-card { padding: 18px; grid-template-columns: 1fr; border-radius: var(--ym-radius-md); }
  .ym-contact-brand { padding-bottom: 16px; border-bottom: 1px solid var(--ym-line); }
  .ym-contact-brand img { width: 190px; }
  .ym-contact-form-card { padding: 20px 16px; border-radius: var(--ym-radius-md); }
  .ym-contact-form-card .form-horizontal .control-label { padding-top: 0; text-align: left; }
  .ym-contact-form-card .buttons .pull-right { width: 100%; float: none !important; }
  .ym-contact-form-card .buttons .btn { width: 100%; }
  .ym-sitemap-layout { grid-template-columns: 1fr; gap: 18px; }
  .ym-sitemap-aside { position: static; }
  .ym-sitemap-section-heading { min-height: 62px; padding: 10px 14px; border-radius: var(--ym-radius-md); }
  .ym-sitemap-section-heading h2 { font-size: 19px; }
  .ym-sitemap-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ym-sitemap-card, .ym-sitemap-shortcuts { border-radius: var(--ym-radius-sm); }
  .ym-sitemap-card summary, .ym-sitemap-card--direct { min-height: 56px; padding: 10px 11px; font-size: 13px; }
  .ym-sitemap-shortcuts summary { min-height: 52px; padding: 10px 14px; }
  .ym-sitemap-card-body { padding: 0 11px 12px; }
  .ym-sitemap-child-title { min-height: 44px; }
  .ym-sitemap-grandchildren a { min-height: 40px; }
  .ym-sitemap-shortcuts nav { grid-template-columns: 1fr; gap: 6px; }
  .ym-social-access { padding: 15px; }
  .ym-social-access__head { display: block; }
  .ym-social-access__head small { margin-top: 2px; display: block; }
  .ym-social-access__providers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ym-social-access__providers .ym-login-line { grid-column: 1 / -1; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .ym-cart-layout { grid-template-columns: 1fr; }
  .ym-cart-summary { position: static; }
  .ym-v2 .product-thumb .button-group button,
  .ym-password-toggle,
  .ym-footer__toggle { min-width: 44px; min-height: 44px; }
}

.ym-search button,
.route-checkout-checkout .ve-btn { min-height: 44px; }
.route-checkout-checkout #button-coupon,
.route-checkout-checkout #button-voucher,
.route-checkout-checkout .coupon-voucher .input-group-btn .btn,
.route-checkout-checkout [class*="coupon"] .input-group-btn .btn,
.route-checkout-checkout [class*="coupon"] .input-group-btn .ve-btn,
.route-checkout-checkout [class*="voucher"] .input-group-btn .btn { min-width: 72px; white-space: nowrap; }
.route-checkout-checkout [class*="voucher"] .input-group-btn .ve-btn { min-width: 72px; white-space: nowrap; }
.route-checkout-checkout .qc .ve-btn--default { min-width: 72px; white-space: nowrap; }
.route-checkout-checkout .qc .ve-btn--hg.ve-pull-right { min-width: 168px; }

.ym-checkout-heading { margin: 0 0 20px; padding: 22px 24px; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); background: linear-gradient(120deg, #fff8f9, #fff); }
.ym-checkout-heading span { color: var(--ym-coral-dark); font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.ym-checkout-heading h1 { margin: 5px 0 4px; font-size: clamp(26px, 4vw, 38px); }
.ym-checkout-heading p { margin: 0; color: var(--ym-muted); }
.route-checkout-checkout .qc-loader { position: fixed; top: 76px; left: 50%; z-index: 2100; min-width: 190px; max-width: calc(100vw - 32px); padding: 11px 18px; visibility: hidden; opacity: 0; transform: translate(-50%, -8px); border: 1px solid rgba(255,255,255,.28); border-radius: var(--ym-radius-pill); color: #fff; background: #4b363d; box-shadow: var(--ym-shadow-md); font-size: 13px; font-weight: 800; text-align: center; pointer-events: none; transition: opacity .16s ease, transform .16s ease, visibility .16s ease; }
.route-checkout-checkout .qc-loader.ym-loader-visible { visibility: visible; opacity: 1; transform: translate(-50%, 0); }
.route-checkout-checkout:not(.ym-checkout-home-mode) #payment_address_fields > [field_id="heading"],
.route-checkout-checkout:not(.ym-checkout-home-mode) #payment_address_fields > [field_id="company"],
.route-checkout-checkout:not(.ym-checkout-home-mode) #payment_address_fields > [field_id="address_1"],
.route-checkout-checkout:not(.ym-checkout-home-mode) #payment_address_fields > [field_id="address_2"],
.route-checkout-checkout:not(.ym-checkout-home-mode) #payment_address_fields > [field_id="city"],
.route-checkout-checkout:not(.ym-checkout-home-mode) #payment_address_fields > [field_id="postcode"],
.route-checkout-checkout:not(.ym-checkout-home-mode) #payment_address_fields > [field_id="country_id"],
.route-checkout-checkout:not(.ym-checkout-home-mode) #payment_address_fields > [field_id="zone_id"],
.route-checkout-checkout:not(.ym-checkout-home-mode) #payment_address_fields > [field_id="shipping_address"],
.route-checkout-checkout:not(.ym-checkout-home-mode) #payment_address_fields .tw-district-group { display: none !important; }
.route-checkout-checkout:not(.ym-checkout-home-mode).ym-checkout-cvs-zone-needed #payment_address_fields > [field_id="zone_id"] { display: block !important; }
.ym-checkout-cvs-contact-hint { margin: 4px 0 2px; padding: 11px 12px; display: flex; align-items: center; gap: 10px; clear: both; border: 1px solid #cce8dc; border-radius: var(--ym-radius-sm); color: #24674e; background: #f2fbf7; }
.ym-checkout-cvs-contact-hint i { flex: 0 0 auto; font-size: 18px; }
.ym-checkout-cvs-contact-hint span { min-width: 0; display: grid; gap: 2px; }
.ym-checkout-cvs-contact-hint strong { font-size: 13px; }
.ym-checkout-cvs-contact-hint small { color: #4d7666; font-size: 11px; line-height: 1.4; }
.route-checkout-checkout .ym-checkout-disclosure {
  width: 100%;
  min-height: 48px;
  margin: 2px 0 11px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #ead8dc;
  border-radius: var(--ym-radius-sm);
  color: var(--ym-coral-dark);
  background: #fff8f9;
  text-align: left;
}
.route-checkout-checkout .ym-checkout-disclosure span { min-width: 0; display: grid; line-height: 1.3; }
.route-checkout-checkout .ym-checkout-disclosure strong { font-size: 14px; }
.route-checkout-checkout .ym-checkout-disclosure small { color: var(--ym-muted); font-size: 11px; font-weight: 600; }
.route-checkout-checkout .ym-checkout-disclosure i { transition: transform .18s ease; }
.route-checkout-checkout .ym-checkout-disclosure--open i { transform: rotate(180deg); }
.route-checkout-checkout .ym-checkout-optional:not(.ym-checkout-optional--open) { display: none !important; }

.route-checkout-checkout .ym-footer { margin-top: 28px; }
.route-checkout-checkout .ym-footer__trust { margin-bottom: 0; padding: 12px 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--ym-radius-md); }
.route-checkout-checkout .ym-footer__trust > div:nth-child(1),
.route-checkout-checkout .ym-footer__trust > div:nth-child(4) { display: none; }
.route-checkout-checkout .ym-footer__body { padding: 14px 0; }
.route-checkout-checkout .ym-footer__grid { display: block; }
.route-checkout-checkout .ym-footer__grid > section:not(.ym-footer__brand) { display: none; }
.route-checkout-checkout .ym-footer__brand { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.route-checkout-checkout .ym-footer__brand > strong { font-size: 18px; }
.route-checkout-checkout .ym-footer__brand p { display: none; }
.route-checkout-checkout .ym-footer__legal { padding: 10px 0; }
@media (max-width:767px) { .ym-checkout-heading { margin-bottom: 14px; padding: 17px 16px; border-radius: var(--ym-radius-md); } 
}
@media (max-width:767px) {
  .route-checkout-checkout .qc-loader { top: calc(72px + env(safe-area-inset-top)); min-width: 172px; padding: 10px 15px; }
  .ym-checkout-cvs-contact-hint { margin-top: 2px; padding: 10px 11px; }
  .route-checkout-checkout .qc .ve-btn--hg.ve-pull-right { width: 100%; min-width: 0; margin-top: 8px; }
  .route-checkout-checkout .ym-footer__trust { padding: 10px 12px; gap: 8px; }
  .route-checkout-checkout .ym-footer__trust > div { justify-content: center; }
  .route-checkout-checkout .ym-footer__body { padding: 12px 0; }
  .route-checkout-checkout .ym-footer__brand { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.ym-cvs-payment {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--ym-border, #eadfdd);
  border-radius: var(--ym-radius-md);
  background: #fff;
}
.ym-cvs-payment__heading { display: flex; align-items: flex-start; gap: 12px; }
.ym-cvs-payment__heading h4 { margin: 0 0 4px; font-size: 18px; }
.ym-cvs-payment__heading p { margin: 0; color: #75686a; line-height: 1.5; }
.ym-cvs-payment__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; color: #a83f57; background: #fff0f3; }
.ym-cvs-payment__notice { display: grid; gap: 3px; margin: 14px 0; padding: 11px 13px; border-radius: var(--ym-radius-sm); color: #665a5c; background: #fff7f5; }
.ym-cvs-payment__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ym-cvs-payment__field { display: grid; gap: 7px; margin: 0; font-weight: 700; }
.ym-cvs-payment__field em { color: #c23d58; font-style: normal; }
.ym-cvs-payment__field input { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #dfd3d1; border-radius: var(--ym-radius-xs); background: #fff; font-size: 16px; font-weight: 400; }
.ym-cvs-payment__field input:focus { border-color: #c94c67; outline: 3px solid rgba(201, 76, 103, .14); }
.ym-cvs-payment__field small { color: #7b6f71; font-weight: 400; line-height: 1.4; }
.ym-cvs-payment__actions { margin-top: 12px; }
.route-checkout-checkout.ym-checkout-cvs-mode .ym-cvs-payment { margin-top: 10px; padding: 10px 12px; border-color: #cfe7da; background: #f3fbf7; }
.route-checkout-checkout.ym-checkout-cvs-mode .ym-cvs-payment__heading,
.route-checkout-checkout.ym-checkout-cvs-mode .ym-cvs-payment__notice { display: none; }
.route-checkout-checkout.ym-checkout-cvs-mode .ym-cvs-payment__form { display: block; }
.route-checkout-checkout.ym-checkout-cvs-mode .ym-cvs-payment__recipient { min-height: 44px; padding: 8px 10px; border: 0; background: transparent; }
@media (max-width: 767px) {
  .ym-cvs-payment { margin-top: 12px; padding: 15px; }
  .ym-cvs-payment__form { grid-template-columns: 1fr; }
  .ym-cvs-payment__actions .pull-right { float: none !important; width: 100%; }
}

/* Cross-page usability pass. */
.ym-required-marker { margin-left: 7px; padding: 2px 6px; display: inline-block; border-radius: var(--ym-radius-pill); color: #a52f49; background: #fff0f3; font-size: 12px; font-weight: 900; vertical-align: 1px; }
.ym-password-toggle { min-width: 88px; min-height: 44px; margin-top: 7px; padding: 7px 11px; border: 1px solid #928589; border-radius: var(--ym-radius-xs); color: var(--ym-coral-dark); background: #fff; font-size: 12px; font-weight: 800; }
.ym-password-toggle:focus-visible { outline: 3px solid rgba(237, 134, 148, .28); outline-offset: 2px; }
.ym-table-scroll-hint { margin: 10px 0 5px; color: var(--ym-muted); font-size: 12px; font-weight: 800; }
.ym-table-scroll-hint i { margin-right: 6px; color: var(--ym-coral-dark); }
.ym-info-table-wrap:focus-visible { outline: 3px solid rgba(237, 134, 148, .32); outline-offset: 3px; }
.ym-cart-menu__items .ym-mini-product > button { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
.ym-cart-addon-placement { min-width: 0; }
.route-checkout-checkout #d_quickcheckout .ve-checkbox { min-height: 44px; display: flex; align-items: center; }
.route-checkout-checkout #d_quickcheckout .ve-checkbox > span { min-height: 44px; display: inline-flex; align-items: center; flex-wrap: wrap; }
.route-checkout-checkout #d_quickcheckout a.agree { min-height: 44px; display: inline-flex; align-items: center; }
.ym-checkout-field-error { margin-top: 6px; }
.ym-empty-hot { margin: 15px 0 6px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ym-empty-hot strong { width: 100%; color: var(--ym-muted); font-size: 12px; }
.ym-empty-hot a { min-height: 44px; padding: 9px 13px; display: inline-flex; align-items: center; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-pill); color: var(--ym-coral-dark); background: #fff; font-weight: 800; }
.ym-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
/* padding-bottom：原本容器底緣就等於 chip 底緣（量到皆 535），
   下一個區塊的分隔線緊貼著 chip，看起來像壓在線上。 */
.ym-product-options { padding-bottom: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ym-product-options > hr, .ym-product-options > h3 { width: 100%; grid-column: 1 / -1; }
.ym-product-options > hr { margin: 10px 0 0; }
.ym-product-options > h3 { margin: 0 0 2px; }
.ym-product-options .ym-product-option { min-width: 0; margin: 0; }
.ym-product-options .ym-product-option--radio,
.ym-product-options .ym-product-option--checkbox,
.ym-product-options .ym-product-option--textarea,
.ym-product-options .ym-product-option--file { grid-column: 1 / -1; }
.ym-option-compact-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 8px; }
.ym-option-compact-control .form-control { width: 100%; min-height: 48px; }
.ym-option-count { min-width: 68px; min-height: 48px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #efd8dd; border-radius: var(--ym-radius-sm); color: var(--ym-coral-dark); background: var(--ym-blush); font-size: 12px; font-weight: 900; white-space: nowrap; }
.ym-option-helper { margin: 7px 0 0; color: var(--ym-muted); font-size: 12px; line-height: 1.5; }
.ym-product-lightbox { touch-action: pan-y; }
.ym-mobile-primary-image { position: relative; }
.ym-product-image-count { position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: 5px 9px; border-radius: var(--ym-radius-pill); color: #fff; background: rgba(45, 35, 39, .76); font-size: 11px; font-weight: 900; pointer-events: none; }
.ym-return-shortcut a { margin-inline: 4px; font-weight: 900; text-decoration: underline; }
.ym-v2 .cl-product__name { min-height: 44px; }
.ym-v2 .cl-button--primary { border-radius: var(--ym-radius-sm); background: var(--ym-coral-strong); color: #fff; }
.ym-v2 .cl-button--primary:hover, .ym-v2 .cl-button--primary:focus { background: var(--ym-coral-dark); color: #fff; }
.ym-v2 .cl-overview-card__banner { min-height: 0; aspect-ratio: 4 / 1; }
.ym-v2 .cl-overview-card__banner picture { width: 100%; height: 100%; display: block; }
.ym-v2 .cl-overview-card__banner img { width: 100%; height: 100%; max-height: none; }

@media (max-width: 767px) {
  .ym-v2 .cl-overview-card__banner { aspect-ratio: 3 / 1; }
  .ym-mobile-nav[aria-hidden="true"] .ym-nav__dropdown { visibility: hidden; }
  .ym-menu-open .ym-mobile-nav .ym-nav__dropdown { visibility: visible; }
  .ym-search { min-height: 44px; }  /* height 由內容決定，見上方註解 */
  #ym-search-input { min-height: 44px; }
  .ym-search-suggest__terms a,
  .ym-pagination .pagination > li > a,
  .ym-pagination .pagination > li > span,
  .cl-button,
  .ym-contact-method a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; }
  .ym-subcategories a,
  .ym-mobile-nav__footer a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .ym-v2 .breadcrumb a { min-height: 28px; display: inline-flex; align-items: center; padding: 2px 4px; }
  .ym-subcategories a { padding: 8px 12px; font-size: 12px; }
  .ym-v2 #product-product nav[aria-label="麵包屑"] { overflow: visible; }
  .ym-v2 #product-product .breadcrumb {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: none;
    margin-bottom: 8px;
    padding-bottom: 4px;
  }
  .ym-v2 #product-product .breadcrumb::-webkit-scrollbar { display: none; }
  .ym-v2 #product-product .breadcrumb > li { min-width: 0; flex: 0 0 auto; display: inline-flex; align-items: center; }
  .ym-v2 #product-product .breadcrumb > li a { font-size: 12.5px; color: var(--ym-muted); }
  .ym-v2 #product-product .breadcrumb > li:last-child {
    flex: 0 0 auto;
    max-width: 240px;
  }
  .ym-v2 #product-product .breadcrumb > li:last-child a {
    color: var(--ym-ink);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ym-product-card .button-group button { min-width: 44px; }
  .ym-login-forgotten,
  .ym-account-form .agree a { min-height: 44px; display: inline-flex; align-items: center; }
  .ym-password-toggle { min-height: 44px; }
  .ym-info-table-wrap { position: relative; box-shadow: inset -16px 0 18px -18px rgba(68, 46, 52, .55); }
  .ym-product-options { gap: 10px; }
  .ym-v2 #product-product #product .form-group.has-error { scroll-margin-top: 128px; }
  body.route-checkout-cart { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

  .ym-account-table--stack { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .ym-account-table--stack > .table { min-width: 0; display: block; border: 0; }
  .ym-account-table--stack > .table > thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .ym-account-table--stack > .table > tbody,
  .ym-account-table--stack > .table > tbody > tr { display: block; }
  .ym-account-table--stack > .table > tbody > tr { padding: 8px 14px; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); background: #fff; box-shadow: var(--ym-shadow-sm); }
  .ym-account-table--stack > .table > tbody > tr > td { width: auto !important; min-height: 44px; padding: 10px 0; display: grid; grid-template-columns: minmax(100px, 34%) minmax(0, 1fr); gap: 12px; border: 0; border-bottom: 1px solid #f3e9eb; overflow-wrap: anywhere; }
  .ym-account-table--stack > .table > tbody > tr > td::before { content: attr(data-label); color: var(--ym-muted); font-size: 12px; font-weight: 900; }
  .ym-account-table--stack > .table > tbody > tr > td:last-child { border-bottom: 0; }

  .ym-order-products > .table > tfoot { display: block; margin-top: 10px; padding: 9px 14px; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-md); background: #fff8f9; }
  .ym-order-products > .table > tfoot > tr { min-height: 38px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
  .ym-order-products > .table > tfoot > tr > td { padding: 7px 0; display: block; border: 0; }
  .ym-order-products .ym-order-total-spacer,
  .ym-order-products > .table > tfoot > tr > td:last-child:empty { display: none; }
  .ym-order-products .ym-order-total-title { text-align: left !important; }
  .ym-order-products .ym-order-total-value { color: var(--ym-coral-dark); font-weight: 900; text-align: right !important; }
}

@media (max-width: 420px) {
  .ym-product-options { grid-template-columns: 1fr; }
  .ym-product-options .ym-product-option { grid-column: 1; }
}
.ym-address-delete-form { display: inline-block; margin: 0; vertical-align: middle; }

/* 缺圖 fallback 不得以 SVG 原始尺寸撐開版面（描述內嵌圖 404 時曾出現 14 張 960×960 佔位圖） */
.ym-image-fallback { max-width: 100%; max-height: 200px; width: auto !important; height: auto !important; object-fit: contain; opacity: .5; }
.ym-product-details .ym-image-fallback,
#tab-description .ym-image-fallback { display: block; margin: 8px auto; max-height: 128px; }

/* 商品選項 radio 改橫向 chips：原本每個色系各佔一行，四個選項就吃掉 268px 把加車鈕推出首屏 */
.ym-v2 #product-product #product .ym-product-option--radio > div[id^="input-option"] { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ym-v2 #product-product #product .ym-product-option--radio .radio { margin: 0; padding: 0; }
.ym-v2 #product-product #product .ym-product-option--radio .radio label { min-height: 40px; margin: 0; padding: 8px 12px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #efd8dd; border-radius: var(--ym-radius-sm); background: #fff; font-size: 13px; font-weight: 700; line-height: 1.35; cursor: pointer; }
.ym-v2 #product-product #product .ym-product-option--radio .radio label:hover { border-color: var(--ym-coral-strong); }
.ym-v2 #product-product #product .ym-product-option--radio .radio input[type="radio"] { position: static; margin: 0; }
.ym-v2 #product-product #product .ym-product-option--radio .radio small { display: block; width: 100%; color: var(--ym-muted); font-size: 12px; font-weight: 600; }
.ym-v2 #product-product #product .ym-product-option--radio .ym-option-unavailable label { opacity: .5; cursor: not-allowed; }

/* ============================================================
   破版統一修正（2026-08-28 視覺稽核）
   ============================================================ */

/* [P1] 首頁／側欄殘留的空 slideshow 容器：0 張 slide 但仍渲染 8px 高條與左右導覽箭頭
   （桌機箭頭跑到 viewport 外 -16px / 1382px，手機是兩個大灰箭頭浮在空白上）。
   用 :has() 只在「沒有任何 slide」時隱藏，日後補上 banner 會自動恢復。 */
#common-home > .swiper-viewport:not(:has(.swiper-slide)),
#column-left > .swiper-viewport:not(:has(.swiper-slide)) { display: none; }

/* [P2] 分類頁桌機：側欄比商品區矮 1400~1700px，左欄整條大片空白。改 sticky 跟著捲。 */
@media (min-width: 992px) {
  .ym-catalog-sidebar {
    position: sticky;
    /* 桌機 sticky header 卡住時實測高 137px，top 必須大於它否則側欄頂端會鑽進 header 底下 */
    top: 149px;
    align-self: start;
    max-height: calc(100vh - 170px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .ym-catalog-sidebar::-webkit-scrollbar { width: 6px; }
  .ym-catalog-sidebar::-webkit-scrollbar-thumb { border-radius: var(--ym-radius-pill); background: #e7d5d9; }
}

/* [P1] 首頁底部 legacy「服務保證」區（inline <style> 的 display:table 版型）在手機被壓成
   一字一行的直排。inline <style> 在 ym-v2.css 之後載入且特異度 (0,4,0)，因此這裡用
   .ym-v2 前綴把特異度提到 (0,5,0) 取勝，不用 !important。 */
@media (max-width: 767px) {
  .ym-v2 .services-home { margin-bottom: 14px; }
  .ym-v2 .services-home .banner-policy {
    width: auto;
    margin: 12px 14px 0;
    font-size: 100%;
    border-radius: var(--ym-radius-md);
  }
  .ym-v2 .services-home .banner-policy .inner {
    padding: 12px 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 8px;
  }
  .ym-v2 .services-home .banner-policy .inner .policy {
    width: auto;
    padding: 4px 2px;
    float: none;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.35;
    border-right: 0;
  }
  .ym-v2 .services-home .banner-policy .inner .policy em {
    width: 30px;
    display: block;
    flex: 0 0 auto;
    font-size: 25px;
    line-height: 1;
  }
  .ym-v2 .services-home .banner-policy .inner .policy span {
    width: auto;
    min-width: 0;
    padding-left: 0;
    display: block;
    font-size: 12.5px;
    text-transform: none;
  }
}

/* ============================================================
   角色驗收修正（2026-08-28 PM／UI-UX／業務團隊驗收）
   每條都標 [議題]，說明「為什麼」而不只是「改了什麼」。
   ============================================================ */

/* ---------- [字級] 五階字級量表 ----------
   驗收實測全站 9 種 H1、商品頁 H2(30px) 比 H1(27.32px) 大。
   先把量表寫成 token，標題只引用 token，不再各自 clamp 出碎值。 */
.ym-v2 {
  --ym-fs-1: 40px;   /* 頁面主標 H1 */
  --ym-fs-2: 30px;   /* 區塊主標 */
  --ym-fs-3: 24px;   /* 區塊次標 / 卡片標題 */
  --ym-fs-4: 19px;   /* 小節標題 */
  --ym-fs-5: 15px;   /* 內文 */
}

/* 商品頁 H1 必須大於同頁區塊標題，否則資訊層級是反的 */
.ym-v2 #product-product h1 { font-size: clamp(24px, 2.3vw, var(--ym-fs-2)); }
/* 「推薦套組／適用加購／其他人也買／最近瀏覽」原本 30px 與 H1 打架，
   降到第三階與「相關商品」(24px) 對齊 */
.ym-v2 .ym-commerce__heading h2 { font-size: var(--ym-fs-3); }
/* 購物車「下一步您想要做什麼？」24px 與加購區 23px 只差 1px，統一同階 */
.ym-v2 .ym-cart-options > h2,
.ym-v2 .ym-cart-addon-placement h2 { font-size: var(--ym-fs-3); }
/* 靜態資訊頁 h3=16.5px、h4=14px 都比內文 15px 小，讀起來像壞掉 */
.ym-v2 .ym-information-card h3 { font-size: var(--ym-fs-4); }
.ym-v2 .ym-information-card h4 { font-size: 16px; }
/* 評論區標題併回量表 */
.ym-v2 .ymr-title { font-size: var(--ym-fs-3); }
.ym-v2 .ym-reviews:has(.ymr-empty) .ymr-title { font-size: var(--ym-fs-4); }

/* ---------- [訂單詳情表格] 同購物車病灶 ----------
   表頭「數量」被壓成「數／量」兩行、售價欄斷行。 */
@media (min-width: 768px) {
  .ym-order-products > .table.table-bordered { border: 0; }
  .ym-order-products > .table.table-bordered > thead > tr > td,
  .ym-order-products > .table.table-bordered > tbody > tr > td,
  .ym-order-products > .table.table-bordered > tfoot > tr > td { border-left: 0; border-right: 0; }
  .ym-order-products > .table > thead > tr > td:nth-child(n+3),
  .ym-order-products > .table > tbody > tr > td:nth-child(n+3),
  .ym-order-products > .table > tfoot > tr > td { white-space: nowrap; }
  .ym-order-products > .table > thead > tr > td:nth-child(4),
  .ym-order-products > .table > thead > tr > td:nth-child(5) { min-width: 104px; }
  .ym-order-products > .table > thead > tr > td:nth-child(3) { min-width: 64px; }
}

/* ---------- [訂單記錄] 天藍 btn-info + 狀態零視覺權重 ----------
   一頁出現 10 顆 Bootstrap #5bc0de，與珊瑚色主題毫無關係；
   最該被掃視的「狀態」卻是純灰文字。 */
.ym-v2 .ym-account-actions .btn-info {
  min-width: 72px;
  color: var(--ym-coral-dark) !important;
  border-color: #e8c8cf;
  border-radius: var(--ym-radius-sm);
  background: #fff;
}
.ym-v2 .ym-account-actions .btn-info:hover,
.ym-v2 .ym-account-actions .btn-info:focus {
  color: #fff !important;
  border-color: var(--ym-coral-strong);
  background: var(--ym-coral-strong);
}
.ym-order-status {
  padding: 5px 11px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--ym-radius-pill);
  color: #5b5155;
  background: #f1ebec;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}
.ym-order-status--pending { color: var(--ym-warning); background: #fdf0e4; }
.ym-order-status--shipped { color: var(--ym-success); background: #e6f3ee; }
.ym-order-status--done { color: #3f5578; background: #e9eef7; }
.ym-order-status--void { color: #8a6d72; background: #f2ecee; }

/* ---------- [登入/註冊] 「顯示密碼」長得像空輸入框 ----------
   88×44 白底圓角外框按鈕就貼在密碼欄正下方、與密碼欄左緣切齊，
   使用者會以為那是另一個要填的欄位（註冊頁還連著出現兩個）。
   改成疊在密碼欄右側的眼睛圖示鈕：用負 margin 把它拉回輸入框內，
   再用等量 margin-bottom 補回流排版（不必 :has()，全瀏覽器可用）。
   圖示走 SVG data-uri，不依賴被子集化過的 FontAwesome woff2。 */
/* [YM 2026-08-31] 觸控靶要 44×44。
   原本 40×36 在手機低於 WCAG 2.5.5 / iOS HIG 的最小觸控尺寸，
   92-member-pages-audit 在 mobile-chrome 抓到三個（變更密碼頁有三個密碼欄）。
   負 margin 同步從 -40px 調成 -44px，才不會把按鈕推出輸入框。 */
.ym-password-toggle {
  position: relative;
  z-index: 2;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  margin: -44px 4px 4px auto;
  padding: 0;
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: var(--ym-radius-xs);
  color: transparent;
  font-size: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 21px 21px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23766d70' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M1.6 12S5.5 5 12 5s10.4 7 10.4 7-3.9 7-10.4 7S1.6 12 1.6 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.ym-password-toggle[aria-pressed="true"] {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c54862' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M1.6 12S5.5 5 12 5s10.4 7 10.4 7-3.9 7-10.4 7S1.6 12 1.6 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3.5 20.5 20.5 3.5'/%3E%3C/svg%3E");
}
.ym-password-toggle:hover { background-color: #f7eff1; }
/* 登入卡的 input 是 48px（其他頁 44px），多退 2px 讓圖示垂直置中 */
.ym-login-card .ym-password-toggle { margin-top: -42px; margin-bottom: 6px; }
/* 密碼字元不要跑到圖示底下 */
.ym-v2 input[data-ym-password-toggle="1"] { padding-right: 48px; }
/* 「忘記密碼」原本是沒有連結樣式的純文字 */
.ym-v2 .ym-login-forgotten { color: var(--ym-coral-strong); text-decoration: underline; text-underline-offset: 3px; }
.ym-v2 .ym-login-forgotten:hover,
.ym-v2 .ym-login-forgotten:focus { color: var(--ym-coral-dark); }

/* ---------- [表單送出鈕] 寬度 70px~397px、文案五種、位置三種 ----------
   統一：主要送出鈕最小 160px、48px 高。 */
.ym-v2 .ym-account-form input[type="submit"],
.ym-v2 .ym-account-page .buttons .btn-primary,
.ym-v2 .ym-account-page .buttons input[type="submit"],
.ym-v2 #information-contact .buttons .btn-primary,
.ym-v2 #information-contact .buttons input[type="submit"] {
  min-width: 160px;
  min-height: 48px;
}

/* ---------- [會員中心] 卡片寬度 443/900/443/443、欄數 2/3/2/2 ----------
   同一頁四張卡三種寬度兩種欄數，看起來像沒對齊的草稿。
   全部拉成等寬三欄、連結一律單欄，先把「一致」做到。 */
@media (min-width: 992px) {
  #account-account .ym-account-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  #account-account .ym-account-card--wide { grid-column: auto; }
  /* 四張卡的連結清單原本 2 / 3 / 2 / 2 欄各不相同，全部收成單欄才看得出是同一組 */
  #account-account .ym-account-links { grid-template-columns: 1fr; }
}

/* ---------- [首頁活動卡] 疊字壓在已含文字的 banner 上 ----------
   banner 圖自己已有大標＋副標，程式又疊一層白字，兩層文字互相重疊；
   而且 1200px 的圖被縮到 404px，圖內副標小到不可讀。
   改兩欄讓卡片寬度加倍，疊層只留右下角一顆「立即逛活動」膠囊。 */
@media (min-width: 768px) {
  .ym-campaign-showcase__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 奇數張時最後一張橫跨整列，避免右邊留一格空白 */
  .ym-campaign-showcase__rail > .ym-campaign-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.ym-campaign-card--image > span {
  inset: auto 10px 10px auto;
  padding: 7px 13px;
  border-radius: var(--ym-radius-pill);
  background: rgba(40, 24, 30, .74);
}
.ym-campaign-card--image small { font-size: 12px; }

/* ---------- [分類頁系列橫幅：保留原圓形情境圖，建立一致的品牌入口] ---------- */
.ym-category-hero {
  --ym-cat-accent: #a9475c;
  --ym-cat-accent-soft: #e5b5bf;
  --ym-cat-surface: #fff7f3;
  position: relative;
  isolation: isolate;
  min-height: 236px;
  margin: 18px 0 14px;
  padding: 28px 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: center;
  gap: 26px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ym-cat-accent-soft) 45%, #fff);
  border-radius: 26px;
  background:
    radial-gradient(circle at 88% 10%, rgba(255,255,255,.88) 0 7%, transparent 7.5%),
    radial-gradient(circle at 12% 120%, color-mix(in srgb, var(--ym-cat-accent-soft) 34%, transparent) 0 30%, transparent 30.5%),
    linear-gradient(125deg, #fffdf9 0%, var(--ym-cat-surface) 54%, color-mix(in srgb, var(--ym-cat-accent-soft) 38%, #fff) 100%);
  box-shadow: 0 14px 38px rgba(85, 48, 57, .08);
}
.ym-category-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .32;
  pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--ym-cat-accent) 32%, transparent) .7px, transparent .7px);
  background-size: 13px 13px;
  mask-image: linear-gradient(90deg, transparent, #000 55%, #000);
}
.ym-category-hero__content { position: relative; z-index: 2; max-width: 660px; }
.ym-category-hero__breadcrumb .breadcrumb {
  margin: 0 0 17px;
  padding: 0;
  background: transparent;
  font-size: 12px;
}
.ym-category-hero__breadcrumb .breadcrumb > li + li::before { color: color-mix(in srgb, var(--ym-cat-accent) 52%, #88797d); }
.ym-category-hero__breadcrumb a { color: #776b6e; }
.ym-category-hero__eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--ym-cat-accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
}
.ym-category-hero h1 {
  margin: 0;
  color: #302428;
  font-size: clamp(31px, 3.2vw, 43px);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.14;
}
.ym-category-hero__lead {
  max-width: 36em;
  margin: 11px 0 15px;
  color: #65595c;
  font-size: 15px;
  line-height: 1.65;
}
.ym-category-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ym-category-hero__meta span {
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  color: #54474b;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(64, 38, 45, .04);
}
.ym-category-hero__visual {
  position: relative;
  width: 262px;
  height: 210px;
  justify-self: center;
  display: grid;
  place-items: center;
}
.ym-category-hero__orbit {
  position: absolute;
  width: 226px;
  height: 226px;
  border: 1px solid color-mix(in srgb, var(--ym-cat-accent) 25%, #fff);
  border-radius: 50%;
}
.ym-category-hero__orbit::before,
.ym-category-hero__orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--ym-cat-accent);
}
.ym-category-hero__orbit::before { top: 20px; right: 6px; width: 9px; height: 9px; opacity: .52; }
.ym-category-hero__orbit::after { bottom: 15px; left: 15px; width: 14px; height: 14px; opacity: .18; }
.ym-category-hero__portrait {
  position: relative;
  z-index: 1;
  width: 196px;
  height: 196px;
  margin: 0;
  overflow: hidden;
  border: 7px solid rgba(255,255,255,.94);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 18px 38px rgba(69, 39, 47, .18), 0 2px 0 rgba(255,255,255,.9) inset;
}
.ym-category-hero__portrait img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
}
.ym-category-hero__badge {
  position: absolute;
  right: 2px;
  bottom: 6px;
  z-index: 2;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ym-cat-accent) 88%, #fff);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--ym-cat-accent) 24%, transparent);
}
.ym-category-hero--kitchen { --ym-cat-accent: #a95443; --ym-cat-accent-soft: #ddad9f; --ym-cat-surface: #fff5ef; }
.ym-category-hero--storage { --ym-cat-accent: #687961; --ym-cat-accent-soft: #bdcab5; --ym-cat-surface: #f5f8f1; }
.ym-category-hero--stationery { --ym-cat-accent: #a55f79; --ym-cat-accent-soft: #dfb8c6; --ym-cat-surface: #fff5f8; }
.ym-category-hero--bathroom { --ym-cat-accent: #557d79; --ym-cat-accent-soft: #b6d1cc; --ym-cat-surface: #f3faf8; }
.ym-category-hero--travel { --ym-cat-accent: #5e7565; --ym-cat-accent-soft: #b9c8bc; --ym-cat-surface: #f4f8f2; }
.ym-category-hero--living { --ym-cat-accent: #937052; --ym-cat-accent-soft: #d5bea7; --ym-cat-surface: #faf5ee; }
.ym-category-hero--pets { --ym-cat-accent: #ad6b75; --ym-cat-accent-soft: #dfbdc1; --ym-cat-surface: #fff6f5; }
.ym-category-hero--seasonal { --ym-cat-accent: #a34759; --ym-cat-accent-soft: #e2b2bc; --ym-cat-surface: #fff5f3; }

@media (max-width: 767px) {
  .ym-category-hero {
    min-height: 184px;
    margin: 10px 0 12px;
    padding: 16px;
    grid-template-columns: minmax(0, 1fr) 122px;
    gap: 8px;
    border-radius: 19px;
  }
  .ym-category-hero::after { opacity: .2; }
  .ym-category-hero__breadcrumb .breadcrumb { margin-bottom: 12px; font-size: 10px; }
  .ym-category-hero__eyebrow { margin-bottom: 5px; font-size: 9px; letter-spacing: .14em; }
  .ym-category-hero h1 { font-size: clamp(25px, 7.4vw, 31px); }
  .ym-category-hero__lead { margin: 7px 0 11px; font-size: 12px; line-height: 1.5; }
  .ym-category-hero__meta { gap: 5px; }
  .ym-category-hero__meta span { padding: 5px 8px; font-size: 10px; }
  .ym-category-hero__meta span + span { display: none; }
  .ym-category-hero__visual { width: 122px; height: 132px; }
  .ym-category-hero__orbit { width: 124px; height: 124px; }
  .ym-category-hero__portrait { width: 108px; height: 108px; border-width: 5px; }
  .ym-category-hero__badge { right: -4px; bottom: 3px; padding: 5px 8px; font-size: 9px; }
}

@media (max-width: 390px) {
  .ym-category-hero { grid-template-columns: minmax(0, 1fr) 104px; padding: 14px 12px; }
  .ym-category-hero__visual { width: 104px; }
  .ym-category-hero__orbit { width: 110px; height: 110px; }
  .ym-category-hero__portrait { width: 94px; height: 94px; }
  .ym-category-hero__lead { max-width: 22em; }
}

/* Compact heading remains available to clearance and account catalog views. */
.ym-catalog-header-compact {
  margin: 12px 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #fceef1, #fff9f6 75%);
  border-radius: var(--ym-radius-md, 14px);
  border: 1px solid #f6e2e6;
}
.ym-breadcrumb-inline .breadcrumb {
  margin: 0 0 4px;
  padding: 0;
  background: transparent;
  font-size: 12px;
}
.ym-catalog-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ym-catalog-thumb-compact {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  background: #fff;
}
.ym-catalog-thumb-compact img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ym-catalog-title-text {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.ym-catalog-title-text h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  color: var(--ym-ink, #28181e);
  line-height: 1.2;
}
.ym-catalog-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--ym-muted, #7d6f73);
}

.ym-subcategories-pills {
  margin: 4px 0 12px;
  position: relative;
}
.ym-subcategories-pills__rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0 4px;
}
.ym-subcategories-pills__rail::-webkit-scrollbar {
  display: none;
}
.ym-pill {
  flex: 0 0 auto;
  padding: 6px 14px;
  border: 1px solid #ead6da;
  border-radius: 999px;
  background: #fff;
  color: #483c40;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all .15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.ym-pill:hover,
.ym-pill:focus-visible {
  border-color: var(--ym-coral-strong, #c54862);
  color: var(--ym-coral-strong, #c54862);
  background: #fff5f7;
  text-decoration: none;
  transform: translateY(-1px);
}
.ym-pill.is-active {
  border-color: var(--ym-coral-strong, #c54862);
  background: var(--ym-coral-strong, #c54862);
  color: #fff;
}

.ym-catalog-seo-desc {
  margin-top: 36px;
  padding: 20px 24px;
  border-radius: var(--ym-radius-md, 16px);
  background: #fbf6f7;
  border: 1px solid #f0e2e5;
  color: var(--ym-muted, #7d6f73);
  font-size: 13px;
  line-height: 1.6;
}

.ym-catalog-page .ym-page-heading { min-height: 112px; padding: 18px 26px; }
.ym-catalog-page .ym-page-heading img { width: 86px; height: 86px; }
.ym-catalog-layout { margin-top: 10px; }
.ym-catalog-bar {
  margin: 0 0 14px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  border: 1px solid var(--ym-line);
  border-radius: var(--ym-radius-md);
  background: #fff;
}
.ym-catalog-bar .ym-catalog-quick-filters,
.ym-catalog-bar .ym-catalog-toolbar {
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.ym-catalog-bar .ym-catalog-quick-filters { flex: 1 1 auto; }
.ym-catalog-bar .ym-catalog-toolbar { flex: 0 1 auto; }
.ym-catalog-bar .ym-catalog-quick-filters select,
.ym-catalog-bar .ym-catalog-toolbar select { min-height: 38px; }
.ym-catalog-bar .ym-catalog-quick-filters__apply,
.ym-catalog-bar .ym-catalog-quick-filters__clear { min-height: 38px; }
/* 手機維持原本上下兩條的排法，避免擠成一團 */
@media (max-width: 767px) {
  .ym-catalog-bar { display: block; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
  .ym-catalog-bar .ym-catalog-quick-filters {
    min-height: 58px;
    margin-bottom: 12px;
    padding: 7px;
    border: 1px solid #efdfe2;
    border-radius: var(--ym-radius-md);
    background: linear-gradient(135deg, #fffafa, #fff 72%);
  }
  .ym-catalog-bar .ym-catalog-toolbar {
    min-height: 62px;
    margin-bottom: 19px;
    padding: 7px;
    border: 1px solid var(--ym-line);
    border-radius: var(--ym-radius-md);
    background: #fff;
  }
}

/* ---------- [分類側欄] 730px 的窗塞 1626px，底部項目被攔腰切斷 ----------
   沒有任何「還有更多」的訊號，看起來像壞掉而不是可捲動。
   用經典 scroll-shadow：內容捲到底時陰影自動消失。 */
@media (min-width: 992px) {
  .ym-catalog-sidebar {
    background-image:
      linear-gradient(#fff 32%, rgba(255, 255, 255, 0)),
      linear-gradient(rgba(255, 255, 255, 0), #fff 68%),
      radial-gradient(farthest-side at 50% 0, rgba(120, 80, 92, .16), rgba(255, 255, 255, 0)),
      radial-gradient(farthest-side at 50% 100%, rgba(120, 80, 92, .16), rgba(255, 255, 255, 0));
    background-position: 0 0, 0 100%, 0 0, 0 100%;
    background-size: 100% 26px, 100% 26px, 100% 11px, 100% 11px;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
    background-color: #fff;
  }
}

/* ---------- [下單成功頁] 唯一的 CTA 是語意不明的「繼續 ›」 ---------- */
.ym-success-card__actions { margin-top: 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ym-success-card__actions .btn { min-width: 168px; min-height: 48px; }
.ym-success-card__hint { margin: 16px 0 0; color: var(--ym-muted); font-size: 13px; line-height: 1.7; }

/* ---------- [社群登入] 三種語彙、體積比自家登入鈕還大 ----------
   實測 Facebook 藍底磚 / Google 白底磚 / LINE 綠底無磚，275~283 × 70~72px，
   而真正的主要動作「登入」只有 397×48px —— 第三方登入的視覺重量大於自家登入。
   標籤也不一致（Facebook / Google / 使用 LINE 登入）。
   統一成 48px 白底＋1px 描邊＋品牌色圖示＋「使用 X 繼續」。 */
.ym-v2 .ym-social-login-link,
.ym-v2 .ym-social-access__providers .ym-login-line {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid #ded7d9 !important;
  border-radius: var(--ym-radius-sm) !important;
  color: #353033 !important;
  background: #fff !important;
  box-shadow: none;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
.ym-v2 .ym-social-login-link:hover,
.ym-v2 .ym-social-login-link:focus,
.ym-v2 .ym-social-access__providers .ym-login-line:hover,
.ym-v2 .ym-social-access__providers .ym-login-line:focus {
  border-color: #b9adb0 !important;
  background: #fdf9fa !important;
  color: #353033 !important;
}
/* kbsociallogin 的 icon-rounded 會把 <i> 包成一塊有底色的磚，撐到 70px 高 */
.ym-v2 .ym-social-login-link i,
.ym-v2 .ym-social-access__providers .ym-login-line i {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none !important;
  font-size: 19px;
  line-height: 1;
}
.ym-v2 .ym-social-login-link--facebook i { color: #1877f2; }
.ym-v2 .ym-social-login-link--google i { color: #4285f4; }
.ym-v2 .ym-social-access__providers .ym-login-line i { color: #06c755; }
.ym-v2 .ym-social-login-link--facebook::after { content: "使用 Facebook 繼續"; }
.ym-v2 .ym-social-login-link--google::after { content: "使用 Google 繼續"; }

/* 購物車縮圖的來源檔只有 47×47（OpenCart config_image_cart_width），
   放到 72px 會糊，先取 64px：比原本 33px 大近一倍又不過度放大。
   要再更大得先把後台「購物車圖片尺寸」調到 160×160。 */
@media (min-width: 768px) {
  .ym-cart-table .ym-cart-cell--image { width: 92px; }
  .ym-cart-table .ym-cart-cell--image img { width: 64px; height: 64px; }
}

/* ---------- [會員中心表格] 卡片式列表仍留著 Bootstrap 全格線 ----------
   訂單記錄／訂單資訊／退換清單都是 .ym-account-table--cards，外框圓角已由
   wrapper 負責，內部縱線只是把每列切成一格格，和全站的白卡片語言不同。
   .ym-account-table--stack（帳單/運送地址並排）保留縱線當分隔，不在此列。 */
@media (min-width: 768px) {
  .ym-account-table--cards > .table.table-bordered { border: 0; }
  .ym-account-table--cards > .table.table-bordered > thead > tr > td,
  .ym-account-table--cards > .table.table-bordered > tbody > tr > td,
  .ym-account-table--cards > .table.table-bordered > tfoot > tr > td { border-left: 0; border-right: 0; }
  .ym-account-table--cards > .table.table-bordered > tbody > tr:last-child > td { border-bottom: 0; }
}

/* ---------- [訂單資訊] 「再買一次」與「商品退換」兩顆實心紅並排 ----------
   跟購物車的更新／移除同一個病：主要動作與退貨動作同色同尺寸。
   兩顆都降成 ghost，滑過才上色；退換再用中性灰與再買一次區隔。 */
.ym-v2 .ym-account-actions .btn-primary,
.ym-v2 .ym-account-actions .btn-danger {
  min-width: 44px;
  color: var(--ym-coral-dark) !important;
  border-color: #e8c8cf;
  border-radius: var(--ym-radius-sm);
  background: #fff;
}
.ym-v2 .ym-account-actions .btn-danger { color: var(--ym-muted) !important; border-color: var(--ym-line); }
.ym-v2 .ym-account-actions .btn-primary:hover,
.ym-v2 .ym-account-actions .btn-primary:focus {
  color: #fff !important;
  border-color: var(--ym-coral-strong);
  background: var(--ym-coral-strong);
}
.ym-v2 .ym-account-actions .btn-danger:hover,
.ym-v2 .ym-account-actions .btn-danger:focus {
  color: #fff !important;
  border-color: #b73e4b;
  background: #b73e4b;
}

/* 商品網格隨螢幕加欄：原本無論多寬都固定 4 欄 243px，1140 版心內只用 1020px。
   ⚠ 先前用固定 5/6 欄會把卡片壓到 211px（5 欄）與 192px（6 欄），
   button-group 是「主鈕 1fr + 44px + 44px」，主鈕只剩 83/64px，
   「加入購物車」換行後掉出膠囊外（實測 scrollH 52 > clientH 42）。
   改用 auto-fill + 248px 下限：欄數自己隨寬度長，但卡片永遠不會窄到擠爆按鈕。

   ⚠ 2026-08-29 回歸修正：這條原本沒包 media query，特異度 (0,2,0) 壓過
   :1269 平板 3 欄 (0,1,0) 與 :1391 手機 2 欄 (0,1,0)，害手機分類／搜尋頁
   退成「一排一件」（Pixel 7 實測 grid-template-columns 只剩單軌 384px，
   分類頁 scrollHeight 15,030px vs 正式機 4,289px＝3.5 倍）。
   這條的用意只有「大桌機加欄」，所以限縮到 1101px 以上，
   1100 以下交還給既有的平板 3 欄／手機 2 欄階梯。 */
@media (min-width: 1101px) {
  /* 2026-08-29：下限 248 → 236px。1254px 的分類頁版心在 248 下最多長到 4 欄
     （老闆要的「≥1536 給 5 欄」拿不到）；236 可以長到 5 欄，而主鈕仍有約 130px
     （先前爆框是 5 欄 211px→主鈕 83px 才發生的），不會重演擠爆按鈕。 */
  .ym-v2 .ym-product-grid--catalog { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }

  /* 卡片變高的真正來源：縮圖是「隨卡片寬度等比放大的正方形」，
     1366 時 248px、1920 時 297px，卡片跟著 408 → 456。
     螢幕越寬、整頁越長，正好與老闆「用好用滿、不要一直往下滑」相反。
     封頂之後寬螢幕只會多放商品，不會把每張卡撐胖。 */
  .ym-v2 .product-thumb .image a { max-height: 236px; }
  .ym-v2 .product-thumb .image img { object-fit: contain; background: #f8f5f3; }
}

/* 主鈕在任何寬度都不能溢出膠囊。
   ⚠ 2026-08-29 實測：768–1100 這一段網格只有 514px（@820）卻沿用 3 欄，
   每格 160px、主鈕只剩 44px，「加入購物車」爆成 155px 高（25 張卡全中）。
   固定 height:44px 是元凶——文字換行後撐不開、直接溢出。改成高度自適應。 */
.ym-v2 .product-thumb .button-group button {
  height: auto; min-height: 44px; padding: 6px 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1.25; white-space: nowrap;
}

/* 桌機卡片瘦身：實測 1366 時 dev2 卡片 396px（圖 236 + caption 101 + 按鈕列 57），
   正式機 Journal3 是 357px（圖 240 + caption 87 + 按鈕列 32）。
   按鈕列 44+13 是最肥的一段，桌機不需要 44px 的觸控高度（那是手機規格）。 */
@media (min-width: 1101px) {
  .ym-v2 .product-thumb .button-group { padding: 0 12px 11px; gap: 6px; }
  .ym-v2 .product-thumb .button-group button { min-height: 38px; }
  .ym-v2 .product-thumb .caption { padding-bottom: 4px; }
}

/* 桌機縱向收短（純間距，手機／平板不動）。
   1366 實測 dev2 分類頁 4,109px vs 正式機 3,264px，逐塊量出來的分佈：
     頁面標題 122（padding 18/18）、子分類列 41（margin 18/8）、
     分頁列 82（margin-top 30）、頁尾 393（trust 20/20+18、body 42/40、legal 15/15）。
   這些都只是留白，收緊不影響任何資訊量。 */
@media (min-width: 1101px) {
  .ym-v2 .ym-page-heading { padding-top: 10px; padding-bottom: 10px; }
  .ym-v2 .ym-subcategories { margin-top: 10px; margin-bottom: 6px; }
  .ym-v2 .ym-pagination { margin-top: 18px; }
  .ym-v2 .ym-product-grid--catalog { row-gap: 16px; }
  /* 內距不再自己寫一份（會讓頁尾那條比首頁那條矮 4px，同一個元件兩種高度）；
     這裡只調它在寬螢幕的下外距。 */
  .ym-v2 .ym-footer__trust { margin-bottom: 10px; }
  .ym-v2 .ym-footer__body { padding-top: 28px; padding-bottom: 26px; }
  .ym-v2 .ym-footer__legal { padding-top: 11px; padding-bottom: 11px; }
}

/* 平板段（768–1100）：514–795px 的網格排 3 欄會把卡片壓到 160px。改 2 欄。 */
@media (min-width: 768px) and (max-width: 1100px) {
  .ym-v2 .ym-product-grid--catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 數量階梯價：原本是點不動的純文字 <li>，也沒寫省多少 */
.ym-tier-pricing { margin: 12px 0 0; padding: 12px 14px; border: 1px solid #f0dfe3; border-radius: var(--ym-radius-sm); background: linear-gradient(135deg, #fff8f9, #fffdfb); }
.ym-tier-pricing__title { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; color: var(--ym-coral-dark, #9f3d53); font-size: 13px; font-weight: 900; }
.ym-tier-pricing__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ym-tier-pricing__list > li { flex: 1 1 150px; min-width: 0; }
.ym-tier { width: 100%; min-height: 64px; padding: 8px 10px; display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; align-items: baseline; border: 1px solid #efd8dd; border-radius: var(--ym-radius-sm); background: #fff; color: var(--ym-ink, #30292b); text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.ym-tier:hover { border-color: var(--ym-coral-strong, #c54862); }
.ym-tier:focus-visible { outline: 2px solid var(--ym-coral-strong, #c54862); outline-offset: 2px; }
.ym-tier.is-active { border: 2px solid var(--ym-coral-strong, #c54862); background: var(--ym-blush, #fceef1); padding: 7px 9px; }
.ym-tier__qty { font-size: 13px; font-weight: 800; }
.ym-tier__unit { justify-self: end; color: var(--ym-coral-strong, #c54862); font-size: 16px; font-weight: 900; }
.ym-tier__unit small { font-size: 11px; font-weight: 700; }
.ym-tier__save { grid-column: 1; padding: 1px 6px; justify-self: start; border-radius: var(--ym-radius-xs); background: #2f6f4f; color: #fff; font-size: 11px; font-weight: 800; }
.ym-tier__total { grid-column: 2; justify-self: end; color: var(--ym-muted, #6d6064); font-size: 12px; font-weight: 600; }
@media (max-width: 767px) {
  .ym-tier-pricing__list > li { flex: 1 1 calc(50% - 4px); }
  .ym-tier { min-height: 60px; }
}

/* 分類頁商品卡：收藏鈕 44×44 常駐壓在商品圖上（實測與圖片連結重疊 44×44）。
   有滑鼠的裝置改成 hover／鍵盤 focus 才浮現；觸控裝置沒有 hover，維持常駐。 */
@media (hover: hover) and (pointer: fine) {
  .ym-product-card .ym-product-wish { opacity: 0; transform: translateY(-4px); transition: opacity .16s ease, transform .16s ease; }
  .ym-product-card:hover .ym-product-wish,
  .ym-product-card:focus-within .ym-product-wish,
  .ym-product-card .ym-product-wish.is-active,
  .ym-product-card .ym-product-wish[aria-pressed="true"] { opacity: 1; transform: none; }
}

/* 卡片下半部留白過多：caption 被 min-height:156px 撐開，實測價格底 440 → 按鈕頂 495
   中間 55px 全空。改為內容決定高度，並把按鈕列釘在卡片底部維持同列對齊。 */
.ym-v2 .product-thumb { display: flex; flex-direction: column; }
.ym-v2 .product-thumb .caption { min-height: 0; padding: 12px 14px 6px; }
.ym-v2 .product-thumb .button-group { margin-top: auto; }
.ym-product-card .caption h3 { min-height: 0; margin-bottom: 6px; }
.ym-product-card .caption .price { margin-bottom: 0; }
@media (max-width: 767px) {
  .ym-product-card .caption h3 { min-height: 0; }
  .ym-v2 .product-thumb .caption { padding: 10px 11px 6px; }
}

/* ============================================================
   商品頁垂直版面重整（2026-08-28）
   老闆：「垂直的版面也是」「加購組合都沒有列出來」「插在商品描述圖之中」
   ── 桌機縮圖直排 + sticky、購買框瘦身成 label/value 窄列、
      配送承諾一行、LINE 降權、手機底部固定列比例修正。
   ============================================================ */

/* 1. 桌機縮圖直排在主圖左側（酷澎作法），主圖與縮圖一起 sticky */
@media (min-width: 992px) {
  .ym-v2 #product-product .ym-product-gallery { position: sticky; top: 88px; }
  .ym-v2 #product-product .thumbnails.ym-thumbs--vertical {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-auto-rows: 76px;
    gap: 10px 12px;
    align-items: start;
  }
  .ym-v2 #product-product .thumbnails.ym-thumbs--vertical > li:first-child {
    grid-column: 2;
    grid-row: 1 / span 6;
  }
  .ym-v2 #product-product .thumbnails.ym-thumbs--vertical > li.image-additional { grid-column: 1; height: 76px; }
  /* [YM 2026-08-30] 只有一張圖時不要留縮圖欄。
     grid-template-columns 寫死 `76px + 12px gap` = 88px，但樣板是
     `{% if images %}` 就掛 ym-thumbs--vertical，而 images 可能非空卻沒有任何
     image.thumb（單圖商品就是這樣）。結果主圖卡左緣被推到 x=123，
     頁面版心卻在 x=35 —— 主圖卡孤零零內縮 88px，就是「排版沒對齊」的來源。 */
  /* 沒有附圖時整個不要用 grid。
     只改欄寬不夠：grid-auto-rows:76px × span 6 把容器高度釘死在 506px，
     但主圖變寬成 660px 之後方形圖實際要 686px，溢出 180px 壓在下方的優惠區上。
     改成 block，高度就跟著圖片走。 */
  .ym-v2 #product-product .thumbnails.ym-thumbs--vertical:not(:has(> li.image-additional)) {
    display: block;
  }
  .ym-v2 #product-product .thumbnails.ym-thumbs--vertical:not(:has(> li.image-additional)) > li:first-child {
    height: auto;
  }
  .ym-v2 #product-product .thumbnails.ym-thumbs--vertical:not(:has(> li.image-additional)) > li:first-child .thumbnail {
    height: auto;
  }
  /* 超過 6 張就不再往下長，剩下的在燈箱裡看 */
  .ym-v2 #product-product .thumbnails.ym-thumbs--vertical > li.image-additional:nth-of-type(n + 7) { display: none; }
  .ym-v2 #product-product .thumbnails.ym-thumbs--vertical > li:first-child .thumbnail { height: 100%; aspect-ratio: auto; border-radius: var(--ym-radius-lg); }  /* 24px，與右欄購買卡、.ym-product-aside 同一個圓角 */
  .ym-v2 #product-product .thumbnails.ym-thumbs--vertical > li.image-additional .thumbnail { height: 76px; padding: 2px; border-radius: var(--ym-radius-sm); }
}

/* 2. 標題下 meta 列：星等 + 評價數（取代商品型號／庫存狀態） */
.ym-product-meta__rating { display: inline-flex; align-items: center; gap: 6px; }
.ym-product-meta .ym-stars { color: #e8a53a; letter-spacing: 1px; }
.ym-product-meta__rating a { color: var(--ym-muted); text-decoration: underline; text-underline-offset: 3px; }

/* 3. 分享收進圖示列，與收藏並排 */
.ym-v2 #product-product .ym-product-tools { display: inline-flex; gap: 6px; }
.ym-v2 #product-product .ym-product-tools .ym-product-share { min-height: 0; background: #fff; }
@media (min-width: 768px) {
  .ym-v2 #product-product .ym-product-summary > .ym-product-tools .ym-product-share { width: 42px; height: 42px; padding: 0; }
}

/* 4. 優惠／保障資訊改成「標籤 + 值」窄列，不再每件事各一張圓角卡 */
.ym-fact {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 28px;
  margin: 0;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--ym-line);
  background: none;
}
.ym-fact + .ym-fact { border-top: 1px solid var(--ym-line); }
.ym-fact__label { flex: 0 0 88px; padding: 3px 0 0; color: var(--ym-muted); font-size: 13px; font-weight: 700; white-space: nowrap; }
.ym-fact__value { min-width: 0; flex: 1 1 auto; font-size: 13px; }
.ym-v2 #product-product .ym-product-campaigns.ym-fact { margin: 0; padding: 8px 0; }
.ym-v2 #product-product .ym-product-campaigns.ym-fact .ym-product-campaigns__title { padding: 3px 0 0; }
.ym-v2 #product-product .ym-product-campaigns.ym-fact .ym-product-campaigns__list { gap: 6px; }
/* [YM 2026-08-30] 主圖下方的統一優惠區
   老闆：「所有的折扣 包含免運 或是送滿額贈 統一寫在 商品圖下方那邊」。
   先前免運寫在右邊購買區、商品活動寫在圖下方，客人要在兩個地方湊資訊。 */
.ym-product-offers__list { margin: 0; padding: 0; list-style: none; }
.ym-product-offers__item {
  position: relative;
  padding: 3px 0 3px 22px;
  color: var(--ym-ink);
  font-size: 13px;
  line-height: 1.5;
}
/* 圖示用 ::before：免運那一行的文字會被 ym-v2.js 整段改寫，
   放在 DOM 裡的 <i> 會被洗掉。 */
.ym-product-offers__item::before {
  position: absolute;
  top: 4px;
  left: 0;
  width: 16px;
  color: var(--ym-coral-strong);
  font: normal normal normal 13px/1 FontAwesome;
  text-align: center;
}
.ym-product-offers__item--ship::before { content: "\f0d1"; }   /* fa-truck */
.ym-product-offers__item--bulk::before { content: "\f02c"; }   /* fa-tags */
.ym-product-offers__item b { color: var(--ym-coral-dark); font-weight: 800; }
/* 缺貨時 JS 只把內層 span 設 hidden，整列跟著收起來 */
.ym-product-offers__item:has([data-ym-free-shipping][hidden]) { display: none; }

/* 5. 配送承諾綠色一行（酷澎的「該商品是 明天 到貨, 免運費」） */
.ym-ship-promise { margin: 0 0 8px; padding: 8px 11px; border-radius: var(--ym-radius-sm); background: #eef7f1; }
.ym-ship-promise strong { display: block; color: #14663f; font-size: 14px; font-weight: 900; line-height: 1.35; }
.ym-ship-promise strong .fa { margin-right: 5px; }
.ym-ship-promise small { display: block; margin-top: 2px; color: #5d6b63; font-size: 12px; line-height: 1.4; }

/* 6. LINE 降權成信任列裡的文字連結（缺貨時才恢復成滿寬主按鈕） */
.ym-v2 .ym-line-order--demoted {
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: inline-flex;
  border: 0;
  background: none;
  color: #087d39;
  font-size: 13px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ym-v2 .ym-line-order--demoted:hover,
.ym-v2 .ym-line-order--demoted:focus { background: none; color: #066f32; }
.ym-v2 .ym-line-order--demoted::after { content: "\203A"; margin-left: 4px; }

/* 7. 商品介紹末端的規格窄列（型號／庫存從購買框搬過來） */
.ym-product-specs { max-width: 520px; margin: 22px auto 0; padding-top: 14px; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 6px 14px; border-top: 1px solid var(--ym-line); font-size: 13px; }
.ym-product-specs dt { color: var(--ym-muted); font-weight: 700; }
.ym-product-specs dd { margin: 0; }

/* 8. rail 左右箭頭（蝦皮縮圖列做法），覆蓋在 rail 兩端 */
.ym-rail-wrap { position: relative; }
.ym-rail-nav {
  position: absolute;
  top: 38%;
  z-index: 3;
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--ym-line);
  border-radius: 50%;
  color: var(--ym-coral-dark);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--ym-shadow-sm);
  font-size: 18px;
  cursor: pointer;
}
.ym-rail-nav[hidden] { display: none; }
.ym-rail-nav--prev { left: -14px; }
.ym-rail-nav--next { right: -14px; }
.ym-rail-nav:hover { border-color: var(--ym-coral-strong); background: #fff; }
.ym-rail-nav:focus-visible { outline: 3px solid rgba(197, 72, 98, .35); outline-offset: 2px; }
@media (max-width: 767px) { .ym-rail-nav { display: none; } }

@media (max-width: 767px) {
  /* 手機：主圖已在購買框上方且可點開燈箱（含 1/N 頁碼與左右滑），
     原本落在 CTA 之後 y≈1200 的縮圖列只是重複，直接移除。 */
  .ym-v2 #product-product .ym-product-gallery { display: none; }
  .ym-fact__label { flex-basis: 72px; }
  .ym-fact { min-height: 44px; align-items: center; }
  .ym-ship-promise { padding: 9px 11px; }
  .ym-product-specs { grid-template-columns: 80px minmax(0, 1fr); margin-top: 18px; }

  /* 手機底部固定列：左售價 20% ／ 中加入購物車（白底框線）25% ／ 右立即購買（實心主色）55%，
     與蝦皮／酷澎一致——直接購買才是實心主鈕。 */
  .ym-pdp-mobile-bar { grid-template-columns: 20% 25% 1fr; }
  .ym-pdp-mobile-bar .ym-pdp-mobile-cart { color: var(--ym-coral-dark); background: #fff; }
  .ym-pdp-mobile-bar .ym-pdp-mobile-buy { color: #fff; background: var(--ym-coral-strong); }
  /* 流內的「立即購買」與底部固定列重複，手機只留「數量 + 加入購物車」 */
  .ym-v2 #product-product .ym-buy-now { display: none; }
  body.ym-v2:has(.ym-pdp-mobile-bar.is-visible) { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
}

/* =========================================================================
   [購物車] 卡片列 + 進度目標 + 步驟指示 + 手機底部金額列
   舊版是 OpenCart 原生六欄表格（含型號欄跟每列一顆「更新」鈕），
   這裡改成卡片列：型號收進 title、數量改即時 stepper，
   手機不再靠 data-label 偽表格 hack，同一份 markup 自然堆疊。
   ========================================================================= */

/* ---- 步驟指示 ---- */
.ym-cart-head { margin-bottom: 18px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px; }
.ym-cart-head h1 { margin: 0; }
.ym-cart-head h1 small { color: var(--ym-muted); font-size: 15px; font-weight: 700; }
.ym-steps { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: 8px; color: var(--ym-muted); font-size: 13px; }
.ym-steps__item { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding-bottom: 3px; border-bottom: 2px solid transparent; }
.ym-steps__item + .ym-steps__item::before { content: "\203a"; margin-right: 8px; color: #c9bcc0; }
.ym-steps__no { font-weight: 900; letter-spacing: .04em; }
.ym-steps__item.is-done { color: var(--ym-ink); }
.ym-steps__item.is-current { color: var(--ym-coral-dark); font-weight: 900; border-bottom-color: var(--ym-coral-dark); }

/* ---- 免運 / 滿額折扣進度 ---- */
.ym-goal { display: grid; gap: 10px; }
.ym-goal--summary { margin-bottom: 16px; }
.ym-goal__tier { display: grid; gap: 5px; }
.ym-goal__text { margin: 0; color: var(--ym-ink); font-size: 13px; line-height: 1.4; }
.ym-goal__text i { color: var(--ym-coral-strong); }
.ym-goal__text strong { color: var(--ym-coral-dark); font-weight: 900; }
.ym-goal__tier.is-reached .ym-goal__text i,
.ym-goal__tier.is-reached .ym-goal__text strong { color: var(--ym-success); }
.ym-goal__track { height: 8px; border-radius: var(--ym-radius-pill); background: #f2e4e7; overflow: hidden; }
.ym-goal__fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ym-coral), var(--ym-coral-strong)); transition: width .3s ease; }
.ym-goal__tier.is-reached .ym-goal__fill { background: var(--ym-success); }
.ym-goal__link { display: inline-block; color: var(--ym-coral-strong); font-size: 13px; font-weight: 800; }
/* 「湊單」小按鈕：輕微跳動吸引視線，點了跳到加購／推薦區（ym-v2.js 委派處理） */
.ym-goal__nudge-btn {
  margin-left: 8px;
  padding: 3px 12px;
  border: 0;
  border-radius: var(--ym-radius-pill);
  color: #fff;
  background: var(--ym-coral-strong);
  font-size: 12px;
  font-weight: 900;
  vertical-align: middle;
  cursor: pointer;
  animation: ym-goal-bounce 1.8s ease-in-out infinite;
}
.ym-goal__nudge-btn:hover,
.ym-goal__nudge-btn:focus-visible { background: var(--ym-coral-dark, #9f3d53); }
@keyframes ym-goal-bounce {
  0%, 100% { transform: none; }
  30% { transform: translateY(-3px); }
  45% { transform: none; }
  55% { transform: translateY(-1.5px); }
  65% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ym-goal__nudge-btn { animation: none; } }
.ym-flash-target { outline: 3px solid rgba(197, 72, 98, .45); outline-offset: 4px; border-radius: var(--ym-radius-md); transition: outline-color .3s ease; }

/* [YM 2026-08-30] 加入購物車／滿額優惠通知卡：右下角浮出（手機在固定購買列上方）。
/* [YM 2026-09-02] 全站右上角購物車與詢價單浮動面板（含清單預覽） */
.ym-cart-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  bottom: auto;
  z-index: 10500;
  width: min(390px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  padding: 0;
  border: 1px solid #e8dadc;
  border-radius: var(--ym-radius-md, 16px);
  background: #ffffff;
  box-shadow: 0 16px 44px rgba(45, 18, 25, 0.22);
  opacity: 0;
  transform: translateY(-12px) scale(0.98);
  pointer-events: none;
  transition: opacity .24s cubic-bezier(0.16, 1, 0.3, 1), transform .24s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ym-cart-toast[hidden] { display: none !important; }
.ym-cart-toast.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.ym-cart-toast__header {
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(135deg, #fdf4f5, #fff 80%);
  border-bottom: 1px solid #f3e8ea;
}
.ym-cart-toast__status {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #1f6b4a;
  font-size: 14.5px;
  font-weight: 900;
}
.ym-cart-toast__status .fa {
  font-size: 16px;
  color: #2e8b57;
}
.ym-cart-toast__count {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f8e8eb;
  color: var(--ym-coral-strong, #c54862);
  font-size: 11.5px;
  font-weight: 800;
}
.ym-cart-toast__close {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ym-muted, #7d6f73);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.ym-cart-toast__close:hover {
  background: #f0e2e5;
  color: var(--ym-ink, #28181e);
}

.ym-cart-toast__body {
  padding: 12px 16px;
  overflow-y: auto;
  max-height: 260px;
}
.ym-cart-toast__current {
  padding: 10px 12px;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-radius: var(--ym-radius-sm, 10px);
  background: #fff8f9;
  border: 1px dashed #f0ced5;
}
.ym-cart-toast__thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #f3e6e8;
  background: #fff;
}
.ym-cart-toast__info { min-width: 0; }
.ym-cart-toast__item {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--ym-ink, #28181e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ym-cart-toast__meta {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--ym-muted, #7d6f73);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ym-cart-toast__item-price {
  font-size: 13px;
  font-weight: 800;
  color: var(--ym-coral-strong, #c54862);
  white-space: nowrap;
}

.ym-cart-toast__list-wrap { margin-top: 4px; }
.ym-cart-toast__list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ym-muted, #7d6f73);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ym-cart-toast__list-hint { color: #2e8b57; }
.ym-cart-toast__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 160px;
  overflow-y: auto;
}
.ym-cart-toast__row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: #faf6f7;
}
.ym-cart-toast__row img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  background: #fff;
}
.ym-cart-toast__row-info { min-width: 0; }
.ym-cart-toast__row-info strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #382c30;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ym-cart-toast__row-info small {
  display: block;
  font-size: 11px;
  color: var(--ym-muted, #7d6f73);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ym-cart-toast__row-qty {
  font-size: 11.5px;
  font-weight: 800;
  color: #584c50;
  white-space: nowrap;
}
.ym-cart-toast__empty {
  margin: 8px 0;
  text-align: center;
  color: var(--ym-muted, #7d6f73);
  font-size: 12px;
}

.ym-cart-toast__footer {
  padding: 12px 16px 14px;
  border-top: 1px solid #f3e8ea;
  background: #ffffff;
}
.ym-cart-toast__totals {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  font-size: 13.5px;
}
.ym-cart-toast__totals-lbl { color: var(--ym-muted, #7d6f73); font-weight: 700; }
.ym-cart-toast__totals-val { font-size: 16px; font-weight: 900; color: var(--ym-coral-strong, #c54862); }

.ym-cart-toast__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ym-cart-toast__btn-sec,
.ym-cart-toast__btn-pri {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--ym-radius-sm, 10px);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: all .15s ease;
}
.ym-cart-toast__btn-sec {
  border: 1px solid #e0ccd0;
  background: #fff;
  color: #483c40;
}
.ym-cart-toast__btn-sec:hover {
  background: #fbf0f2;
  color: var(--ym-coral-strong, #c54862);
  border-color: #d8b8bf;
  text-decoration: none;
}
.ym-cart-toast__btn-pri {
  border: 0;
  background: var(--ym-coral-strong, #c54862);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(197, 72, 98, 0.28);
}
.ym-cart-toast__btn-pri:hover {
  background: #a93a52;
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
}

@media (max-width: 767px) {
  .ym-cart-toast {
    top: 12px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100vh - 24px);
  }
}

/* ---- 商品卡片列 ---- */
.ym-cart-list { margin: 0; padding: 0; list-style: none; border: 1px solid #ead6da; border-radius: var(--ym-radius-lg); background: #fff; overflow: hidden; box-shadow: 0 2px 14px rgba(51, 42, 45, 0.04); }
.ym-cart-item { padding: 20px 24px; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 20px; border-top: 1px solid #f3e9eb; transition: background .15s ease; }
.ym-cart-item:first-child { border-top: 0; }
.ym-cart-item:hover { background: #fffdfd; }
.ym-cart-item__thumb { display: block; width: 96px; height: 96px; border-radius: var(--ym-radius-sm); border: 1px solid #f0e0e3; background: var(--ym-cream); overflow: hidden; }
.ym-cart-item__thumb img { width: 100%; height: 100%; object-fit: contain; }
.ym-cart-item__thumb--voucher { display: grid; place-items: center; color: var(--ym-coral); font-size: 28px; }
.ym-cart-item__info { min-width: 0; display: grid; gap: 6px; }
.ym-cart-item__name { color: var(--ym-ink); font-size: 15px; font-weight: 800; line-height: 1.45; overflow-wrap: anywhere; }
.ym-cart-item__options { margin: 0; padding: 0; list-style: none; color: var(--ym-muted); font-size: 13px; }
.ym-cart-item__stock { justify-self: start; padding: 3px 10px; border-radius: var(--ym-radius-pill); background: #fdf0e6; color: var(--ym-warning); font-size: 12px; font-weight: 700; }
.ym-cart-item__stock--preorder { display: inline-flex; align-items: center; gap: 5px; background: #fdf5ea; border: 1px solid #fae1c3; color: #925114; }
.ym-cart-item__controls { display: grid; grid-template-columns: auto auto auto auto; align-items: center; gap: 22px; }
.ym-cart-item__unit { color: var(--ym-muted); font-size: 13px; white-space: nowrap; }
.ym-cart-item__total { min-width: 92px; color: var(--ym-coral-dark); font-size: 17px; font-weight: 900; text-align: right; white-space: nowrap; }
.ym-cart-item__qty-static { color: var(--ym-muted); font-size: 14px; }
.ym-cart-item__remove { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: var(--ym-radius-sm); background: transparent; color: var(--ym-muted); font-size: 16px; cursor: pointer; transition: all .16s ease; }
.ym-cart-item__remove:hover, .ym-cart-item__remove:focus { background: #fbeef0; color: var(--ym-coral-strong); }
.ym-cart-item.is-updating { opacity: .55; pointer-events: none; }
.ym-cart-nojs { margin-top: 12px; }

/* ---- 數量 stepper ---- */
.ym-qty { display: inline-flex; align-items: center; border: 1px solid var(--ym-line); border-radius: var(--ym-radius-sm); background: #fff; overflow: hidden; }
.ym-qty__btn { width: 38px; height: 40px; display: grid; place-items: center; border: 0; background: #fff; color: var(--ym-coral-dark); font-size: 17px; font-weight: 900; line-height: 1; cursor: pointer; }
.ym-qty__btn:hover:not(:disabled), .ym-qty__btn:focus:not(:disabled) { background: var(--ym-blush); }
.ym-qty__btn:disabled { color: #c9bcc0; cursor: not-allowed; }
.ym-qty__input { width: 48px; height: 40px; padding: 0; border: 0; border-inline: 1px solid var(--ym-line); background: #fff; color: var(--ym-ink); font-weight: 800; text-align: center; -moz-appearance: textfield; }
.ym-qty__input::-webkit-outer-spin-button, .ym-qty__input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.ym-qty__input:focus { outline: 2px solid var(--ym-coral); outline-offset: -2px; }

/* ---- 手機底部固定金額列（桌機不用，摘要卡已 sticky） ---- */
.ym-cart-mobile-bar { display: none; }

@media (max-width: 991px) {
  .ym-cart-item__controls { grid-template-columns: auto auto; gap: 10px 14px; justify-items: end; }
  .ym-cart-item__unit { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 767px) {
  .ym-cart-head { display: block; }
  .ym-steps { margin-top: 8px; gap: 6px; font-size: 12px; }
  .ym-steps__item { min-height: 32px; }
  /* 手機只留「步驟 2/4 · 購物車」+ 4 格進度點，不展開全部文字 */
  .ym-steps__item:not(.is-current) .ym-steps__label,
  .ym-steps .ym-steps__no { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .ym-steps__item:not(.is-current) { width: 22px; height: 6px; border-radius: var(--ym-radius-pill); background: #eadfe1; border-bottom: 0; }
  .ym-steps__item.is-done { background: var(--ym-coral); }
  .ym-steps__item + .ym-steps__item::before { display: none; }
  /* 相鄰兄弟的 ƒa 分隔符在手機要收起來，這條特異度要贏過它才畫得出「步驟 N/4 ·」 */
  .ym-steps .ym-steps__item.is-current::before { content: attr(data-mobile); display: inline; margin-right: 4px; color: inherit; font-weight: 800; }

  .ym-cart-item { padding: 12px; grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "thumb info" "controls controls"; gap: 6px 12px; }
  .ym-cart-item__thumb { grid-area: thumb; width: 72px; height: 72px; }
  .ym-cart-item__info { grid-area: info; }
  .ym-cart-item__controls { grid-area: controls; margin-top: 4px; padding-top: 10px; grid-template-columns: auto 1fr auto auto; justify-items: start; align-items: center; gap: 10px; border-top: 1px solid #f3e9eb; }
  .ym-cart-item__unit { grid-column: auto; }
  .ym-cart-item__total { min-width: 0; justify-self: end; }
  .ym-cart-item__remove { justify-self: end; }

  .ym-cart-mobile-bar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 1085; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); display: block; border-top: 1px solid var(--ym-line); background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px); box-shadow: var(--ym-shadow-up); opacity: 0; visibility: hidden; transform: translateY(calc(100% + 18px)); pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
  .ym-cart-mobile-bar.is-visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition-delay: 0s; }
  .ym-cart-mobile-bar__meta { min-height: 32px; display: flex; align-items: center; gap: 12px; }
  .ym-cart-mobile-bar__total { flex: 0 0 auto; color: var(--ym-muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
  .ym-cart-mobile-bar__total strong { color: var(--ym-coral-dark); font-size: 15px; font-weight: 900; }
  .ym-goal--bar { flex: 1 1 auto; min-width: 0; gap: 4px; }
  .ym-goal--bar .ym-goal__tier { gap: 3px; }
  .ym-goal--bar .ym-goal__tier ~ .ym-goal__tier { display: none; }
  .ym-goal--bar .ym-goal__text { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ym-goal--bar .ym-goal__track { height: 5px; }
  .ym-cart-mobile-checkout { width: 100%; min-height: 52px; margin-top: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--ym-radius-sm); font-size: 16px; font-weight: 900; }
  body.route-checkout-cart { padding-bottom: 104px; }
}

/* =========================================================================
   [購物車] 極簡 header — 進了漏斗就不要再給離開的出口
   結帳頁已經是 logo + 「安全加密結帳」，購物車卻還掛著搜尋框 + 8 個類目 +
   收藏 + 登入。這裡沿用結帳頁那組規則，只多留一個「繼續購物」的退路
   （退路在訂單摘要卡裡，header 不再誘導）。
   ========================================================================= */
.route-checkout-cart .ym-topbar,
.route-checkout-cart .ym-category-bar,
.route-checkout-cart .ym-menu-toggle,
.route-checkout-cart .ym-header__search,
.route-checkout-cart .ym-header-action:not(.ym-cart-button) { display: none !important; }
.route-checkout-cart .ym-header { border-bottom: 1px solid var(--ym-line); background: rgba(255, 255, 255, .98); box-shadow: var(--ym-shadow-xs); }
.route-checkout-cart .ym-header__main { min-height: 72px; display: flex; align-items: center; gap: 20px; }
.route-checkout-cart .ym-logo { order: 1; width: 154px; }
.route-checkout-cart .ym-header__actions { order: 2; margin-left: auto; }
.route-checkout-cart .ym-header__main::after { content: "安全加密結帳"; order: 3; color: var(--ym-success); font-size: 13px; font-weight: 800; letter-spacing: .04em; }

@media (max-width: 767px) {
  .route-checkout-cart .ym-header__main { min-height: 62px; }
  .route-checkout-cart .ym-logo { width: 132px; }
  .route-checkout-cart .ym-header__main::after { font-size: 12px; }
}

/* 搜尋鈕破框：ym-v2.css 的 .ym-search button{min-height:44px}（觸控目標規則）撞上膠囊尺寸。
   膠囊桌機 50px，扣掉 2px 外框×2 與 4px margin×2 只剩 38px 可用；手機膠囊 44px 更只剩 32px。
   結果按鈕被撐成 44px：桌機貼齊底緣、上方空 6px 不置中；手機下緣直接突出膠囊 6px（實測
   膠囊 88.1~132.1 vs 按鈕 94.1~138.1）。改為填滿膠囊內距並垂直置中，觸控高度由膠囊本身保證。 */
.ym-search button { align-self: stretch; min-height: 0; margin: 3px; }

/* rail 一排 5 張後卡片變窄，「加入購物車」會折成兩行；縮字級並禁止換行 */
.ym-product-related__rail .product-thumb .button-group { grid-template-columns: minmax(0, 1fr) 40px 40px; gap: 6px; padding: 0 10px 12px; }
.ym-product-related__rail .product-thumb .button-group button { height: 42px; padding: 6px 6px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 13px; white-space: nowrap; }

/* Bootstrap .input-group-btn 內的按鈕字級被主題的 font:inherit 串成 0px：
   購物車「使用折價券」「使用購物禮券」實測 font-size:0px / line-height:0px，
   畫面上是一塊純粉紅無字方塊（對照組 #button-quote 不在 input-group 內就正常）。
   這是全站性的，凡 .input-group-btn 內的按鈕都中招。 */
.ym-v2 .input-group-btn > .btn,
.ym-v2 .input-group-btn > input[type="button"],
.ym-v2 .input-group-btn > input[type="submit"] { font-size: 15px; line-height: 1.2; }

/* ── 元件掃描 P1 批次修正 ──────────────────────────────
   共同根因：站上有 88/94/126/149/158 五種硬編碼的 sticky top，
   但吸頂後的頁首實測 137px（結帳頁 73、手機 57），導致多個 sticky 元件被頁首蓋掉。
   統一成變數，之後只要改一處。 */
:root { --ym-header-stuck-h: 137px; --ym-sticky-gap: 16px; }
.route-checkout-checkout { --ym-header-stuck-h: 73px; }
@media (max-width: 767px) { :root { --ym-header-stuck-h: 57px; } }

/* 網站地圖側欄 sticky top:94px < 頁首 137px，停駐後「常用捷徑」標題被從字中間切斷 */
.ym-sitemap-aside { top: calc(var(--ym-header-stuck-h) + var(--ym-sticky-gap)); }

/* 搜尋結果頁的篩選列跟頁首同一個病：輸入框被拉成 1190px，
   打完字到搜尋鈕之間空 1386px。比照頁首搜尋框給上限。 */
.ym-search-refine { max-width: 760px; }

/* 聯絡我們：卡片沒有 max-width，一個放 10 個字的姓名欄橫跨整張 1432px 卡片 */
@media (min-width: 768px) {
  .ym-contact-form-card .form-control { max-width: 560px; }
  .ym-contact-form-card textarea.form-control { max-width: 720px; }
}

/* 收藏清單品名被裁：.ym-account-wishlist-list .ym-wishlist-name (0,2,0)
   輸給 .ym-account-table--cards > .table > tbody > tr > td{display:grid} (0,2,3)，
   所以 display:block 沒生效，26 字只顯示 8 字、右邊 146px 空白。補足特異度。 */
.ym-account-wishlist-list > .table > tbody > tr > td.ym-wishlist-name {
  display: block; min-width: 0; grid-template-columns: none;
}
.ym-account-wishlist-list > .table > tbody > tr > td.ym-wishlist-name a {
  display: block; max-height: none; -webkit-line-clamp: unset; overflow-wrap: anywhere;
}

/* 購物金／紅利交易列表：說明欄文字撐寬容器，被硬切在螢幕右緣且連橫捲都做不到 */
.ym-account-table--cards > .table > tbody > tr > td {
  min-width: 0; overflow-wrap: anywhere; word-break: break-word;
  /* Bootstrap 的 .table-responsive > .table td{white-space:nowrap} 會讓 overflow-wrap 失效，
     說明欄長文字因此撐寬容器並被硬切在螢幕右緣（實測 clientW 328 / scrollW 384）。 */
  white-space: normal;
}


/* 購物車頁是精簡頁首（實測吸頂後 73px），摘要原本硬寫 top:158px */
.route-checkout-cart { --ym-header-stuck-h: 73px; }
.ym-cart-summary { top: calc(var(--ym-header-stuck-h) + var(--ym-sticky-gap)); }
.ym-cart-layout { align-items: start; }

/* 商品頁收藏／分享鈕是 absolute，標題只留 52px 而工具列寬 89px，長標題最後一字被壓住 */
/* 特異度要壓過 .ym-v2 #product-product .ym-product-summary > h1（0,3,1）的 52px */
@media (min-width: 768px) {
  .ym-v2 #product-product .ym-product-summary > h1 { padding-right: 105px; }
}

/* 未選規格時的提示框 69px 把加入購物車推出 1366×768 首屏（6273 實測底邊 795 > 768）。
   這個狀態只是「還沒選」，不需要兩行＋大內距；壓成一行小字，選好規格顯示金額時
   再恢復正常尺寸，讓有必填規格的商品也能在第一屏看到 CTA。 */
.ym-live-quote.is-incomplete { padding: 6px 11px; margin-top: 4px; margin-bottom: 4px; }
.ym-live-quote.is-incomplete .ym-live-quote__total span { font-size: 13px; line-height: 1.35; }
/* 未選規格時第二行說明（同活動跨商品折扣…）沒有決策價值，選好規格才需要，
   在未選狀態隱藏可再省 20px，讓 6273 這種多選項商品的 CTA 也進第一屏。 */
.ym-live-quote.is-incomplete small { display: none; }

/* ============================================================
   商品詳情頁版型稽核（2026-08-29）— 先量測再修，數字見 commit message
   ============================================================ */

/* [P0][桌機] 主圖 sticky 觸底時壓進「商品詳情」白卡 37px。
   .ym-thumbs--vertical 用 grid-auto-rows:76px × span 6 宣告 506px 高，
   但主圖那格是「欄寬 572 的正方形」→ <li> 比它的 grid area 高 66px，
   .ym-product-gallery 的 border-box(506) 比實際畫出來的內容(572)矮 66px，
   position:sticky 因此晚 66px 才觸底。實測 scrollY 700/900/1100 三個位置，
   主圖底緣都固定壓進 .ym-product-details 上緣 37px。
   把主圖格子高度綁回 grid area(height:100%)，容器高度就誠實，sticky 也跟著正確。
   附帶好處：原圖只有 560px，本來被放大到 572（模糊），改成 506 是縮小，反而更銳利。 */
@media (min-width: 992px) {
  .ym-v2 #product-product .thumbnails.ym-thumbs--vertical > li:first-child { height: 100%; overflow: hidden; }
  /* a.thumbnail 是 display:grid + place-items:center，隱式 row track 由內容撐大 →
     img 的 height:100% 循環參照，被當成 auto，於是圖片仍照 width(562) 長成 562 高。
     把 track 釘成 1fr（容器高度已確定 506），height:100% 才有東西可解。 */
  .ym-v2 #product-product .thumbnails.ym-thumbs--vertical > li:first-child .thumbnail {
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
  }
}

/* [P1][桌機+手機] 「暫無庫存」把停售規格 chip 撐成兩行，比同一排的 chip 高 13px。
   根因：.radio small 是 width:100% 的 flex item，塞進 nowrap 的 inline-flex label 後，
   會把「1000ml (+26元)」這個匿名 text item 壓到換行。
   實測：停售 chip label 53.1px、可選 chip 40px；手機更嚴重 —— 停售 chip 獨佔一整列(198.5px)，
   另兩個規格被擠到下一列，同一組選項出現兩種高度、兩排。 */
.ym-v2 #product-product #product .ym-product-option--radio .radio small { width: auto; flex: 0 0 auto; }
.ym-v2 #product-product #product .ym-product-option--radio .radio label { flex-wrap: nowrap; white-space: nowrap; }

/* [P1][桌機+手機] 推薦區白卡比「商品詳情」「商品評論」兩張白卡左右各窄 20px(桌機)／14px(手機)。
   根因：.ym-commerce--recommendations 同時帶 .ym-shell（width: min(100% - 40px, 1520px)），
   但它已經在 .container 版心裡，等於二次內縮。實測桌機 55→1385 vs 另兩張 35→1405。
   ⚠ 2026-08-30 更新：當時判斷「加購段 __band 出血回 35 所以本來就對齊」只對了一半 ——
   對齊的是底色帶，帶子裡那張白卡仍在 55→1385，形成卡中卡。
   加購段的修法改在 ym-v2-product-commerce.css（band 直接當卡、block 不再自帶卡片外觀）。 */
#product-product .ym-commerce--recommendations.ym-shell { width: 100%; }

@media (max-width: 767px) {
  /* [P1][手機] 安心保證列三欄 nowrap 剛好把 316px 塞滿（53.1+56+190.8+2×8 = 315.9），
     零餘裕 → 「安心付款」斷成「安心付／款」、「真人客服」斷成「真人客／服」，
     三項高度全部從桌機的 18.6px 變成 35.2px。改成可換行，LINE 詢問獨佔一列並補足 44px 觸控高。 */
  .ym-v2 .ym-pdp-reassurance { flex-wrap: wrap; justify-content: flex-start; gap: 4px 16px; }
  .ym-v2 .ym-pdp-reassurance > span,
  .ym-v2 .ym-pdp-reassurance > small { white-space: nowrap; }
  .ym-v2 .ym-pdp-reassurance > .ym-line-order { flex: 1 0 100%; min-height: 44px; margin-top: 4px; justify-content: center; }

  /* [P2][手機] 只會填 1~2 位數的數量框佔了 96px，主 CTA 只剩 166px（一列 316px 的 52%）。
     縮到 64px，「加入購物車」拿回 32px → 198px(63%)。 */
  .ym-v2 #product-product .ym-buy-row #input-quantity { width: 64px; min-width: 0; flex: 0 0 64px; }
}

/* =========================================================================
   [版面統一][桌機+手機] 商品詳情頁：一組網格、一種卡片
   使用者回饋：「很像東拼一堆西拼一堆」「整個商品詳情頁風格要一致」。
   1440 實測改前有 5 種左右邊界（下表為量到的 L→R）：
     .row.ym-product-main   35→1405（＝#content 內容框，正確基準）
     .ym-product-gallery    53→713    ✗ 左內縮 18
     .ym-product-summary    731→1387  ✗ 右內縮 18
     .ym-product-details    35→1405   ✓
     .ym-commerce--purchase 55→1385   ✗ 左右各內縮 20（在 commerce.css 修）
   根因（主圖／右欄那 18px）：Bootstrap .row 的 clearfix 偽元素
   .row:before / .row:after（content:" "; display:table）在 display:flex 的
   .ym-product-main 裡會被 blockify 成「兩個寬度 0 的 flex item」，
   於是頭尾各多吃掉一份 gap:18px。不是 padding、也不是 margin，
   所以先前把 padding-inline 設 0 完全沒有效果。
   ========================================================================= */

#product-product {
  --ym-pdp-card-pad-y: 22px;
  --ym-pdp-card-pad-x: 24px;
  --ym-pdp-card-radius: var(--ym-radius-lg);
  --ym-pdp-card-gap: 20px;
  --ym-pdp-title: 20px;
}
@media (max-width: 767px) {
  #product-product {
    --ym-pdp-card-pad-y: 14px;
    --ym-pdp-card-pad-x: 12px;
    --ym-pdp-card-radius: var(--ym-radius-md);
    --ym-pdp-card-gap: 12px;
    --ym-pdp-title: 18px;
  }
}

/* ---- 1. 主列對齊：主圖卡與資訊卡切齊 #content 內容框 ---- */
.ym-v2 #product-product .ym-product-main { margin-inline: 0; gap: 18px; }
.ym-v2 #product-product .ym-product-main::before,
.ym-v2 #product-product .ym-product-main::after { display: none; }
.ym-v2 #product-product .ym-product-gallery,
.ym-v2 #product-product .ym-product-summary { float: none; padding-inline: 0; }
@media (min-width: 768px) {
  /* 55/45 兩欄，各扣一半的 gap，總和才會剛好等於基準寬 */
  .ym-v2 #product-product .ym-product-gallery { width: calc(55% - 9px); }
  .ym-v2 #product-product .ym-product-summary { width: calc(45% - 9px); }
}

/* ---- 2. 同一種卡片：圓角／內距／框線／陰影全 PDP 統一 ---- */
.ym-v2 #product-product .ym-product-main > [class*="col-sm-"]:last-child,
.ym-v2 #product-product .ym-product-summary,
#product-product .ym-product-details,
#product-product .ym-reviews,
#product-product .ym-product-tags {
  padding: var(--ym-pdp-card-pad-y) var(--ym-pdp-card-pad-x);
  border: 1px solid var(--ym-line);
  border-radius: var(--ym-pdp-card-radius);
  background: #fff;
  box-shadow: var(--ym-shadow-sm);
}
#product-product .ym-product-details,
#product-product .ym-reviews,
#product-product .ym-product-tags { margin: var(--ym-pdp-card-gap) 0 0; }
#product-product .ym-product-details { scroll-margin-top: 150px; }
/* 區塊標題字級：加購／推薦／評論／標籤同一級 */
#product-product .ym-reviews .ymr-title,
#product-product .ym-product-tags__label { font-size: var(--ym-pdp-title); font-weight: 800; }

/* ---- 3. 三段提示：同一種卡殼，靠 icon 顏色分輕重，不再綠卡／黃卡混搭 ---- */
.ym-v2 #product-product .ym-ship-promise,
.ym-v2 #product-product .ym-live-quote {
  padding: 10px 12px;
  border: 1px solid var(--ym-line);
  border-radius: var(--ym-radius-sm);
  background: var(--ym-cream);
}
.ym-v2 #product-product .ym-ship-promise { margin: 0 0 8px; }
.ym-v2 #product-product .ym-live-quote { margin: 8px 0 0; }
.ym-v2 #product-product .ym-ship-promise strong { color: var(--ym-ink); font-size: 14px; }
.ym-v2 #product-product .ym-ship-promise strong .fa { color: var(--ym-success); }
.ym-v2 #product-product .ym-ship-promise small { color: var(--ym-muted); }
/* [YM 2026-08-30] 現貨・48 小時出貨要看得見
   上面第 3 段把三張提示卡統一成同一種米色卡殼（刻意的，避免綠卡黃卡混搭）。
   但老闆指出「有現貨」是最該被看到的一句，統一之後反而被洗成背景。
   折衷：只有 --in（有現貨）這一種加回綠色調與左側色條，--out（預購）與試算卡維持中性，
   卡殼、圓角、內距都不動 —— 差異只加在顏色與一條 3px 色條上。 */
.ym-v2 #product-product .ym-ship-promise--in {
  border-color: #cfe7da;
  border-left: 3px solid var(--ym-success);
  background: #f1f9f4;
}
.ym-v2 #product-product .ym-ship-promise--in strong { color: #14663f; font-weight: 900; }
.ym-v2 #product-product .ym-ship-promise--in small { color: #4f6a5c; }

/* 主圖角標：跟著 .ym-product-gallery 定位 */
.ym-v2 #product-product .thumbnails > li:first-child { position: relative; }
.ym-gallery-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  padding: 7px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--ym-radius-pill);
  background: var(--ym-success);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  box-shadow: var(--ym-shadow-sm);
  pointer-events: none;
}

/* [YM 2026-08-30] 老闆：「突顯立即購買」
   原本「加入購物車」是實心主色、「立即購買」是淡底次要，視覺上把人導去購物車。
   台灣電商（蝦皮／momo）慣例相反：直接購買才是主要動作。對調兩者的層級，
   尺寸與位置都不動，只換填色與框線。 */
.ym-v2 .ym-buy-now {
  border: 1px solid var(--ym-coral-strong);
  color: #fff;
  background: var(--ym-coral-strong);
  font-weight: 800;
}
.ym-v2 .ym-buy-now:hover,
.ym-v2 .ym-buy-now:focus { color: #fff; background: var(--ym-coral-dark); border-color: var(--ym-coral-dark); }
.ym-v2 .ym-buy-row #button-cart {
  border: 1px solid var(--ym-coral-strong);
  /* !important 是被迫的：#button-cart 帶 .btn-primary，而本檔 585 行的
     `.ym-v2 .btn-primary { color:#fff !important }` 連 ID 選擇器都壓得過。
     不加的話這顆會變成白底白字（實測 bg 與 color 都是 rgb(255,255,255)）。 */
  color: var(--ym-coral-dark) !important;
  background: #fff;
}
.ym-v2 .ym-buy-row #button-cart:hover,
.ym-v2 .ym-buy-row #button-cart:focus { background: var(--ym-blush); }
/* 稀缺感（只剩 N 件）是轉換要素，保留 —— 但只用主色字，不再整張卡換底色 */
.ym-v2 #product-product .ym-ship-promise--low strong,
.ym-v2 #product-product .ym-ship-promise--low strong .fa { color: var(--ym-coral-strong); }
.ym-v2 #product-product .ym-ship-promise--out strong .fa { color: var(--ym-warning); }
/* 「還沒選規格」是提示不是錯誤：中性卡＋主色左緣；真的被擋下來（is-blocking）才升級成紅 */
.ym-v2 #product-product .ym-live-quote.is-incomplete {
  border-color: var(--ym-line);
  border-left: 3px solid var(--ym-coral);
  background: var(--ym-cream);
}
.ym-v2 #product-product .ym-live-quote.is-incomplete .ym-live-quote__total span { color: var(--ym-ink); }
.ym-v2 #product-product .ym-live-quote.is-incomplete .ym-live-quote__total span::before { content: none; }
.ym-v2 #product-product .ym-live-quote.is-incomplete small { color: var(--ym-muted); font-weight: 700; }
.ym-v2 #product-product .ym-live-quote.is-incomplete.is-blocking { border-left-color: var(--ym-coral-strong); background: #fff1f3; }
.ym-v2 #product-product .ym-live-quote.is-incomplete.is-blocking .ym-live-quote__total span,
.ym-v2 #product-product .ym-live-quote.is-incomplete.is-blocking small { color: #a3243f; }
.ym-v2 #product-product .ym-live-quote.is-incomplete.is-blocking .ym-live-quote__total span::before { content: "\26A0"; margin-right: 5px; }

/* ---- 4. 使用者指定不顯示：「款式及尺寸：」標題與「必填」標記 ----
   兩者都擠在規格 chip 上方（實測標題 y=490、必填 y=530、chip y=583）。
   只拿掉「視覺標記」：標題改 sr-only 保留給螢幕閱讀器，
   必填的 required / aria-required 屬性與後端驗證完全不動 —— 沒選規格照樣擋。 */
.ym-v2 #product-product .ym-product-options { padding-top: 14px; }
/* 標題本身帶 .sr-only，但 .ym-product-options > h3 的 width:100%/grid-column
   特異度比 .sr-only 高，所以要在這裡把尺寸壓回 1px，否則它仍會佔一整列。 */
.ym-v2 #product-product .ym-product-options__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
.ym-v2 #product-product #product .ym-required-marker { display: none; }

/* ---- 5. 購買列：兩顆 CTA 並排 ----
   [2026-08-31] 數量已上移到 .ym-buy-meta 一列（出貨/數量/小計）；
   欄比改 1fr 1.5fr —— 老闆：「強調立即購買」（酷澎/蝦皮同款權重）。 */
@media (min-width: 768px) {
  .ym-v2 #product-product .ym-buy-row {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    align-items: center;
    gap: 10px 12px;
  }
  .ym-v2 #product-product .ym-buy-row #button-cart,
  .ym-v2 #product-product .ym-buy-row .ym-buy-now {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    margin: 0;
    border-radius: var(--ym-radius-sm);
    font-size: 16px;
  }
}

/* ---- 6. 評論卡：原本只有一條 border-top，跟上下白卡不是同一種東西 ---- */
#product-product .ym-reviews:has(.ymr-empty) {
  margin: var(--ym-pdp-card-gap) 0 0;
  padding: var(--ym-pdp-card-pad-y) var(--ym-pdp-card-pad-x);
}
#product-product .ym-reviews:has(.ymr-empty) .ymr-title { font-size: var(--ym-pdp-title); }
@media (max-width: 767px) {
  /* 評論表單原本靠 -15px 出血貼齊舊版滿寬版面，進卡片後會頂出去 */
  #product-product .ym-reviews .ymr-form-wrap { margin-inline: 0; border-radius: var(--ym-radius-sm); }
}

/* ---- 7. 標籤列：商品詳情頁現代感晶片標籤 ---- */
#product-product .ym-product-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 16px 20px;
  margin-top: 16px;
  background: #fff;
  border: 1px solid var(--ym-line);
  border-radius: var(--ym-pdp-card-radius);
  box-shadow: var(--ym-shadow-sm);
}
#product-product .ym-product-tags__label {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--ym-ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#product-product .ym-product-tags__label i {
  color: var(--ym-coral-strong);
}
#product-product .ym-product-tags__list {
  min-width: 0;
  display: flex;
  flex: 1 1 240px;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
#product-product .ym-product-tags__list a,
#product-product .ym-tag-chip {
  min-height: 32px;
  padding: 5px 14px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--ym-radius-pill);
  color: #a43e52;
  background: rgba(207, 86, 109, 0.08);
  border: 1px solid rgba(207, 86, 109, 0.2);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s ease;
}
#product-product .ym-product-tags__list a .hash,
#product-product .ym-tag-chip .hash {
  color: var(--ym-coral-strong);
  margin-right: 2px;
  font-weight: 700;
}
#product-product .ym-product-tags__list a:hover,
#product-product .ym-tag-chip:hover,
#product-product .ym-product-tags__list a:focus-visible {
  color: #fff;
  background: var(--ym-coral-strong);
  border-color: var(--ym-coral-strong);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(207, 86, 109, 0.28);
}
#product-product .ym-product-tags__list a:hover .hash,
#product-product .ym-tag-chip:hover .hash {
  color: #fff;
}

/* ---- 8. 規格欄位標籤：Bootstrap 原生 legend 是 21px / weight 400 / 灰底線，
   比全頁任何一個區塊標題都大，而且灰線的顏色不是 --ym-line。
   拿掉「款式及尺寸：」之後它就是這一段唯一的標題，字級必須降回欄位標籤層級。
   數量標籤原本 16px 也一併對齊，同一張卡裡不要有兩種欄位標籤。 ---- */
.ym-v2 #product-product #product .ym-product-option > legend,
.ym-v2 #product-product #product .ym-product-option > .control-label,
.ym-v2 #product-product .ym-product-quantity .control-label {
  width: auto;
  margin: 0 0 8px;
  padding: 0;
  display: block;
  border: 0;
  color: var(--ym-ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
}
.ym-v2 #product-product .ym-product-quantity .control-label { margin: 0; }

/* =========================================================================
   [P2][桌機+手機] 頁尾服務保證列：文字沒有垂直置中，整體偏上
   使用者回饋：「快速出貨／安心購物／真人客服／大量採購 這個區塊
   整體的位置也沒有垂直置中，比較偏上方邊界」。
   實測 42px 的格子裡：標題上緣距格 5px、副標下緣距格 1px。
   根因：span 是 display:block、自己帶 line-height 25.6px（16×1.6）的 strut，
   裡面的 strong 是 inline（line-height 22.4），行盒以 strut 基線對齊，
   多出來的 leading 全堆到上面；small 才是 block（15.4）。
   改成 flex column + justify-content:center，兩行都變 flex item（沒有 strut），
   上下留白由 align-items:center 平均分配。 */
/* （這段垂直置中的修正已經內建在上面的 .ym-trust-strip，不再另外寫一份） */

/* =========================================================================
   [P1][桌機] 商品卡的圖偏左 —— max-height 夾住 aspect-ratio 方塊會連寬度一起縮
   使用者回報「商品卡的圖在桌機偏左」。實測 1440 首頁：
     卡片 335 寬，但圖磚 .image a 只有 236×236 且貼在左邊，右邊空 98px。
     圖片本身其實填滿了圖磚（gapL=0 gapR=0）—— 縮掉的是「磚」不是「圖」。
   根因：@media(min-width:1101px) 給 .image a 加了 max-height:236px，
   而 .image a 是 aspect-ratio:1/1 的區塊；高度被 max-height 夾掉之後，
   瀏覽器會依比例把寬度一起收成 236，區塊又是靠左排的，於是整磚偏左。
   （原意是「封頂縮圖高度、寬螢幕不要把卡撐胖」，方向對、手段錯。）

   修法：拿掉 max-height，圖磚在所有斷點都是「滿版正方形」——
   跟手機（實測 276×276、使用者說手機是對的）完全一致。
   object-fit 兩邊統一用 contain：站上縮圖是 OpenCart 產的正方圖
   （-240x240 / -360x360），正方來源下 contain 與 cover 結果相同，
   但遇到非正方的來源時 contain 不會把商品裁掉 —— 商品照不該被裁。
   代價：≥1101 桌機的卡片會變高（首頁 388→約 485、分類頁 388→約 414），
   這是 2026-08-29「桌機縱向收短」那一版拿高度換來的，此處優先修正確性。
   ========================================================================= */
.ym-v2 .product-thumb .image img { object-fit: contain; background: #f8f5f3; }
@media (min-width: 1101px) {
  .ym-v2 .product-thumb .image a { max-height: none; }
}

/* [P1][桌機+手機] 同一排卡片的價格與按鈕高低不齊
   實測 1440 首頁第二排：#6「可愛mini小熊12色繪畫鉛筆」品名只有 1 行（h=23），
   它的價格 y=2158，同排另外三張（品名 2 行 h=46）是 y=2180 —— 差 22px。
   手機同一張差 19px。按鈕列因為有 margin-top:auto 所以還對齊，但價格會浮上去。
   根因：品名的 2 行保底高度被下面這兩條規則歸零（min-height:0），
   line-clamp 只限制上限、不保證下限，1 行的品名就把價格往上拉。
   3.04em = line-height 1.52 × 2 行，字級改了也會自己跟著對。 */
.ym-product-card .caption h3,
.ym-product-card .caption h4 { min-height: 3.04em; }
.ym-product-card .caption h3 > a,
.ym-product-card .caption h4 > a { min-height: 44px; }
@media (max-width: 767px) {
  .ym-product-card .caption h3,
  .ym-product-card .caption h4 { min-height: 3.04em; }
}

/* =========================================================================
   [P1][桌機+手機] 數量階梯不像可以點 —— 直接損失客單價
   使用者：「我數打 2 他才顯有折扣」「是不是可以先出幾個達標數量的快速加入的選項」。
   實測功能本來就正常（點了會填數量、切換選中、重算小計），
   問題純粹是「看不出來可以點」：白底 + 1px 淡粉框，長得像資訊卡不像選項。
   這裡補的是可供性：靜態就有可按的立體感、hover/focus 明確、
   選中態加勾號，並在標題補一句「點一下就套用數量」告訴客人可以按。
   ========================================================================= */
.ym-tier-pricing__title { flex-wrap: wrap; }
.ym-tier-pricing__hint {
  margin-left: auto;
  color: var(--ym-muted);
  font-size: 11px;
  font-weight: 700;
}
.ym-tier {
  position: relative;
  border-color: #e3c6cd;
  box-shadow: 0 1px 0 #f2e2e6;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .15s ease;
}
.ym-tier:hover {
  border-color: var(--ym-coral-strong, #c54862);
  background: var(--ym-blush, #fceef1);
  box-shadow: var(--ym-shadow-cta);
  transform: translateY(-1px);
}
.ym-tier:active { transform: none; }
.ym-tier.is-active { box-shadow: var(--ym-shadow-cta); }
.ym-tier.is-active .ym-tier__qty::before {
  content: "\f00c";
  margin-right: 5px;
  color: var(--ym-coral-strong, #c54862);
  font-family: "FontAwesome YM", "FontAwesome";
  font-weight: normal;
}

/* =========================================================================
   [P2][桌機+手機] 登入頁「快速登入或註冊」跟上下兩張卡沒對齊
   實測 1440：三張卡的外框都在 35→1055（對齊），但內容不對齊 ——
     .ym-account-title  內距 18/22 → 內容 58→1032
     .ym-login-card     內距 20/22 → 內容 58→1032
     .ym-social-access  內距 13/14 → 內容 50→1040   ✗ 左右各外擴 8px
   圓角也是三種：帳號標題 24（--ym-radius-lg）、社群 16、登入卡 16。
   手機同樣：社群內容 45→345，另外兩張 48→342。
   修法：帳號頁所有卡片共用同一組內距與圓角，內容邊界自然對齊。
   手機另外把三個社群按鈕改成單欄等寬 —— 原本 Facebook/Google 各 145px、
   LINE 卻是 300px 滿版，三個同位階的動作卻有兩種寬度。
   ========================================================================= */
.ym-account-title,
.ym-social-access,
.ym-login-card { padding: 20px 22px; border-radius: var(--ym-radius-md); }
.ym-social-access { margin: 0 0 14px; }
@media (max-width: 767px) {
  .ym-account-title,
  .ym-social-access,
  .ym-login-card { padding: 18px; border-radius: var(--ym-radius-md); }
  .ym-social-access__providers { grid-template-columns: 1fr; }
  .ym-social-access__providers .ym-login-line { grid-column: auto; }
  .ym-tier-pricing__hint { margin-left: 0; flex-basis: 100%; }
}

/* =========================================================================
   [P1][桌機+手機] 折扣要「先告訴人家有」，不是滿了才跳
   舊版商品頁只把規則印出來（「買 3 件 266/件」「符合活動商品金額滿 $500」），
   客人得自己算差多少，而且是被動的一行字。
   這裡補三個東西：
     1. 階梯價下方常駐一行「還差幾件／不湊會多付多少」（進頁就在，不必達標）
     2. 活動窄列改講進度與差額，不再只印門檻規則
     3. 兩者都走損失框架，用 coral-dark 讓差額數字被看見
   ========================================================================= */
.ym-tier-gap {
  margin: 9px 0 0;
  padding: 8px 10px;
  border-radius: var(--ym-radius-xs);
  background: var(--ym-blush, #fceef1);
  color: var(--ym-ink, #30292b);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
}

.ym-tier-gap[hidden] { display: none !important; }
.ym-tier-gap b { color: var(--ym-coral-dark, #9f3d53); font-weight: 900; }
.ym-tier-gap.is-max { background: #eaf5ef; }
.ym-tier-gap.is-max b { color: #1f6b4a; }

/* 活動窄列一行式：活動名靠左、進度靠右（左右配平），一檔活動一列。
   舊版把完整損失框架文案 flex-basis:100% 疊成第二、三行，整塊撐太高（老闆點名）。 */
.ym-product-campaigns__list { display: grid; grid-template-columns: 1fr; gap: 6px; }
.ym-product-campaigns__item {
  width: 100%;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}
.ym-product-campaigns__name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ym-product-campaigns__nudge {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  color: #55464a;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.45;
  text-align: right;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ym-product-campaigns__item .fa { flex: 0 0 auto; }

.ym-product-campaigns__nudge b { color: var(--ym-coral-dark, #9f3d53); font-weight: 900; }
.ym-product-campaigns__item.is-max .ym-product-campaigns__nudge b { color: #1f6b4a; }

@media (max-width: 767px) {
  .ym-tier-gap { font-size: 12px; padding: 7px 9px; }
  .ym-product-campaigns__nudge { font-size: 11px; }
}

/* 商品頁的 .cl-toast 預設 bottom:24px 會壓在手機固定購買列（64px 高）上，
   往上讓一個列高，兩者都看得到。 */
@media (max-width: 767px) {
  #product-product .cl-toast { bottom: calc(82px + env(safe-area-inset-bottom)); }
}

/* =========================================================================
   [2026-08-30][元件一致性] 商品頁：規格區 + 主圖下方資訊欄
   ========================================================================= */

/* ---- A. 規格 chip：一種尺寸、一種圓角、停售標記是獨立的 badge ----
   使用者回報「商品詳細的選項還是會貼到」。1440／390 實測沒有幾何重疊，
   真正的問題是「停售標記黏在值名稱後面」：
     <label>白色 <small>暫無庫存</small></label>
   small 只是 flex 裡的一個 inline 文字，跟「白色」之間只有 7px 的 gap，
   兩段字級只差 1px（13 vs 12）、顏色又都在同一個灰階，讀起來就是一團 ——
   而且它讓那顆 chip 從 72px 撐到 127px（差 55px），手機一列本來排得下 4 顆變成 3+1 破行。
   改法：值名稱與停售標記之間畫一條分隔、標記改成有底色的小 badge、
   chip 給 min-width 讓一般值等寬，破行時節奏才會整齊。 */
.ym-v2 #product-product #product .ym-product-option--radio .radio label {
  min-width: 84px;
  justify-content: center;
  border-radius: var(--ym-radius-sm);
}
.ym-v2 #product-product #product .ym-product-option--radio .radio label .ym-option-tag {
  margin-left: 2px;
  padding: 2px 7px;
  border-radius: var(--ym-radius-pill);
  color: var(--ym-muted);
  background: #f4eef0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}
.ym-v2 #product-product #product .ym-product-option--radio .radio label .ym-option-tag--out {
  color: var(--ym-coral-dark);
  background: var(--ym-blush);
}
.ym-v2 #product-product #product .ym-product-option--radio .radio label .ym-option-tag--preorder,
.ym-v2 #product-product #product .ym-product-option--checkbox .checkbox label .ym-option-tag--preorder {
  color: #925114;
  background: #fdf5ea;
  border: 1px solid #fae1c3;
}
/* 停售的整顆 chip：不要只是把整塊調淡（連字都看不清），改成底色壓下去、文字仍可讀。 */
.ym-v2 #product-product #product .ym-product-option--radio .ym-option-unavailable label {
  opacity: 1;
  border-style: dashed;
  border-color: #e6d5d9;
  color: #9a8d90;
  background: #fbf7f8;
}

/* ---- B. 多組規格之間的垂直節奏 ----
   .ym-product-options 是兩欄 grid、gap 12px，但 radio/checkbox 群組是整列（1/-1），
   於是「同一列兩欄之間」與「上下兩組之間」用的是同一個 12px，
   組與組之間看起來跟組內的欄距一樣近。標題到 chip 是 14px、組到組是 12px —— 組間比組內還窄。
   改成組間 20px、標題到 chip 8px，層級才對（近的黏在一起、遠的分開）。 */
.ym-v2 #product-product .ym-product-options { row-gap: 20px; }
.ym-v2 #product-product #product .ym-product-option--radio > div[id^="input-option"] { margin-top: 8px; }
.ym-v2 #product-product #product .ym-product-option > legend.sr-only + div[id^="input-option"] { margin-top: 0; }

/* ---- C. 主圖下方的商品資訊欄 ----
   跟 PDP 其他白卡同一套 token（--ym-pdp-card-*），不再是「右欄裡的一條分隔線」。 */
.ym-product-aside {
  margin-top: 18px;
  padding: var(--ym-pdp-card-pad-y) var(--ym-pdp-card-pad-x);
  border: 1px solid var(--ym-line);
  border-radius: var(--ym-pdp-card-radius);
  background: #fff;
  box-shadow: var(--ym-shadow-sm);
}
.ym-product-aside > .ym-fact:first-child { padding-top: 0; }
.ym-product-aside > .ym-fact:last-child { padding-bottom: 0; }
/* 配平（ym-v2.js balanceProductAside）把資訊卡搬進右欄購買卡時，
   退掉外框陰影變成購買卡內的一段；.ym-fact 自己的 border-top 就是分隔線。 */
.ym-v2 #product-product .ym-product-summary .ym-product-aside {
  margin-top: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.ym-v2 #product-product .ym-product-summary .ym-product-aside > .ym-fact:first-child { padding-top: 10px; border-top: 1px solid var(--ym-line); }

@media (max-width: 767px) {
  /* 手機沒有第二欄：主圖欄本來整個 display:none，現在要讓它活著載資訊欄，
     但只保留資訊欄本體（縮圖條在手機本來就沒顯示），並且排到購買區之後、商品詳情之前。
     不放在購買區之前是刻意的 —— 那會把「選規格→數量→加入購物車」再往下推一整張卡。 */
  .ym-v2 #product-product .ym-product-gallery { display: block; order: 2; width: 100%; }
  .ym-v2 #product-product .ym-product-gallery > .thumbnails { display: none; }
  .ym-v2 #product-product .ym-product-gallery:not(:has(.ym-product-aside)) { display: none; }
  .ym-product-aside { margin-top: var(--ym-pdp-card-gap); }
}

/* =========================================================================
   [2026-08-30][元件一致性] 控制項高度：三階量表
   稽核（getComputedStyle，1440 商品頁）量到 10 種按鈕高度：
     17 / 19 / 36 / 38 / 40 / 42 / 44 / 46 / 48 / 52 / 58
   同一種角色各自長出不同高：分享鈕 42、次要鈕 44、圖示鈕 40、推薦分頁 46、
   商品描述展開 48、加購「加入」36、頁尾展開 17。
   收斂成 sm(36) / md(44) / lg(52)：主 CTA lg、一般互動 md、卡片內的次要動作 sm。
   58px 的購物車鈕是 header action（圖示＋文字兩行）保留，那是另一個角色。
   ========================================================================= */
.ym-v2 .ym-rail-nav,
.ym-v2 #product-product .ym-description-toggle,
.ym-v2 .ym-commerce__rec-tab {
  min-height: var(--ym-ctl-md);
  height: auto;
}
.ym-v2 .ym-rail-nav { width: var(--ym-ctl-md); height: var(--ym-ctl-md); }
.ym-v2 #product-product .ym-product-tools .btn { min-height: var(--ym-ctl-md); }
/* 加購卡的「加入」是卡片內的次要動作：給 sm 的高度與同一個圓角（原本 border-radius: 0）。 */
.ym-v2 .ym-commerce__addon-button,
.ym-v2 .ym-commerce__addon-more {
  min-height: var(--ym-ctl-sm);
  border-radius: var(--ym-radius-sm);
}
/* 缺貨才升級成主 CTA 的 LINE 詢問鈕，被降權時桌機只有 19px 高，
   跟同一張卡裡任何一個可點元素都不同階。降權不等於縮到點不到。 */
.ym-v2 .ym-line-order--demoted { min-height: var(--ym-ctl-sm); }
@media (min-width: 768px) {
  /* 頁尾欄位標題在桌機是 17px 高的按鈕；就算不是觸控也低於 24px 的可點面積下限。 */
  .ym-v2 .ym-footer__toggle { min-height: 24px; }
}

/* -------------------------------------------------------------------------
   控制項高度：第二輪（min-height 收不掉的那幾個）
   第一輪只加 min-height，但這幾顆的高度是 padding + line-height 撐出來的，
   min-height 不會把它們壓下來。1440 商品頁量到還剩 40/42/46/46/48 五種。
     搜尋送出 40（同一個欄位裡的輸入框卻是 46）
     商品卡動作鈕 42
     推薦分頁 46 = 9+9+25.6+2
     加購小計鈕 46 = 10+10+25.6
     商品描述展開 48 = 10+10+25.6+2
   全部調 padding 落在 var(--ym-ctl-md)=44。
   保留兩個「不是按鈕角色」的例外並在此記錄：
     .ym-header-action 58px（圖示＋文字兩行的 header action）
     .ym-footer__toggle 24px（頁尾欄位標題，桌機是純文字標題不是按鈕）
   ------------------------------------------------------------------------- */
.ym-v2 .ym-search input[type="text"],
.ym-v2 .ym-search input[type="search"],
.ym-v2 #ym-search-input { min-height: var(--ym-ctl-md); height: var(--ym-ctl-md); }
.ym-v2 .ym-search button { min-height: var(--ym-ctl-md); }
.ym-v2 .product-thumb .button-group button,
.ym-v2 .product-thumb .button-group .btn { min-height: var(--ym-ctl-md); }
.ym-v2 .ym-commerce__rec-tab { padding-block: 8px; }
.ym-v2 #product-product .ym-description-toggle { padding-block: 8px; }

/* -------------------------------------------------------------------------
   表單欄位：一種圓角、一種框線
   量到三種框線寫法：數量框 1px #928589 圓角 10、加購下拉 1px #efdadd 圓角 8、
   結帳欄位 1px #dfd5d8 圓角 8。同一個「可輸入欄位」角色三種邊。
   統一成 1px #dfd5d8 + var(--ym-radius-sm)（#928589 對白底 4.0:1，
   當框線可以，但跟站上其他欄位不同色就只是不一致）。
   ------------------------------------------------------------------------- */
.ym-v2 .form-control,
.ym-v2 select.form-control,
.ym-v2 textarea.form-control,
.ym-v2 .ym-commerce__addon-option {
  border: 1px solid #dfd5d8;
  border-radius: var(--ym-radius-sm);
}
.ym-v2 .ym-search input,
.ym-v2 .ym-search .form-control { border: 0; border-radius: 0; }

/* [YM 2026-08-30] 擋單錯誤的對話框
   庫存不足這類「會讓確認訂單按了沒反應」的錯誤，只用頁面頂端的橫幅太容易錯過
   （結帳頁很長，客人往下捲填資料時根本看不到）。改成必須確認的對話框。
   橫幅仍然保留在原位，給螢幕閱讀器與捲回頂端時參照。 */
.ym-blocker {
  position: fixed;
  inset: 0;
  z-index: 2000;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(48, 41, 43, .55);
}
.ym-blocker__card {
  width: min(100%, 420px);
  padding: 24px;
  border-radius: var(--ym-radius-lg);
  background: #fff;
  box-shadow: var(--ym-shadow-lg);
  text-align: center;
}
.ym-blocker__title {
  margin: 0 0 12px;
  color: var(--ym-coral-dark);
  font-size: 19px;
  font-weight: 900;
  line-height: 1.35;
}
.ym-blocker__title .fa { margin-right: 6px; }
.ym-blocker__body {
  margin: 0 0 20px;
  color: var(--ym-ink);
  font-size: 15px;
  line-height: 1.6;
  /* 商品名稱可能很長且沒有空格，不換行會撐破卡片 */
  overflow-wrap: anywhere;
}
.ym-blocker__btn {
  width: 100%;
  min-height: var(--ym-ctl-lg);
  padding: 10px 18px;
  border: 0;
  border-radius: var(--ym-radius-sm);
  background: var(--ym-coral-strong);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}
.ym-blocker__btn:hover, .ym-blocker__btn:focus { background: var(--ym-coral-dark); }
.ym-blocker__btn:focus-visible { outline: 2px solid var(--ym-coral-dark); outline-offset: 2px; }

/* =========================================================================
   [2026-08-31][PDP 酷澎化] 購買區一列固定＋折數徽章＋立即購買主 CTA＋分頁置頂
   老闆整批指示：出貨/數量/小計一列且固定大小不跳動、折數與金額寫在價格旁、
   強調立即購買、下方分頁往下滑要置頂。
   ========================================================================= */
/* 1. 出貨承諾｜數量｜小計 一列（固定高度；試算不再整塊出現/收起） */
.ym-v2 #product-product .ym-buy-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 56px; margin: 4px 0 0; padding: 8px 0 4px; border-top: 1px solid #f2e7e9; }
.ym-v2 #product-product .ym-buy-meta .ym-ship-promise { margin: 0; padding: 0; background: none; border-radius: 0; display: inline-flex; align-items: center; gap: 6px; color: #14663f; font-size: 13px; font-weight: 800; white-space: nowrap; }
.ym-v2 #product-product .ym-buy-meta .ym-ship-promise--low { color: #b3562a; }
.ym-v2 #product-product .ym-buy-meta .ym-ship-promise--out { color: var(--ym-muted); }
.ym-v2 #product-product .ym-buy-meta .ym-product-quantity { margin-left: auto; }
.ym-buy-meta__total { display: flex; align-items: baseline; gap: 7px; }
.ym-buy-meta__total > span { color: var(--ym-muted); font-size: 13px; font-weight: 800; white-space: nowrap; }
.ym-buy-meta__total > strong { min-width: 104px; color: var(--ym-coral-dark); font-size: 22px; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; }
.ym-buy-meta.is-loading .ym-buy-meta__total > strong { opacity: .55; }
.ym-buy-meta.is-incomplete .ym-buy-meta__total > strong { color: var(--ym-muted); font-size: 15px; font-weight: 800; }
/* 折扣行固定保留一行高（JS 設空字、不收合），下面的按鈕不會被頂來頂去 */
.ym-v2 #product-product .ym-live-quote__discount { display: block; min-height: 19px; margin: 0 0 2px; color: #b3263f; font-size: 12.5px; font-weight: 800; line-height: 1.5; }
.ym-v2 #product-product .ym-live-quote__note { display: block; color: var(--ym-muted); font-size: 12px; }
.ym-v2 #product-product .ym-live-quote__note[hidden] { display: none; }

/* 2. 價格列：-N% 折數＋特價＋刪除線原價同列（酷澎樣式；折數由 ym-v2.js 算） */
.ym-product-pricing__row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ym-product-pricing__row h2 { margin: 0; }
.ym-price-off { padding: 3px 8px; border-radius: var(--ym-radius-pill); color: #fff; background: var(--ym-coral-strong); font-size: 13px; font-weight: 900; }
.ym-price-off[hidden] { display: none; }
.ym-price-original { color: #9e9497; font-size: 15px; }

/* 3. 主 CTA 權重：立即購買實心放大、加入購物車退成外框（酷澎/蝦皮同款） */
.ym-v2 #product-product .ym-buy-row #button-cart { flex: 1 1 140px; width: auto; min-height: 52px; margin-top: 10px; color: var(--ym-coral-dark); background: #fff; border: 1.5px solid var(--ym-coral-strong); }
.ym-v2 #product-product .ym-buy-row #button-cart:hover,
.ym-v2 #product-product .ym-buy-row #button-cart:focus { background: var(--ym-blush); }
.ym-v2 #product-product .ym-buy-row .ym-buy-now { flex: 1.5 1 190px; width: auto; min-height: 52px; margin-top: 10px; color: #fff; background: var(--ym-coral-strong); border: 0; font-size: 17px; font-weight: 900; }
.ym-v2 #product-product .ym-buy-row .ym-buy-now:hover,
.ym-v2 #product-product .ym-buy-row .ym-buy-now:focus { color: #fff; background: var(--ym-coral-dark); }

/* 4. 商品詳情分頁列捲動置頂（酷澎：往下滑分頁 bar 固定在頂） */
.ym-product-details .nav-tabs.ym-product-tabs--sticky { position: sticky; top: 0; z-index: 6; background: #fff; }
@media (max-width: 767px) {
  .ym-product-details .nav-tabs.ym-product-tabs--sticky { top: 62px; }
}
.ym-product-tabs__jump a { color: var(--ym-ink); }

/* 5. 手機：出貨承諾佔整行、數量與小計第二行左右配平 */
@media (max-width: 767px) {
  .ym-v2 #product-product .ym-buy-meta { gap: 6px 12px; min-height: 0; }
  .ym-v2 #product-product .ym-buy-meta .ym-ship-promise { flex: 1 1 100%; white-space: normal; }
  .ym-v2 #product-product .ym-buy-meta .ym-product-quantity { margin-left: 0; }
  .ym-buy-meta__total { margin-left: auto; }
}

/* [2026-08-31] 商品型號／庫存狀態一列小字（老闆：放到價格區塊；原在商品描述末端） */
.ym-product-idline { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 4px 0 0; color: var(--ym-muted); font-size: 12.5px; }
.ym-product-idline b { color: var(--ym-ink); font-weight: 700; }

/* 詢價車按鈕（quote_request.js 動態插在 .ym-buy-row 之後）。
   加入購物車是主 CTA、LINE 已降權成文字連結，詢價車取中間階：
   有外框看得見，但不滿寬、不搶主按鈕的視覺重量。 */
.ym-v2 .ym-quote-btn {
  margin-top: 8px;
  min-height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #cbd5d0;
  border-radius: 8px;
  background: #fff;
  color: #2f3b35;
  font-size: 14px;
  font-weight: 700;
}
.ym-v2 .ym-quote-btn:hover,
.ym-v2 .ym-quote-btn:focus { border-color: #087d39; background: #f3faf6; color: #066f32; }
.ym-v2 .ym-quote-btn.disabled { opacity: .6; pointer-events: none; }
@media (max-width: 767px) {
  .ym-v2 .ym-quote-btn { width: 100%; justify-content: center; }
}

/* [2026-09-01] 首頁被 layout 吐出的裸社群登入模組，收編成 .ym-social-access 後限寬置中 */
.ym-social-access--float { width: min(calc(100% - 32px), 560px); margin: 26px auto; }
/* 結帳登入卡下的同款元件與登入頁同視覺，寬度跟卡片對齊 */
.route-checkout-checkout #d_quickcheckout .ym-social-access { margin: -6px 0 18px; }

/* [2026-09-01] 老闆：商品卡主鈕=加入購物車、愛心/比較 icon 就好。
   首頁實測三顆被某條規則攤成等寬（101px×3），這裡拍板固定：主鈕吃滿、兩顆 icon 44px。 */
.ym-v2 .ym-product-card .product-thumb .button-group,
.ym-v2 .product-thumb .button-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px 44px;
}

/* [2026-09-01] 登入/註冊頁：標題橫幅移除後，社群登入內嵌進表單卡（一般網站慣例）。
   內嵌版去掉卡片外框、三顆改直排貼齊表單寬；上方配「或用社群帳號繼續」分隔線。 */
.ym-social-access--inline { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.ym-social-access--inline .ym-social-access__providers { grid-template-columns: 1fr; gap: 8px; }
.ym-social-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px; color: var(--ym-muted); font-size: 12.5px; white-space: nowrap; }
.ym-social-divider::before, .ym-social-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--ym-line); }

/* [2026-09-01] 出貨承諾可愛化（老闆指定）：雲朵象吉祥物＋粉底膠囊。
   購買列（.ym-buy-meta）內的版本蓋掉原本純文字樣式；缺貨轉灰不賣萌。 */
.ym-v2 #product-product .ym-buy-meta .ym-ship-promise {
  padding: 5px 14px 5px 6px;
  border: 1px solid #f6cdd5;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff4f6, #fff);
  color: var(--ym-coral-dark, #9f3d53);
}
.ym-ship-promise__mascot { width: 26px; height: 26px; border-radius: 50%; background: #fff; animation: ym-mascot-bob 2.6s ease-in-out infinite; }
@keyframes ym-mascot-bob {
  0%, 100% { transform: none; }
  30% { transform: translateY(-2px) rotate(-4deg); }
  60% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ym-ship-promise__mascot { animation: none; } }
.ym-v2 #product-product .ym-buy-meta .ym-ship-promise--low { color: #b3562a; border-color: #f2ddc9; background: linear-gradient(135deg, #fff8f0, #fff); }
.ym-v2 #product-product .ym-buy-meta .ym-ship-promise--preorder { color: #925114; border-color: #f5dfbf; background: linear-gradient(135deg, #fef9f2, #fff); }
.ym-v2 #product-product .ym-buy-meta .ym-ship-promise--out { color: var(--ym-muted); border-color: var(--ym-line); background: #f7f5f5; }
.ym-v2 #product-product .ym-buy-meta .ym-ship-promise--out .ym-ship-promise__mascot { filter: grayscale(1); opacity: .6; animation: none; }

/* 主圖角標同步可愛化：白底粉字＋雲朵象（原本是綠底白字閃電） */
.ym-gallery-badge {
  padding: 4px 12px 4px 5px;
  border: 1px solid #f6cdd5;
  background: rgba(255, 255, 255, .95);
  color: var(--ym-coral-dark, #9f3d53);
}
.ym-gallery-badge .ym-ship-promise__mascot { width: 22px; height: 22px; }

/* 主圖角標裡的吉祥物被縮圖列的 img 寬度規則撐爆（實測 180px 蓋住商品圖）——
   用同等特異度壓回 22px。 */
.ym-v2 #product-product .thumbnails > li:first-child .ym-gallery-badge .ym-ship-promise__mascot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

/* ==========================================================================
   [YM 2026-09-02] 版面 polish（老闆視覺回饋）
   1) 商品卡：評分/價格/按鈕之間留白，卡片等高、按鈕列切齊底部（每排對齊）。
   2) 會員表單（登入/註冊/編輯）：欄位不要撐滿超寬，收斂易讀。
   ========================================================================== */

/* 1) 商品卡呼吸感 + 按鈕列對齊 */
.ym-product-grid .product-layout { display: flex; }
.ym-product-grid .ym-product-card,
.ym-product-grid .product-layout > .ym-product-card { display: flex; flex-direction: column; width: 100%; }
.ym-product-card .caption { display: flex; flex-direction: column; flex: 1 1 auto; }
.ym-product-card .rating { margin: 2px 0 7px; }
.ym-product-card .price { margin: 0 0 13px; }
.ym-product-card .button-group { margin-top: auto; }

/* 2) 會員表單欄位收斂寬度（桌機），短欄位不要一路撐滿 */
@media (min-width: 768px) {
  .ym-account-content .form-group input.form-control,
  .ym-account-content .form-group select.form-control,
  .ym-account-content .form-group textarea.form-control,
  .ym-account-content input[type="text"],
  .ym-account-content input[type="email"],
  .ym-account-content input[type="tel"],
  .ym-account-content input[type="password"] { max-width: 480px; }
}