/* ==============================
   攝影市集 全站共用樣式
   改版：溫暖有機視覺方向
   （依 doc/design_handoff_beja365_market_redesign/README.md）
   ============================== */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;0,600;1,500&family=Nunito+Sans:wght@400;600;700;800&display=swap');

:root {
  /* ── Design Tokens ── */
  --font-serif: 'Lora', Georgia, serif;
  --font-sans: 'Nunito Sans', 'Microsoft JhengHei', 'PingFang TC', Arial, sans-serif;

  --color-bg:          oklch(0.965 0.018 70);
  --color-surface:     #fffaf5;
  --color-surface-1:   oklch(0.92 0.03 60);
  --color-surface-2:   oklch(0.94 0.025 62);
  --color-surface-3:   oklch(0.94 0.025 65);
  --color-accent-bg:   oklch(0.9 0.035 55);

  --color-text:        oklch(0.28 0.03 50);
  --color-text-muted:  oklch(0.42 0.03 50);
  --color-text-muted-2: oklch(0.5 0.03 50);
  --color-text-muted-3: oklch(0.55 0.03 50);

  --color-accent-1:        oklch(0.62 0.14 40);
  --color-accent-1-hover:  oklch(0.56 0.14 40);
  --color-accent-1-active: oklch(0.5 0.14 40);
  --color-accent-1-soft:   oklch(0.62 0.14 40 / 0.12);
  --color-accent-2:        oklch(0.62 0.14 140);
  --color-accent-2-soft:   oklch(0.62 0.14 140 / 0.12);

  --color-border:      oklch(0.88 0.03 65);
  --color-border-soft: oklch(0.9 0.025 65);

  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 14px;
  --radius-pill: 20px;
  --radius-check: 5px;

  --shadow-card: 0 24px 64px -24px oklch(0.4 0.05 50 / 0.25);
  --shadow-card-soft: 0 10px 28px -14px oklch(0.4 0.05 50 / 0.28);

  /* ── Bootstrap 變數覆寫（安全範圍：primary / secondary / border，
       success/warning 維持原生語意，見下方「狀況標籤」說明）── */
  --bs-primary:      var(--color-accent-1);
  --bs-primary-rgb:  181, 92, 51;
  --bs-secondary:      oklch(0.5 0.03 50);
  --bs-secondary-rgb:  120, 106, 97;
  --bs-secondary-color: var(--color-text-muted-2);
  --bs-secondary-color-rgb: 120, 106, 97;
  --bs-tertiary-color: var(--color-text-muted-3);
  --bs-tertiary-bg: var(--color-surface-3);
  --bs-light:      var(--color-surface-3);
  --bs-light-rgb:  237, 232, 224;
  --bs-dark:      oklch(0.28 0.03 50);
  --bs-dark-rgb:  60, 52, 46;
  --bs-border-color: var(--color-border-soft);
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-bg);
  --bs-link-color: var(--color-accent-1);
  --bs-link-hover-color: var(--color-accent-1-hover);
  --bs-link-color-rgb: 181, 92, 51;
  --bs-link-hover-color-rgb: 158, 79, 43;
}

body {
  background-color: var(--color-bg);
  font-family: var(--font-sans);
  color: var(--color-text);
}

a { color: var(--color-accent-1); }
a:hover { color: var(--color-accent-1-hover); }
::selection { background: oklch(0.62 0.14 40 / 0.22); }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); }

/* ── Vue 載入前隱藏未編譯模板（避免閃現 {{ }}）── */
[v-cloak] { display: none !important; }

/* ── 頁面載入動畫（Vue 掛載前顯示，掛載後自動隱藏）── */
.page-loading {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--color-bg);
}
/* #app 仍帶 v-cloak（尚未掛載）時顯示載入動畫；Vue 掛載移除 v-cloak 後規則失效自動隱藏 */
[v-cloak] ~ .page-loading { display: flex; }
.page-loading .spinner-border {
  width: 3rem;
  height: 3rem;
  border-width: .3em;
}

