/* 共同樣式 */
.hero-slot { position: relative; overflow: hidden; }
.hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: none; /* 先全部隱藏，依主題顯示對應圖 */
}

/* 明亮主題顯示 hero2.png */
:root[data-theme="light"] .hero-light,
body.theme-light .hero-light {
  display: block;
}

/* 護眼或深色主題顯示 hero.png */
:root[data-theme="護眼"] .hero-eye,
:root[data-theme="dark"] .hero-eye,
body.theme-dark .hero-eye {
  display: block;
}

/* 若頁面未設 data-theme，根據系統偏好做預設 */
:root:not([data-theme]) .hero-light { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .hero-light { display: none; }
  :root:not([data-theme]) .hero-eye { display: block; }
}
  .pay-logo {
    width:85px; height:85px;
    border-radius:15px;
    object-fit:contain;
    margin:6px;
    background:var(--card);
    border:1px solid var(--border);
    padding:.35rem;
  }

.product-card {
  border-radius: 1rem; /* 等於 Bootstrap 的 rounded-4 */
    border: 1px solid rgba(255,255,255,.08); /* 比背景亮一點 */
  overflow: hidden;    /* 避免內容超出邊角 */
}
/* ========== 漸層卡片（global） ========== */
/* 主題變數：可依喜好微調 */
:root,
html[data-theme='light'], body.theme-light{
  /* 亮色：卡片底色 + 一點 primary 淡色 */
  --card-grad-1: var(--card);
  --card-grad-2: rgba(37,99,235,.06); /* #2563eb 6% */
}
html[data-theme='dark'], body.theme-dark{
  /* 暗色：更深、對比更低一些 */
  --card-grad-1: var(--card);
  --card-grad-2: rgba(59,130,246,.12); /* #3b82f6 12% */
}
/* 若你有護眼主題 */
html[data-theme='護眼'], body.theme-護眼{
  --card-grad-1: var(--card);
  --card-grad-2: rgba(2,132,199,.10); /* #0284c7 10% */
}

/* 卡片本體：改成漸層背景 */
.product-card{
  background: linear-gradient(135deg, var(--card-grad-1) 0%, var(--card-grad-2) 100%) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(2,6,23,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  color: var(--text);
}

/* 讓卡片內的次要文字依然有對比 */
.product-card .muted{ color: var(--muted); }

/* Hover 效果（桌機） */
@media (hover:hover){
  .product-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(2,6,23,.10);
    border-color: rgba(37,99,235,.25);
  }
}

/* 卡片裡的按鈕在漸層上更清楚些 */
.product-card .btn.btn-outline-secondary{
  background: rgba(255,255,255,.06);
  border-color: var(--border);
}
html[data-theme='dark'] .product-card .btn.btn-outline-secondary,
body.theme-dark .product-card .btn.btn-outline-secondary{
  background: rgba(255,255,255,.03);
}
.product-card .btn.btn-outline-secondary:hover{
  border-color: rgba(37,99,235,.45);
}