/* wx-buttons-refine.css
   官網按鈕統一（2026-10-30 老闆看完官網質感提案，選「從按鈕開始」）。只改外觀，不動按鈕做的事。
   全站三種：主要（實心、網站按鈕色）、次要（淡藍底細框，同色系）、頁首小按鈕。
   - 字一律 700；大按鈕圓角 12px、小按鈕 10px；滑鼠移上去只變深一點，不跳、不放大；按下去再深一點（手機看得出有按到）。
   - 冷色系，顏色全部從網站設定的按鈕色算出來（--primary-color／--pos-highlight／--pos-btn-bg），老闆在 POS 改按鈕色會一起變。
     老闆 10/30（登入視窗那邊）：「我的網站是專賣電玩」→ 不用暖色系。
   - 新樣式獨立成檔、放在 <head> 最後；商品頁、商品卡的舊規則有的寫在 <body> 裡或帶 !important，所以這裡也用 !important＋多一層選擇器蓋過。
   - 登入／註冊視窗的按鈕歸 wx-auth-modal-refine.css；結帳頁不在這支範圍內。拿掉這一支，按鈕就回到原本的樣子。 */

:root {
  --wxb-main: var(--primary-color, var(--pos-highlight, var(--pos-btn-bg, #587493)));
  --wxb-main-hover: color-mix(in srgb, var(--wxb-main) 84%, #1e293b);
  --wxb-main-press: color-mix(in srgb, var(--wxb-main) 72%, #1e293b);
  --wxb-tint: color-mix(in srgb, var(--wxb-main) 9%, #ffffff);
  --wxb-tint-hover: color-mix(in srgb, var(--wxb-main) 17%, #ffffff);
  --wxb-tint-press: color-mix(in srgb, var(--wxb-main) 24%, #ffffff);
  --wxb-tint-line: color-mix(in srgb, var(--wxb-main) 38%, #ffffff);
  --wxb-ink: #1e293b;
  --wxb-line: #dbe2ea;
  --wxb-ring: color-mix(in srgb, var(--wxb-main) 32%, transparent);
}

/* ---------- 商品頁：「立即預購」＝主要、「加入購物車」＝次要（含手機底部那條） ---------- */
html body .wx-product-detail__cta {
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  border-radius: 12px !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
}
html body .wx-product-detail__cta--buy:not(:disabled) {
  background: var(--wxb-main) !important;
  border-color: var(--wxb-main) !important;
  color: #ffffff !important;
}
html body .wx-product-detail__cta--cart:not(:disabled) {
  background: var(--wxb-tint) !important;
  border-color: var(--wxb-tint-line) !important;
  color: var(--wxb-main) !important;
}
@media (hover: hover) and (pointer: fine) {
  html body .wx-product-detail__cta--buy:hover:not(:disabled) { background: var(--wxb-main-hover) !important; border-color: var(--wxb-main-hover) !important; }
  html body .wx-product-detail__cta--cart:hover:not(:disabled) { background: var(--wxb-tint-hover) !important; border-color: var(--wxb-main) !important; }
}
html body .wx-product-detail__cta--buy:active:not(:disabled) { background: var(--wxb-main-press) !important; border-color: var(--wxb-main-press) !important; }
html body .wx-product-detail__cta--cart:active:not(:disabled) { background: var(--wxb-tint-press) !important; border-color: var(--wxb-main) !important; }

/* ---------- 首頁「查看全部預購」這類＝次要（原本空心膠囊、滑上去整顆變實心） ---------- */
html body.store-front-container .product-slider-section-container .wx-section-more-link,
html body .wx-section-more-link {
  min-height: 42px !important;
  padding: 0 26px !important;
  border-radius: 12px !important;
  border: 1px solid var(--wxb-tint-line) !important;
  background: var(--wxb-tint) !important;
  color: var(--wxb-main) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
}
@media (hover: hover) and (pointer: fine) {
  html body.store-front-container .product-slider-section-container .wx-section-more-link:hover,
  html body .wx-section-more-link:hover { background: var(--wxb-tint-hover) !important; border-color: var(--wxb-main) !important; color: var(--wxb-main) !important; }
}
html body.store-front-container .product-slider-section-container .wx-section-more-link:active,
html body .wx-section-more-link:active { background: var(--wxb-tint-press) !important; }

/* ---------- 商品卡「加入購物車」＝主要（保留原本的高度、圓角和電腦版「滑到圖上才出現」的做法，只統一字） ---------- */
html body .product-card .card-btn.btn-submit-order {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}
html body .product-card .card-btn.btn-submit-order:active:not(:disabled) { background: var(--wxb-main-press) !important; border-color: var(--wxb-main-press) !important; }

/* ---------- 頁首右上「查詢訂單／註冊會員／登入／會員中心／登出」＝小按鈕 ---------- */
html body .member-widget .mw-btn {
  min-height: 32px !important;
  padding: 0 13px !important;
  border-radius: 10px !important;
  border: 1px solid var(--wxb-line) !important;
  background: #ffffff !important;
  color: var(--wxb-ink) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
}
@media (hover: hover) and (pointer: fine) {
  html body .member-widget .mw-btn:hover { background: var(--wxb-tint) !important; border-color: var(--wxb-tint-line) !important; color: var(--wxb-main) !important; }
}
html body .member-widget .mw-btn:active { background: var(--wxb-tint-press) !important; }

/* ---------- 鍵盤操作時看得到焦點 ---------- */
html body .wx-product-detail__cta:focus-visible,
html body .wx-section-more-link:focus-visible,
html body .product-card .card-btn.btn-submit-order:focus-visible,
html body .member-widget .mw-btn:focus-visible {
  outline: 3px solid var(--wxb-ring) !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .wx-product-detail__cta,
  html body .wx-section-more-link,
  html body .member-widget .mw-btn { transition: none !important; }
}