/* ================================
   Navbar（AppNavbar，common.js）
   ================================ */
.navbar.bg-primary {
  background-color: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border);
}
.navbar.bg-primary .navbar-brand {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--color-text) !important;
}
.navbar.bg-primary .nav-link,
.navbar.bg-primary .navbar-nav .nav-link {
  color: var(--color-text-muted) !important;
  font-weight: 600;
  font-size: .9rem;
}
.navbar.bg-primary .nav-link:hover,
.navbar.bg-primary .nav-link:focus {
  color: var(--color-accent-1) !important;
}
.navbar.bg-primary .navbar-toggler {
  border-color: var(--color-border);
  box-shadow: none !important;
  padding: 4px 7px;
}
.navbar.bg-primary .navbar-toggler-icon {
  filter: invert(0.3) sepia(0.3) saturate(1) hue-rotate(-10deg);
  width: 1.15em;
  height: 1.15em;
}
.navbar.bg-primary form .input-group {
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--color-surface-3);
}
.navbar.bg-primary form .form-control {
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: .85rem;
  color: var(--color-text);
}
.navbar.bg-primary form .form-control::placeholder { color: var(--color-text-muted-3); }
.navbar.bg-primary form .btn {
  background: transparent;
  border: 0;
  color: var(--color-accent-1);
}
.navbar.bg-primary .nav-item > a.btn,
.navbar.bg-primary a.btn-outline-light {
  border-radius: var(--radius-pill);
}
/* 「發布商品」連結改 accent 實心膠囊 */
.navbar.bg-primary .navbar-nav > .nav-item > a.nav-link[href="/market/post"] {
  background: var(--color-accent-1);
  color: #fff !important;
  border-radius: var(--radius-pill);
  padding: .5rem 1.1rem;
  font-weight: 700;
}
.navbar.bg-primary .navbar-nav > .nav-item > a.nav-link[href="/market/post"]:hover {
  background: var(--color-accent-1-hover);
  color: #fff !important;
}
.navbar.bg-primary .dropdown-menu {
  --bs-dropdown-bg: var(--color-surface);
  background-color: var(--color-surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card-soft);
}
.navbar.bg-primary .dropdown-item:hover,
.navbar.bg-primary .dropdown-item:focus {
  background: var(--color-accent-1-soft);
  color: var(--color-accent-1);
}
.navbar.bg-primary .btn-outline-light {
  color: var(--color-text) !important;
  border-color: var(--color-border);
}
.navbar.bg-primary .btn-outline-light:hover {
  background: var(--color-accent-1-soft);
  border-color: var(--color-accent-1);
  color: var(--color-accent-1) !important;
}
/* 通知鈴鐺／會員選單圖示：底色轉亮後改用深色系 */
.notif-bell-btn {
  background: none;
  border: none;
  color: var(--color-text-muted);
  padding: 6px 8px;
  border-radius: 8px;
  position: relative;
  transition: color .15s, background .15s;
  line-height: 1;
}
.notif-bell-btn:hover { color: var(--color-accent-1); background: var(--color-accent-1-soft); }
.notif-bell-btn .notif-badge {
  position: absolute;
  top: 0; right: 0;
  background: var(--color-accent-1);
  color: #fff;
  border-radius: 10px;
  font-size: .58rem;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  min-width: 16px;
  text-align: center;
  transform: translate(40%, -30%);
}
.notif-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: 320px;
  max-height: 460px;
  overflow-y: auto;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-soft);
  z-index: 1080;
  border: 1px solid var(--color-border);
}
.notif-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  background: var(--color-surface);
  z-index: 1;
}
.notif-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  border-bottom: 1px solid oklch(0.94 0.025 65);
  text-decoration: none;
  color: inherit;
  transition: background .1s;
  cursor: pointer;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--color-accent-1-soft); }
.notif-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: .9rem;
}
.notif-icon.msg      { background: var(--color-accent-1-soft); color: var(--color-accent-1); }
.notif-icon.bargain  { background: oklch(0.85 0.08 75 / 0.35); color: oklch(0.5 0.1 75); }
.notif-icon.contact  { background: var(--color-accent-2-soft); color: var(--color-accent-2); }
.notif-icon.ordermsg { background: oklch(0.85 0.08 250 / 0.35); color: oklch(0.5 0.12 250); }
@media (max-width: 575.98px) {
  .notif-panel { width: 290px; right: -40px; }
}
/* 手機版會員選單：緊貼右側圖示展開，避免超出螢幕右緣被裁切 */
.mobile-member-dropdown .dropdown-menu {
  left: auto;
  right: 0;
  min-width: 190px;
}
/* 手機版頂列（Logo／文章／鈴鐺／會員／漢堡）緊縮間距，避免漢堡按鈕被擠到下一行；
   注意：不可強制 flex-wrap:nowrap，否則漢堡展開的 navbar-collapse 無法換行變成全寬，會擠成一團 */
@media (max-width: 575.98px) {
  .mobile-article-dropdown > button { padding: 3px 6px; font-size: .78rem; }
  .navbar.bg-primary .notif-bell-btn { padding: 5px 6px; }
}

/* ================================
   Footer（AppFooter，common.js）
   ================================ */
footer.bg-dark {
  background-color: oklch(0.26 0.03 50) !important;
}
footer.bg-dark h6 { font-family: var(--font-serif); font-weight: 600; }
footer.bg-dark a.text-secondary:hover { color: var(--color-accent-1) !important; }
footer.bg-dark hr.border-secondary { border-color: oklch(0.4 0.03 50) !important; }

/* 手機版「快速連結」清單改一行 2 欄（Bootstrap md 斷點以下欄位會疊成單欄，
   這裡讓清單本身改成 2 欄網格，避免 6 個連結直向排一長串） */
@media (max-width: 767.98px) {
  footer.bg-dark ul.list-unstyled {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    row-gap: 6px;
  }
}

/* ================================
   按鈕
   ================================ */
.btn { border-radius: var(--radius-pill); font-weight: 600; }
.btn-sm { border-radius: 18px; }

.btn-primary {
  background-color: var(--color-accent-1);
  border-color: var(--color-accent-1);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--color-accent-1-hover) !important;
  border-color: var(--color-accent-1-hover) !important;
  color: #fff;
}
.btn-check:checked + .btn-primary,
.btn-primary.active {
  background-color: var(--color-accent-1-active);
  border-color: var(--color-accent-1-active);
}

.btn-outline-primary {
  color: var(--color-accent-1);
  border-color: var(--color-accent-1);
  border-width: 1.5px;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--color-accent-1);
  border-color: var(--color-accent-1);
  color: #fff;
}

.btn-outline-secondary {
  color: var(--color-text-muted);
  border-color: var(--color-border);
  border-width: 1.5px;
  background: transparent;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
  background-color: var(--color-surface-3);
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn-outline-danger { border-width: 1.5px; }

/* ================================
   Badge / 狀況標籤
   --------------------------------
   說明：README 指定「二手＝綠、全新＝橘」，但目前 Fmt.conditionClass()
   回傳的 bg-success（全新）/ bg-warning（二手）與 bg-warning 的「徵求」
   標籤在列表視圖中是同層級的相鄰 <span> 手足元素、class 完全相同，
   CSS 選擇器無法區分兩者，若直接反轉 success/warning 顏色會連帶誤改
   「徵求」標籤與全站其他 success/warning 用途（驗證成功勾選、警示訊息等）。
   因此改為維持原生 success=綠／warning=黃 色相家族，但套用 README 的
   膠囊＋12% 透明底樣式語言，取兩者的折衷。
   ================================ */
.badge {
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: 0;
}
.badge.bg-success {
  background-color: oklch(0.62 0.14 140 / 0.14) !important;
  color: oklch(0.4 0.14 140) !important;
}
.badge.bg-warning {
  background-color: oklch(0.75 0.15 75 / 0.22) !important;
  color: oklch(0.45 0.13 75) !important;
}
.badge.bg-primary {
  background-color: var(--color-accent-1) !important;
}
.badge.bg-secondary {
  background-color: oklch(0.5 0.03 50 / 0.16) !important;
  color: var(--color-text-muted) !important;
}
.badge.bg-light {
  background-color: var(--color-surface-3) !important;
  color: var(--color-text-muted) !important;
  border-color: var(--color-border) !important;
}
.badge.bg-dark {
  background-color: oklch(0.28 0.03 50 / 0.72) !important;
}
.badge.bg-primary.bg-opacity-10 {
  background-color: var(--color-accent-1-soft) !important;
  color: var(--color-accent-1) !important;
  border-color: oklch(0.62 0.14 40 / 0.25) !important;
}

/* ── 商品卡片 ── */
.product-card {
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: none;
  border: 1px solid var(--color-border-soft) !important;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-soft);
}

.product-img-wrap {
  position: relative;
  overflow: hidden;
  padding-top: 75%; /* 4:3 ratio */
  background: var(--color-surface-1);
}
.product-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.product-card:hover .product-img {
  transform: scale(1.04);
}
.product-card .card-title { font-family: var(--font-sans); }

/* 兩行截斷 */
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}

/* ── 分類捲動列 ── */
.category-scroll {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.category-scroll::-webkit-scrollbar { display: none; }
.category-scroll .btn {
  border-radius: var(--radius-pill);
  font-size: .85rem;
  padding: .5rem 1rem;
}
.category-scroll .btn.btn-outline-secondary {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}
.category-scroll .btn.btn-primary {
  background: var(--color-accent-1);
  border-color: var(--color-accent-1);
}

/* ── 商品詳情頁 ── */
.main-image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #000;
  aspect-ratio: 4/3;
}
.main-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.thumb-img {
  cursor: pointer;
  opacity: .65;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  transition: opacity .2s, border-color .2s;
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
}
.thumb-img:hover,
.thumb-img.active {
  opacity: 1;
  border-color: var(--color-accent-1);
}

/* 商品詳情：桌機讓圖片欄在左、資訊欄在右（貼近設計稿），
   手機維持原有「資訊在上、圖片在下」順序不變。
   同一個 .row.g-4 底下還有「商品說明」「留言板」兩個 .col-12 手足元素，
   flex 子項未設定 order 時預設為 0，若只改兩個 .col-lg-6 的 order 卻不管
   .col-12，會讓它們的預設 order:0 比 order:1/2 還小、被擠到最上面
   （曾經發生過的 bug）。這裡用 .col-lg-6 ~ .col-12（.col-lg-6 為全站唯一
   只出現在 product.html 的 class，可安全排除影響其他頁面）明確把
   商品說明／留言板排在兩欄之後。 */
@media (min-width: 992px) {
  main .row.g-4 > .col-lg-6:nth-of-type(1) { order: 2; }
  main .row.g-4 > .col-lg-6:nth-of-type(2) { order: 1; }
  main .row.g-4 > .col-lg-6 ~ .col-12 { order: 3; }
}

/* 手機版：圖片欄提到最上方，其餘（資訊／商品說明／留言板）維持原本相對順序。
   只給圖片欄設 order:-1，其他三塊不設定、維持預設 order:0，
   彼此間自然保留原本的 DOM 順序（資訊 → 商品說明 → 留言板）。 */
@media (max-width: 991.98px) {
  main .row.g-4 > .col-lg-6:nth-of-type(2) { order: -1; }
}

/* 商品資訊表格（品牌/交易方式/地區…）改卡片＋兩端對齊列
   注意：Bootstrap 的 <td>/<th> 會各自用 background-color: var(--bs-table-bg)
   上色（--bs-table-bg 預設帶到 --bs-body-bg，跟這裡表格本身的
   var(--color-surface) 是兩個不同色階），tr 改 display:flex 後每個
   儲存格縮成文字寬度，兩色的落差就會在文字周圍變成一塊塊底色不一致的
   色塊。這裡把 --bs-table-bg 蓋成 transparent，讓儲存格背景透出表格
   本身統一的底色。 */
main .row.g-4 > .col-lg-6 table.table {
  --bs-table-bg: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  background: var(--color-surface);
}
main .row.g-4 > .col-lg-6 table.table tr {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
main .row.g-4 > .col-lg-6 table.table td:last-child {
  margin-left: 1rem;
}
main .row.g-4 > .col-lg-6 table.table td {
  border: 0;
  padding: .4rem .6rem;
}
main .row.g-4 > .col-lg-6 table.table td:first-child {
  color: var(--color-text-muted);
  font-weight: 600;
  white-space: nowrap;
}

/* ── 留言板 ── */
.message-item {
  border-left: 3px solid var(--color-accent-1);
  background: var(--color-surface-3);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: .75rem 1rem;
}
.message-item.is-seller {
  border-left-color: var(--color-accent-2);
  background: var(--color-accent-2-soft);
}

/* ── 價格文字 ── */
.price-text {
  font-family: var(--font-serif);
  color: var(--color-text);
  font-size: 1.4rem;
  font-weight: 600;
}

/* ── 會員/Auth 頁 ── */
.auth-wrapper {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
}
.auth-card {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-soft);
  background: var(--color-surface);
}
.auth-card h4 { font-family: var(--font-serif); }

/* ── 我的商品清單 ── */
.my-product-row {
  transition: background .15s;
}
.my-product-row:hover {
  background: var(--color-accent-1-soft);
}

/* ── 圖片上傳預覽 ── */
.preview-wrap {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface-1);
  cursor: pointer;
  border: 2px dashed var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.preview-wrap .remove-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
}
.preview-wrap.has-image { border-style: solid; border-color: var(--color-accent-1); }

/* ── Seller 資訊卡 ── */
.seller-card {
  border-radius: var(--radius-lg);
  border: none;
  background: var(--color-surface-2);
}

/* ── 商品列表視圖 ── */
.product-list-item {
  cursor: pointer;
  transition: background .15s;
  border-bottom: 1px solid var(--color-border-soft);
}
.product-list-item:hover { background: var(--color-accent-1-soft); }
.product-list-item:last-child { border-bottom: none !important; }

/* ── 視圖切換按鈕 ── */
.view-toggle .btn { line-height: 1; }

/* ── 靜態頁（條款/隱私）──*/
.static-page h2 { font-size: 1.1rem; margin-top: 2rem; font-family: var(--font-serif); }
.static-page p, .static-page li { color: var(--color-text-muted); line-height: 1.8; }

/* ================================
   卡片 / 表單 / 分頁 / 麵包屑 通用覆寫
   ================================ */
.card {
  --bs-card-bg: var(--color-surface);
  --bs-card-cap-bg: var(--color-surface-3);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border-color: var(--color-border-soft);
}
.card.border-0.shadow-sm {
  box-shadow: var(--shadow-card-soft) !important;
}

.form-select, .form-control {
  border-radius: var(--radius-pill);
  border-color: var(--color-border);
  color: var(--color-text);
}
.form-select:focus, .form-control:focus {
  border-color: var(--color-accent-1);
  box-shadow: 0 0 0 .2rem oklch(0.62 0.14 40 / 0.18);
}
.form-select-sm, .form-control-sm { border-radius: 14px; }
textarea.form-control { border-radius: var(--radius-sm); }
.input-group .form-control,
.input-group .form-select { border-radius: 0; }
.input-group > :first-child { border-top-left-radius: var(--radius-pill); border-bottom-left-radius: var(--radius-pill); }
.input-group > :last-child { border-top-right-radius: var(--radius-pill); border-bottom-right-radius: var(--radius-pill); }

.form-check-input {
  width: 1.05em;
  height: 1.05em;
  border-radius: var(--radius-check);
  border: 1.5px solid oklch(0.7 0.03 55);
}
.form-check-input:checked {
  background-color: var(--color-accent-1);
  border-color: var(--color-accent-1);
}
.form-check-input:focus {
  border-color: var(--color-accent-1);
  box-shadow: 0 0 0 .2rem oklch(0.62 0.14 40 / 0.18);
}
.form-check-input[type="radio"] { border-radius: 50%; }

.pagination .page-link {
  border-radius: 50%;
  margin: 0 3px;
  border: none;
  color: var(--color-text-muted);
  min-width: 38px;
  text-align: center;
}
.pagination .page-item.active .page-link {
  background-color: var(--color-accent-1);
  color: #fff;
}
.pagination .page-link:hover {
  background-color: var(--color-accent-1-soft);
  color: var(--color-accent-1);
}
.pagination .page-item.disabled .page-link {
  background: transparent;
  color: var(--color-border);
}

.breadcrumb { font-size: .85rem; }
.breadcrumb .breadcrumb-item,
.breadcrumb a {
  color: var(--color-text-muted-2);
}
.breadcrumb .breadcrumb-item.active {
  color: var(--color-text);
  font-weight: 600;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--color-text-muted-3);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--color-surface);
  background-color: var(--color-surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card-soft);
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--color-accent-1-soft);
  color: var(--color-accent-1);
}

.alert { border-radius: var(--radius-sm); }

/* 防止 Bootstrap 元件的 --bs-*-bg 預設沿用 --bs-body-bg（頁面底色已改，
   若元件不單獨處理背景會跟頁面融為一色），modal/toast 等浮層明確給底色 */
.modal-content {
  --bs-modal-bg: var(--color-surface);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
}
.toast {
  --bs-toast-bg: var(--color-surface);
}

.spinner-border.text-primary { color: var(--color-accent-1) !important; }

/* ================================
   手機版篩選收合面板（<details>/<summary>）
   category.html / search.html 共用
   ================================ */
details.filter-panel { border: none; }
details.filter-panel > summary {
  list-style: none;
  cursor: pointer;
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--color-accent-1);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  padding: .65rem 1.1rem;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
  width: fit-content;
}
details.filter-panel > summary::-webkit-details-marker { display: none; }
details.filter-panel > summary::marker { content: ""; }
details.filter-panel[open] > summary { margin-bottom: 12px; }

@media (max-width: 991.98px) {
  details.filter-panel > summary { display: inline-flex; }
}
@media (min-width: 992px) {
  /* 桌機強制常駐展開，不受 [open] 狀態影響。
     details 未加 open 屬性時有兩層瀏覽器內建隱藏機制都要蓋過：
     1) 舊版引擎（Firefox/Safari）：UA 樣式表的
        `details:not([open]) > *:not(summary) { display: none; }`。
     2) 新版 Chromium（118+）：內容改包在 `::details-content`
        虛擬元素裡，用 `content-visibility: hidden` + `block-size: 0`
        收合，這一層無法只靠覆寫子元素的 display 解決，必須直接
        針對 `::details-content` 覆寫。 */
  details.filter-panel > *:not(summary) { display: block !important; }
  details.filter-panel:not([open])::details-content {
    content-visibility: visible !important;
    block-size: auto !important;
    overflow: visible !important;
  }
}

/* ── 篩選側欄卡片（category.html / search.html 唯一使用 .card.sticky-top）── */
.col-lg-3 .card.sticky-top {
  background: var(--color-surface-2);
  border: none !important;
  box-shadow: none !important;
  border-radius: var(--radius-lg);
}
.col-lg-3 .card.sticky-top .card-body { padding: 24px; }
.col-lg-3 .card.sticky-top h6.fw-bold {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
}

/* search.html 分類 radio 清單：隱藏原生圓點，選中項改文字變色+粗體 */
.col-lg-3 .card.sticky-top .form-check-input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.col-lg-3 .card.sticky-top .form-check-input[type="radio"]:checked ~ .form-check-label {
  color: var(--color-accent-1);
  font-weight: 700;
}
.col-lg-3 .card.sticky-top .form-check-label {
  color: var(--color-text-muted);
  cursor: pointer;
}