@charset "UTF-8";
/* ==========================================================================
   大行日本藝術倉儲 ｜ 全域樣式表 style.css
   結構：01 設計變數 / 02 Reset / 03 共用元件 / 04 版型 / 05 區塊元件 / 06 頁尾 / 07 響應式
   ========================================================================== */

/* ==========================================================================
   01. 設計變數（Design Tokens）
   ========================================================================== */
:root {
  /* 字體 */
  --font-sans:  "Plus Jakarta Sans", "Noto Sans TC", "PingFang TC", system-ui, -apple-system, sans-serif;
  --font-serif: "Noto Serif TC", "Songti SC", "Source Han Serif TC", Georgia, serif;

  /* 米色系底色 */
  --c-bg:            #F8F6F0;
  --c-header:        #FDFCFA;
  --c-header-border: #E8E2D6;
  --c-paper:         #FCFAF7;
  --c-paper-2:       #FAF7F2;
  --c-cream:         #EFEBE1;
  --c-soft:          #E5DFD3;
  --c-line:          #DDD6C8;
  --c-line-2:        #ECE6D8;

  /* 卡片底色 */
  --c-hero-bg:   #E7E2D7;
  --c-card-a:    #ECE6DA;
  --c-card-b:    #E6DFD2;
  --c-card-c:    #EAE4D7;
  --c-card-d:    #EDE6D9;
  --c-card-e:    #E7E0D2;
  --c-card-f:    #ECE5D8;
  --c-ring-bg:   #EBE5D8;
  --c-icon-bg:   #F0EBE0;
  --c-search-bg: #EFECE3;
  --c-search-bd: #DDD6C7;

  /* 金／茶色 */
  --c-gold:        #B28247;
  --c-gold-hover:  #C89555;
  --c-brown:       #8C7654;
  --c-brown-hover: #786343;
  --c-gold-light:  #C5A880;
  --c-gold-pale:   #E7D6BE;
  --c-wine:        #3e0500;
  --c-wine-2:      #8b261e;

  /* 墨色 */
  --c-ink:       #1A1816;
  --c-ink-2:     #1F1C18;
  --c-ink-warm:  #E5D7C2;
  --c-stone-950: #0c0a09;
  --c-stone-900: #1c1917;
  --c-stone-800: #292524;
  --c-stone-700: #44403c;
  --c-stone-600: #57534e;
  --c-stone-500: #78716c;
  --c-stone-400: #a8a29e;
  --c-stone-300: #d6d3d1;
  --c-stone-100: #f5f5f4;
  --c-era-stone: #6E6359;
  --c-red:       #ef4444;

  /* 頁尾 */
  --c-footer-bg:     #F3EFE7;
  --c-footer-border: #E2DBD0;
  --c-pill-hover:    #D9D1C3;

  /* 尺寸 */
  --container:  1360px;
  --gutter:     16px;
  --header-h:   80px;

  /* 圓角 */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-2xl: 24px;
  --r-full: 9999px;

  /* 陰影 */
  --sh-xs: 0 1px 2px rgba(28, 25, 23, .04);
  --sh-sm: 0 1px 3px rgba(28, 25, 23, .07);
  --sh-md: 0 4px 12px rgba(28, 25, 23, .09);
  --sh-header: 0 1px 8px rgba(0, 0, 0, .04);
  --sh-2xl: 0 24px 48px -12px rgba(0, 0, 0, .35);
}

/* ==========================================================================
   02. Reset / 基礎
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  /* 與設計稿一致的基準：16px / 1.5，各元件再自行宣告字級 */
  font-size: 16px;
  line-height: 1.5;
  background-color: var(--c-bg);
  color: var(--c-stone-800);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: #E2DACB; }

h1, h2, h3, h4, h5, h6, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

img, svg { display: block; max-width: 100%; }
img { height: auto; border: 0; }

a { color: inherit; text-decoration: none; }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  /* 與設計稿的 Tailwind preflight 一致：清掉瀏覽器預設的內距與邊框 */
  margin: 0;
  padding: 0;
  border: 0;
}
button {
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--c-brown);
  outline-offset: 2px;
}

.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   03. 共用元件
   ========================================================================== */

/* --- SVG 圖示 --- */
.icon { width: 16px; height: 16px; flex: 0 0 auto; }
.icon--10 { width: 10px; height: 10px; }
.icon--12 { width: 12px; height: 12px; }
.icon--14 { width: 14px; height: 14px; }
.icon--15 { width: 15px; height: 15px; }
.icon--16 { width: 16px; height: 16px; }
.icon--18 { width: 18px; height: 18px; }
.icon--20 { width: 20px; height: 20px; }
.icon--22 { width: 22px; height: 22px; }
.icon--24 { width: 24px; height: 24px; }
.icon--36 { width: 36px; height: 36px; }
.icon.is-muted { opacity: .28; }

/* --- 按鈕 --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--r-full);
  font-family: var(--font-serif);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .05em;
  white-space: nowrap;
  box-shadow: var(--sh-sm);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--gold {
  background: var(--c-gold);
  color: var(--c-stone-950);
  font-weight: 600;
}
.btn--gold:hover { background: var(--c-gold-hover); }

.btn--ghost {
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
  font-weight: 500;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .25); }

/* --- 數量徽章 --- */
.badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  border-radius: var(--r-full);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  box-shadow: var(--sh-xs);
}
.badge--wine { background: var(--c-wine); }
.badge--gold { background: var(--c-brown); }
.badge[hidden] { display: none; }

/* --- 收藏按鈕（表單不產生方框，不影響卡片版面）與提示訊息 --- */
.fav-form,
.contents-form { display: contents; }
[data-favorite][aria-busy="true"],
[data-cart-form] button[aria-busy="true"] { opacity: .6; cursor: progress; }

/* 頁首：目前在購物車頁 */
.header-actions__btn.is-current { color: #991b1b; background: rgba(236, 228, 213, .5); border-radius: var(--r-full); }

/* 探索古物藏品卡：已在購物車 */
.ex-card__buy.is-in-cart { background: var(--a-secondary); }

/* 探索古物藏品卡：圖片與品名連到詳細頁（連結不產生額外的方框） */
.ex-card__img-link { display: block; width: 100%; height: 100%; }
.cart-item__title a,
.cart-rec__title a { color: inherit; }
.cart-item__title a:hover { color: var(--cart-seal); }
.cart-summary__shipnote { font-size: 11px; line-height: 16px; color: var(--cart-muted); }

.site-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 1000;
  max-width: calc(100vw - 32px);
  padding: 10px 18px;
  border-radius: var(--r-full);
  background: var(--c-stone-950);
  color: #fff;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .03em;
  box-shadow: 0 8px 24px rgba(28, 25, 23, .18);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity .2s ease, transform .2s ease;
}
.site-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.site-toast.is-error { background: var(--c-wine); }
@media (prefers-reduced-motion: reduce) {
  .site-toast { transition: none; }
}

/* --- 區塊標題列 --- */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.section-head__title {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--c-stone-900);
}
.section-head__subtitle {
  margin-top: 2px;
  font-family: var(--font-serif);
  font-size: 12px;
  line-height: 16px;
  color: var(--c-stone-500);
}
.section-head__link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-serif);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--c-stone-700);
  white-space: nowrap;
  transition: color .2s ease;
}
.section-head__link:hover { color: var(--c-brown); }

/* --- 文字連結（帶箭頭） --- */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--c-stone-900);
  transition: color .2s ease;
}
.text-link:hover { color: var(--c-brown); text-decoration: underline; }

/* --- 星等 --- */
.rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-family: var(--font-serif);
  font-size: 11px;
  line-height: 1.5;
  color: var(--c-stone-500);
}
.rating__stars {
  display: flex;
  color: var(--c-gold);
}

/* ==========================================================================
   04. 版型：頁首 / 主要內容
   ========================================================================== */

/* --- 頁首 --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(253, 252, 250, .95);
  border-bottom: 1px solid var(--c-header-border);
  box-shadow: var(--sh-header);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
/* 手機（640 以下）頁首寬度吃緊：間距縮小、左側品牌可收縮，避免右側功能鈕被擠出畫面造成水平捲動；sm 起還原 */
.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.site-header__left {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-shrink: 1;
  min-width: 0;
}
.site-header__right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

/* 品牌 */
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand__mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-wine);
  border: 1px solid var(--c-wine);
  color: #fff;
  box-shadow: 0 2px 8px rgba(62, 5, 0, .12);
}
.brand__mark span {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  padding-left: .1em;
}
.brand__text { display: flex; flex-direction: column; min-width: 0; }
/* 後台上傳的網站標誌（取代方形印記字） */
.brand__logo {
  display: block;
  flex-shrink: 0;
  width: auto;
  height: 36px;
  max-width: 120px;
  object-fit: contain;
}
/* 標誌本身含品牌名稱：不顯示旁邊文字，標誌放大一些 */
.brand--logo-only .brand__logo {
  height: 44px;
  max-width: min(240px, 52vw);
}
/* 品牌名稱由後台設定，過長時以刪節號收尾，不撐寬頁面 */
.brand__name,
.brand__latin {
  white-space: nowrap;
  overflow-x: clip;
  text-overflow: ellipsis;
}
.brand__name {
  font-family: var(--font-serif);
  font-size: clamp(14px, 4.2vw, 18px);
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.25;
  color: var(--c-stone-900);
}
/* 英文副標：360 以下放不下，只留中文名稱 */
.brand__latin {
  display: none;
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-stone-500);
}

/* 主選單 */
.main-nav {
  display: none;
  align-items: center;
  gap: 24px;
  white-space: nowrap;
}
.main-nav__link {
  font-family: var(--font-serif);
  font-size: 13.5px;
  letter-spacing: .1em;
  color: var(--c-stone-600);
  transition: color .2s ease;
}
.main-nav__link:hover { color: var(--c-stone-900); }
.main-nav__link.is-current {
  color: var(--c-stone-900);
  font-weight: 600;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--c-stone-900);
}

/* 搜尋列 */
.header-search {
  display: none;
  align-items: center;
  width: 256px;
  padding: 6px 14px;
  background: var(--c-search-bg);
  border: 1px solid var(--c-search-bd);
  border-radius: var(--r-full);
  transition: border-color .2s ease;
}
.header-search:focus-within { border-color: var(--c-stone-800); }
.header-search__icon { color: var(--c-stone-500); margin-right: 8px; }
.header-search__input {
  width: 100%;
  background: none;
  border: 0;
  outline: none;
  font-family: var(--font-serif);
  font-size: 12px;
  line-height: 16px;
  color: var(--c-stone-800);
}
.header-search__input::placeholder { color: var(--c-stone-500); }

/* 頁首功能鈕 */
.header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--c-stone-700);
}
.header-actions__btn {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .2s ease;
}
.header-actions__btn:hover { color: var(--c-stone-950); }
.header-actions__avatar {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--c-stone-900);
  color: #fff;
  box-shadow: var(--sh-xs);
  transition: background-color .2s ease;
}
.header-actions__avatar:hover { background: var(--c-stone-800); }

/* --- 主要內容 --- */
.site-main {
  padding-top: 24px;
  padding-bottom: 24px;
}
.site-main > * + * { margin-top: 48px; }

.section > * + * { margin-top: 16px; }

/* ==========================================================================
   05. 區塊元件
   ========================================================================== */

/* --------------------------------------------------- 主視覺輪播 HeroBanner */
.hero {
  position: relative;
  display: grid;
  grid-template-areas: "stage";
  min-height: 470px;
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--c-hero-bg);
  box-shadow: var(--sh-sm);
}
.hero__slide {
  grid-area: stage;
  position: relative;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  filter: brightness(.96);
}
.hero__scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  background: linear-gradient(to right,
              rgba(23, 20, 18, .85) 0%,
              rgba(30, 27, 23, .60) 50%,
              rgba(30, 27, 23, 0) 100%);
}

.hero__content {
  position: relative;
  z-index: 10;
  max-width: 576px;
  padding: 48px 0 48px 32px;
  color: #fff;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 4px 12px;
  border-radius: var(--r-full);
  background: rgba(28, 25, 23, .6);
  border: 1px solid rgba(197, 168, 128, .3);
  font-family: var(--font-serif);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--c-gold-pale);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.hero__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--c-gold-light);
}
.hero__title {
  margin-bottom: 24px;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.375;
  color: var(--c-stone-100);
}
.hero__br { display: none; }
.hero__title-second { display: block; margin-top: 4px; }
.hero__desc {
  max-width: 448px;
  margin-bottom: 32px;
  font-family: var(--font-serif);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.625;
  color: var(--c-stone-300);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .8);
  color: var(--c-stone-800);
  box-shadow: var(--sh-md);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background-color .2s ease;
}
.hero__nav:hover { background: #fff; }
.hero__nav--prev { left: 16px; }
.hero__nav--next { right: 16px; }

.hero__dots {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
}
.hero__dot-btn {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .4);
  transition: background-color .25s ease, width .25s ease, height .25s ease;
}
.hero__dot-btn.is-active {
  width: 10px;
  height: 10px;
  background: var(--c-gold);
}

/* ------------------------------------------------ 服務價值列 ValueProps */
.value-bar {
  padding: 16px;
  background: var(--c-paper);
  border: 1px solid var(--c-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xs);
}
.value-bar__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.value-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-inline: 8px;
  padding-top: 8px;
}
.value-item:nth-child(n + 2) { border-top: 1px solid var(--c-line-2); }
.value-item:nth-child(n + 3) { padding-top: 16px; }
.value-item__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--c-icon-bg);
  color: var(--c-brown);
}
.value-item__title {
  font-family: var(--font-serif);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--c-stone-900);
}
.value-item__desc {
  font-size: 11px;
  line-height: 1.5;
  color: var(--c-stone-500);
}

/* ------------------------------------------- 圓形分類 CircularCategories */
.cat-strip { padding-block: 8px; }
.cat-strip__track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  overflow-x: auto;
}
.cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 80px;
  cursor: pointer;
}
.cat-item__ring {
  position: relative;
  width: 64px;
  height: 64px;
  padding: 4px;
  border-radius: var(--r-full);
  background: var(--c-ring-bg);
  border: 1px solid var(--c-line);
  overflow: hidden;
  transition: border-color .2s ease;
}
.cat-item:hover .cat-item__ring { border-color: var(--c-brown); }
.cat-item__img {
  width: 100%;
  height: 100%;
  border-radius: var(--r-full);
  object-fit: cover;
  transition: transform .25s ease;
}
.cat-item:hover .cat-item__img { transform: scale(1.05); }
.cat-item__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  padding: 2px 6px;
  border-radius: var(--r-full);
  background: var(--c-brown);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}
.cat-item__label {
  font-family: var(--font-serif);
  font-size: 12px;
  line-height: 16px;
  color: var(--c-stone-700);
  text-align: center;
  white-space: nowrap;
  transition: color .2s ease;
}
.cat-item:hover .cat-item__label { color: var(--c-stone-950); }

.cat-item__ring--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-paper);
  border-color: var(--c-gold-light);
  color: var(--c-stone-800);
  transition: background-color .2s ease, color .2s ease;
}
.cat-item--all:hover .cat-item__ring--empty {
  background: var(--c-brown);
  color: #fff;
}
.cat-item--all:hover .cat-item__label { color: var(--c-stone-900); }

/* -------------------------------------------- 促銷卡片 PromotionalGrid */
.promo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.promo-card {
  position: relative;
  height: 288px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.promo-card--a { background: var(--c-card-a); }
.promo-card--b { background: var(--c-card-b); }
.promo-card--c { background: var(--c-card-c); }
.promo-card--dark {
  background: var(--c-ink);
  border-color: var(--c-stone-800);
  color: #fff;
}
.promo-card__body { position: relative; z-index: 10; }
.promo-card__eyebrow {
  font-family: var(--font-serif);
  font-size: 10px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-brown);
}
.promo-card__title {
  margin-bottom: 4px;
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--c-stone-900);
}
.promo-card__desc {
  max-width: 130px;
  margin-bottom: 12px;
  font-family: var(--font-serif);
  font-size: 12px;
  line-height: 16px;
  color: var(--c-stone-600);
}
.promo-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-serif);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--c-stone-900);
  transition: color .2s ease;
}
.promo-card__link:hover { color: var(--c-brown); text-decoration: underline; }

.promo-card__img {
  position: absolute;
  transition: transform .3s ease;
}
.promo-card--a .promo-card__img {
  bottom: 4px;
  right: -12px;
  width: 176px;
  height: 176px;
  object-fit: contain;
}
.promo-card--b .promo-card__img {
  bottom: 0;
  right: 0;
  width: 176px;
  height: 176px;
  object-fit: cover;
  object-position: top;
  border-top-left-radius: var(--r-xl);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .06);
}
.promo-card--c .promo-card__img {
  bottom: 8px;
  right: 0;
  width: 160px;
  height: 176px;
  object-fit: contain;
}
.promo-card:hover .promo-card__img { transform: scale(1.05); }

/* 照片隨卡片寬度縮放，說明與連結留在照片左側（2026-09-17：四欄並排時卡片只有 240～320px，真實照片會壓到文字） */
@supports (width: 1cqw) {
  .promo-card:not(.promo-card--dark) {
    container-type: inline-size;
    --promo-img-w: clamp(96px, 60cqw, 176px);
  }
  .promo-card--a .promo-card__img,
  .promo-card--b .promo-card__img,
  .promo-card--c .promo-card__img { width: var(--promo-img-w); }
  /* 內容區寬度＝卡片寬度 − 左右內距 24px；照片貼齊卡片右緣，再留 10px 間距 */
  .promo-card:not(.promo-card--dark) .promo-card__desc,
  .promo-card:not(.promo-card--dark) .promo-card__link { max-width: calc(100% + 24px - var(--promo-img-w) - 10px); }
}

/* 深色特展卡 */
.promo-card--dark .promo-card__eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  letter-spacing: .05em;
  color: var(--c-gold-light);
}
.promo-card--dark .promo-card__title {
  margin-bottom: 8px;
  font-size: 24px;
  line-height: 1.25;
  color: #fff;
}
.promo-card--dark .promo-card__desc {
  max-width: none;
  margin-bottom: 16px;
  color: var(--c-stone-400);
}
.promo-card__cta {
  position: relative;
  z-index: 10;
  width: -moz-fit-content;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-md);
  background: var(--c-gold);
  color: var(--c-stone-950);
  font-family: var(--font-serif);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  box-shadow: var(--sh-sm);
  transition: background-color .2s ease;
}
.promo-card__cta:hover { background: var(--c-gold-hover); }
.promo-card__glow {
  position: absolute;
  right: -32px;
  bottom: -32px;
  width: 176px;
  height: 176px;
  border-radius: var(--r-full);
  background: rgba(197, 168, 128, .15);
  filter: blur(40px);
  pointer-events: none;
}
.promo-card__sparkle {
  position: absolute;
  top: 16px;
  right: 16px;
  color: rgba(140, 118, 84, .4);
  pointer-events: none;
}

/* -------------------------------------- 精選特輯 FeaturedCollections */
.coll-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.coll-grid__main { display: flex; }
.coll-grid__stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.coll-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.coll-card--main {
  width: 100%;
  min-height: 380px;
  padding: 32px;
  background: var(--c-card-a);
}
.coll-card--stack-a { flex: 1; min-height: 180px; padding: 24px; background: var(--c-card-d); }
.coll-card--stack-b { flex: 1; min-height: 180px; padding: 24px; background: var(--c-card-e); }

.coll-card__media {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 60%;
  pointer-events: none;
}
.coll-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: contrast(.98);
}
.coll-card__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
              rgba(236, 230, 218, 0) 0%,
              rgba(236, 230, 218, .6) 50%,
              rgba(236, 230, 218, 1) 100%);
}

.coll-card__body { position: relative; z-index: 10; }
.coll-card--main .coll-card__body {
  max-width: 384px;
  margin-left: auto;
  text-align: left;
}
.coll-card--stack-a .coll-card__body,
.coll-card--stack-b .coll-card__body { max-width: 220px; }

.coll-card__eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  font-family: var(--font-serif);
  font-size: 11px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-brown);
}
.coll-card__title {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--c-stone-900);
}
.coll-card--main .coll-card__title {
  margin-bottom: 12px;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.25;
}
.coll-card--stack-a .coll-card__title,
.coll-card--stack-b .coll-card__title {
  margin-bottom: 4px;
  font-size: 18px;
  line-height: 28px;
}
.coll-card__desc {
  font-family: var(--font-serif);
  font-size: 12px;
  line-height: 16px;
  color: var(--c-stone-600);
}
.coll-card--main .coll-card__desc { margin-bottom: 24px; line-height: 1.625; }
.coll-card--stack-a .coll-card__desc,
.coll-card--stack-b .coll-card__desc { margin-bottom: 12px; }

.coll-card__link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-serif);
  font-size: 12px;
  line-height: 16px;
  color: var(--c-stone-900);
  transition: color .2s ease;
}
.coll-card--main .coll-card__link { gap: 8px; font-weight: 700; }
.coll-card--stack-a .coll-card__link,
.coll-card--stack-b .coll-card__link { gap: 4px; font-weight: 600; }
.coll-card__link:hover { color: var(--c-brown); text-decoration: underline; }

.coll-card__img { position: absolute; bottom: 0; right: 0; }
.coll-card--stack-a .coll-card__img {
  width: 176px;
  height: 160px;
  object-fit: cover;
  object-position: center;
  border-top-left-radius: var(--r-lg);
}
.coll-card--stack-b .coll-card__img {
  width: 176px;
  height: 144px;
  object-fit: contain;
}

/* ---------------------------------------------- 熱門商品 BestSellers */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.product-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  background: var(--c-paper-2);
  border: 1px solid var(--c-soft);
  border-radius: var(--r-lg);
  transition: box-shadow .2s ease;
}
.product-card:hover { box-shadow: var(--sh-md); }

.product-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 12px;
  background: var(--c-cream);
  border-radius: var(--r-md);
  overflow: hidden;
}
.product-card__img {
  width: 100%;
  height: 100%;
  padding: 4px;
  object-fit: cover;
  transition: transform .3s ease;
}
.product-card:hover .product-card__img { transform: scale(1.05); }

.product-card__era {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  color: #fff;
  font-family: var(--font-serif);
  font-size: 9px;
  line-height: 1.5;
}
.product-card__era--gold  { background: var(--c-brown); }
.product-card__era--dark  { background: var(--c-stone-800); }
.product-card__era--stone { background: var(--c-era-stone); }

.product-card__fav {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .8);
  color: var(--c-stone-600);
  transition: background-color .2s ease, color .2s ease;
}
.product-card__fav:hover { background: #fff; color: var(--c-red); }
.product-card__fav.is-active { color: var(--c-red); }
.product-card__fav.is-active .icon { fill: currentColor; }

.product-card__name {
  font-family: var(--font-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.375;
  color: var(--c-stone-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card__price {
  margin-top: 4px;
  font-family: var(--font-serif);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--c-stone-900);
}
/* 首頁熱門典藏推薦改用探索古物藏品：分類名稱、連到藏品詳細頁 */
.product-card__era--vermilion { background: #a8322a; }
.product-card__img-link { display: block; width: 100%; height: 100%; }
.product-card__category {
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: .04em;
  color: var(--c-stone-600);
}
.product-card__name a { color: inherit; text-decoration: none; }
.product-card__name a:hover { color: var(--c-brown); }
.product-card__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  color: var(--c-brown);
  text-decoration: none;
}
.product-card__more:hover { text-decoration: underline; }

/* ------------------------------------------ 品牌理念橫幅 AboutBanner */
.about-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 32px;
  background: var(--c-card-f);
  border: 1px solid var(--c-line);
  border-radius: var(--r-2xl);
  overflow: hidden;
}
.about-banner__media {
  width: 100%;
  height: 240px;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.about-banner__media img { width: 100%; height: 100%; object-fit: cover; }

.about-banner__body { width: 100%; }
.about-banner__body > * + * { margin-top: 14px; }
.about-banner__eyebrow {
  display: block;
  font-family: var(--font-serif);
  font-size: 11px;
  /* 對齊設計稿：inline 標籤所在的行框由外層 16px/1.5 的 strut 決定 */
  line-height: 24px;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--c-brown);
}
.about-banner__title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.375;
  color: var(--c-stone-900);
}
.about-banner__desc {
  max-width: 512px;
  font-family: var(--font-serif);
  font-size: 12px;
  line-height: 1.625;
  color: var(--c-stone-700);
}
.about-banner__action { padding-top: 8px; font-family: var(--font-serif); line-height: 24px; }
.about-banner__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--c-stone-900);
  transition: color .2s ease;
}
.about-banner__link:hover { color: var(--c-brown); text-decoration: underline; }

/* --------------------------------------- 信任指標 TrustHighlights */
.trust-strip {
  padding-top: 32px;
  padding-bottom: 40px;
  border-top: 1px solid var(--c-soft);
}
.trust-strip__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.trust-item { display: flex; align-items: flex-start; gap: 14px; }
.trust-item__icon { color: var(--c-brown); flex: 0 0 auto; }
.trust-item__title {
  font-family: var(--font-serif);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--c-stone-900);
}
.trust-item__desc {
  margin-top: 2px;
  font-family: var(--font-serif);
  font-size: 11px;
  line-height: 1.25;
  color: var(--c-stone-500);
}

/* ==========================================================================
   06. 頁尾
   ========================================================================== */
.site-footer {
  margin-top: 40px;
  background: var(--c-footer-bg);
  border-top: 1px solid var(--c-footer-border);
  color: var(--c-stone-700);
}
.site-footer__inner { padding-top: 64px; padding-bottom: 48px; }

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  margin-bottom: 56px;
}

/* 品牌欄 */
.footer-brand > * + * { margin-top: 20px; }
.footer-brand__head { display: flex; align-items: center; gap: 14px; }
.footer-brand__logo {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: 40px;
  max-width: 140px;
  object-fit: contain;
}
.footer-brand__head--logo-only .footer-brand__logo {
  height: 56px;
  max-width: min(260px, 100%);
}
.footer-brand__mark {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--c-wine-2);
  border-radius: 2px;
  color: var(--c-wine-2);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: .1em;
  padding-left: .1em;
  -webkit-user-select: none;
  user-select: none;
}
.footer-brand__titles { display: flex; flex-direction: column; }
.footer-brand__row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; }
.footer-brand__name {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: .12em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--c-stone-900);
}
.footer-brand__latin {
  font-family: var(--font-serif);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: .2em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--c-brown);
}
.footer-brand__tagline {
  margin-top: 2px;
  font-family: var(--font-serif);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .15em;
  color: var(--c-stone-500);
}
.footer-brand__intro {
  max-width: 384px;
  font-family: var(--font-serif);
  font-size: 12px;
  line-height: 1.625;
  color: var(--c-stone-600);
}

/* 電子報 */
.newsletter { padding-top: 8px; }
.newsletter > * + * { margin-top: 8px; }
.newsletter__title {
  display: block;
  font-family: var(--font-serif);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--c-stone-900);
}
.newsletter__form {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 384px;
}
.newsletter__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: 12px;
  line-height: 16px;
  color: var(--c-stone-800);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.newsletter__input::placeholder { color: var(--c-stone-400); }
.newsletter__input:focus {
  border-color: var(--c-brown);
  box-shadow: 0 0 0 1px var(--c-brown);
}
.newsletter__button {
  padding: 10px 16px;
  border-radius: var(--r-md);
  background: var(--c-brown);
  color: #fff;
  font-family: var(--font-serif);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.newsletter__button:hover { background: var(--c-brown-hover); }
.newsletter__note {
  font-family: var(--font-serif);
  font-size: 11px;
  line-height: 1.5;
  color: var(--c-stone-500);
}
.newsletter__note span { color: var(--c-stone-900); font-weight: 600; }
.newsletter__feedback {
  font-family: var(--font-serif);
  font-size: 11px;
  line-height: 1.5;
  color: var(--c-brown);
}
.newsletter__feedback.is-error { color: #b3261e; }
.newsletter__feedback[hidden] { display: none; }

/* 表單蜜罐欄位（防機器人）：移出畫面、不佔版面，但保留在表單中 */
.hp-field {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 社群 */
.social-list { display: flex; align-items: center; gap: 12px; padding-top: 8px; }
.social-list__item {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: #fff;
  border: 1px solid var(--c-line);
  color: var(--c-stone-700);
  transition: color .2s ease, border-color .2s ease;
}
.social-list__item:hover { color: var(--c-brown); border-color: var(--c-brown); }

/* 連結欄 */
.footer-col > * + * { margin-top: 16px; }
.footer-col__title {
  font-family: var(--font-serif);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-stone-900);
}
.footer-col__list {
  font-family: var(--font-serif);
  font-size: 12px;
  line-height: 16px;
  color: var(--c-stone-600);
}
.footer-col__list li + li { margin-top: 10px; }
.footer-col__list a { transition: color .2s ease; }
.footer-col__list a:hover { color: var(--c-stone-950); }
.footer-col__list a.is-featured { font-weight: 500; }
.footer-col__list a.is-featured:hover { color: var(--c-brown); }

/* 聯繫欄 */
.footer-contact__body {
  font-family: var(--font-serif);
  font-size: 12px;
  line-height: 16px;
  color: var(--c-stone-600);
}
.footer-contact__body > * + * { margin-top: 12px; }
/* 以下三者的行高沿用 .footer-contact__body 的 16px（同設計稿的 text-xs 行高） */
.footer-contact__label {
  display: block;
  font-size: 11px;
  color: var(--c-stone-400);
}
.footer-contact__phone {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-stone-800);
  transition: color .2s ease;
}
.footer-contact__phone:hover { color: #000; }
.footer-contact__text { color: var(--c-stone-700); }
.footer-contact__text--snug { line-height: 1.375; }
.footer-contact__line { padding-top: 4px; }

.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-full);
  background: var(--c-soft);
  color: var(--c-stone-800);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  transition: background-color .2s ease;
}
.pill-link:hover { background: var(--c-pill-hover); }

/* 頁尾底部 */
.footer-bottom {
  padding-top: 32px;
  border-top: 1px solid var(--c-footer-border);
}
.footer-bottom__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.footer-legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-family: var(--font-serif);
  font-size: 12px;
  line-height: 16px;
  color: var(--c-stone-500);
}
.footer-legal__links {
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer-legal a { transition: color .2s ease; }
.footer-legal a:hover { color: var(--c-stone-900); }
.footer-legal__dot { color: var(--c-stone-500); }
.footer-copyright {
  margin-top: 24px;
  font-family: var(--font-serif);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
  color: var(--c-stone-500);
}

/* 回到頂端（partials/back-to-top.php）：往下捲動後才出現；文字提示樣式與第 22 節懸浮按鈕共用 */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--c-ink-2);
  color: var(--c-ink-warm);
  border: 2px solid rgba(140, 118, 84, .4);
  box-shadow: var(--sh-2xl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top.is-visible:hover { transform: translateY(-2px); }
.back-to-top.is-visible:active { transform: scale(.95); }
.back-to-top:focus-visible { outline: 3px solid #1c1c18; outline-offset: 3px; }

/* 404 */
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 96px 24px 120px;
  text-align: center;
}
.error-page__code {
  font-family: var(--font-serif);
  font-size: 64px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--c-gold-light);
}
.error-page__title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--c-stone-900);
}
.error-page__desc {
  max-width: 420px;
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.75;
  color: var(--c-stone-600);
}

/* ==========================================================================
   07. 響應式（sm 640 / md 768 / lg 1024 / xl 1280）
   ========================================================================== */

/* ---------- 360px：頁首英文副標 ---------- */
@media (min-width: 360px) {
  .brand__latin { display: block; }
}

/* ---------- sm: 640px ---------- */
@media (min-width: 640px) {
  :root { --gutter: 24px; }

  .section-head__title { font-size: 24px; line-height: 32px; }
  .section-head__link  { font-size: 14px; line-height: 20px; }

  .value-bar { padding: 24px; }

  .hero__content { padding-left: 56px; }
  /* sm 起字級自帶行高（同 Tailwind：響應式 text-* 覆蓋 leading-*） */
  .hero__title { font-size: 36px; line-height: 40px; }
  .hero__br { display: inline; }
  .hero__title-second { display: inline; margin-top: 0; }
  .hero__desc { font-size: 14px; line-height: 20px; }
  .btn { font-size: 14px; line-height: 20px; }

  .cat-item__ring { width: 80px; height: 80px; }

  .promo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .coll-card--main { padding: 48px; }
  .coll-card--main .coll-card__title { font-size: 36px; line-height: 40px; }
  .coll-card--main .coll-card__desc { font-size: 14px; line-height: 20px; }
  .coll-card--main .coll-card__link { font-size: 14px; line-height: 20px; }
  .coll-card--stack-a,
  .coll-card--stack-b { padding: 28px; }

  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .value-item__title,
  .trust-item__title { font-size: 14px; line-height: 20px; }

  .about-banner { padding: 48px; }
  .about-banner__title { font-size: 30px; line-height: 36px; }
  .about-banner__desc  { font-size: 14px; line-height: 20px; }
  .about-banner__link  { font-size: 14px; line-height: 20px; }

  /* 頁首還原桌機尺寸 */
  .site-header__inner { gap: 24px; }
  .site-header__left { flex-shrink: 0; }
  .brand { gap: 14px; }
  .brand__latin { font-size: 10px; letter-spacing: .24em; }
  .header-actions { gap: 16px; }

  .footer-brand__intro { font-size: 13px; }

  .footer-legal { flex-direction: row; justify-content: center; }
}

/* ---------- md: 768px ---------- */
@media (min-width: 768px) {
  .header-search { display: flex; }

  .value-bar__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .value-item { padding-top: 0; }
  .value-item:nth-child(n + 2) {
    border-top: 0;
    border-left: 1px solid var(--c-line-2);
    padding-left: 24px;
  }
  .value-item:nth-child(n + 3) { padding-top: 0; }

  .trust-strip__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .about-banner { flex-direction: row; }
  .about-banner__media { width: 41.666667%; height: 288px; }
  .about-banner__body  { width: 50%; }

  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .footer-bottom__row { flex-direction: row; }
  .footer-copyright { text-align: left; }
}

/* ---------- lg: 1024px ---------- */
@media (min-width: 1024px) {
  :root { --gutter: 32px; }

  .hero { min-height: 530px; }
  .hero__content { padding-left: 80px; }
  .hero__title { font-size: 48px; line-height: 1.25; }
  .hero__image { object-position: center; }
  .hero__scrim { width: 60%; }
  .hero__nav--prev { left: 24px; }
  .hero__nav--next { right: 24px; }

  .promo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .coll-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .coll-grid__main  { grid-column: span 7 / span 7; }
  .coll-grid__stack { grid-column: span 5 / span 5; }

  .product-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  .about-banner { padding: 56px; }
  .about-banner__title { font-size: 36px; line-height: 40px; }

  .footer-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; }
  .footer-brand   { grid-column: span 4 / span 4; }
  .footer-col     { grid-column: span 2 / span 2; }
}

/* ---------- xl: 1280px ---------- */
@media (min-width: 1280px) {
  .main-nav { display: flex; }
}

/* ==========================================================================
   08. Wabi-Sabi Gallery Editorial 主題
   「關於我們」與「探索古物」共用的第二套設計系統：
   象牙白底、零圓角、Noto Serif + Manrope。
   代幣作用在 .theme-wabi 之下，不影響首頁。
   ========================================================================== */
.theme-wabi {
  /* 字體 */
  --a-serif: "Noto Serif", "Noto Serif TC", "Songti SC", Georgia, serif;
  --a-body:  "Manrope", "Noto Sans TC", "PingFang TC", system-ui, sans-serif;

  /* 表面 */
  --a-surface:     #fcf9f2;
  --a-surface-dim: #dcdad3;
  --a-lowest:      #ffffff;
  --a-low:         #f6f3ec;
  --a-container:   #f1eee7;
  --a-high:        #ebe8e1;
  --a-variant:     #e5e2db;

  /* 文字與線條 */
  --a-on:          #1c1c18;
  --a-on-var:      #4d4540;
  --a-inverse:     #31312c;
  --a-outline:     #7e7570;
  --a-outline-var: #d0c4be;

  /* 強調 */
  --a-primary:       #000000;
  --a-on-primary:    #ffffff;
  --a-secondary:     #775a00;
  --a-on-secondary:  #ffffff;
  --a-sec-fixed-dim: #ecc15a;
  --a-tertiary:      #3e0500;
  --a-on-tertiary:   #ffffff;

  /* 間距 */
  --a-xxs: 4px;
  --a-xs:  8px;
  --a-sm:  12px;
  --a-md:  16px;
  --a-lg:  24px;
  --a-xl:  40px;
  --a-2xl: 64px;
  --a-3xl: 96px;
  --a-gutter-md: 24px;
  --a-gutter-lg: 32px;
  --a-margin: 20px;

  /* 陰影（In'ei Raisan：柔和擴散，不用強烈投影） */
  --a-sh-sm: 0 1px 2px rgba(28, 28, 24, .05);
  --a-sh-md: 0 4px 12px -2px rgba(28, 28, 24, .07), 0 2px 6px -2px rgba(28, 28, 24, .04);
  --a-sh-lg: 0 10px 24px -6px rgba(28, 28, 24, .09), 0 4px 10px -4px rgba(28, 28, 24, .04);
  --a-sh-xl: 0 20px 40px -12px rgba(28, 28, 24, .12), 0 8px 16px -8px rgba(28, 28, 24, .05);
  --a-sh-2xl: 0 26px 52px -12px rgba(28, 28, 24, .28);

  background: var(--a-surface);
}

.about-main {
  width: 100%;
  font-family: var(--a-body);
  font-size: 15px;
  line-height: 26px;
  letter-spacing: .01em;
  color: var(--a-on);
}

.explore-main {
  width: 100%;
  font-family: var(--a-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--a-on);
}

.ab-container {
  width: 100%;
  max-width: 1380px;
  margin-inline: auto;
  padding-inline: var(--a-margin);
}

.ab-br-sm { display: none; }

/* --- 印記（大行 / 鑑） --- */
.ab-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-family: var(--a-serif);
}
.ab-stamp--solid {
  width: 28px;
  height: 28px;
  background: var(--a-tertiary);
  color: var(--a-on-tertiary);
  font-size: 12px;
  line-height: 16px;
  box-shadow: var(--a-sh-sm);
}
.ab-stamp--outline {
  width: 24px;
  height: 24px;
  border: 1px solid var(--a-tertiary);
  color: var(--a-tertiary);
  font-size: 10px;
  line-height: 16px;
}
.ab-stamp--mini {
  width: 20px;
  height: 20px;
  background: var(--a-tertiary);
  color: var(--a-on-tertiary);
  font-size: 10px;
  line-height: 16px;
}

/* --- 按鈕 --- */
.ab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--a-xs);
  font-family: var(--a-body);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 0;
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease;
}
.ab-btn--primary {
  padding: var(--a-md) var(--a-xl);
  background: var(--a-primary);
  color: var(--a-on-primary);
  letter-spacing: .1em;
  box-shadow: var(--a-sh-md);
}
.ab-btn--primary:hover { background: var(--a-inverse); }

.ab-btn--soft {
  padding: var(--a-md) var(--a-lg);
  background: var(--a-high);
  color: var(--a-on);
  letter-spacing: .05em;
}
.ab-btn--soft:hover { background: var(--a-variant); }

.ab-btn--ghost {
  padding: var(--a-sm) var(--a-lg);
  background: none;
  color: var(--a-on-var);
  letter-spacing: .08em;
  text-transform: none;
}
.ab-btn--ghost:hover { color: var(--a-on); }

/* ------------------------------------------------- 麵包屑與檔案標頭 */
.ab-crumb { width: 100%; background: rgba(246, 243, 236, .6); }
.ab-crumb__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--a-sm);
}
.ab-crumb__nav {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--a-on-var);
}
.ab-crumb__nav a { transition: color .2s ease; }
.ab-crumb__nav a:hover { color: var(--a-primary); }
.ab-crumb__current { color: var(--a-secondary); font-weight: 500; }

.ab-crumb__dossier {
  display: none;
  align-items: center;
  gap: var(--a-xs);
  font-family: var(--a-serif);
  font-size: 11px;
  line-height: 26px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a-tertiary);
}
.ab-crumb__dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--a-tertiary);
}

/* ------------------------------------------------------------ 主視覺 */
.ab-hero {
  position: relative;
  width: 100%;
  background: var(--a-container);
  overflow: hidden;
}
.ab-hero__inner { padding-block: var(--a-2xl); }
.ab-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--a-gutter-lg);
  align-items: center;
}
.ab-hero__left { display: flex; flex-direction: column; align-items: flex-start; }

.ab-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--a-sm);
  margin-bottom: var(--a-md);
}
.ab-hero__eyebrow-text {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--a-secondary);
}
.ab-hero__title {
  margin-bottom: var(--a-lg);
  font-family: var(--a-serif);
  font-size: 40px;
  line-height: 52px;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--a-on);
}
.ab-hero__title-accent { color: var(--a-secondary); }

.ab-hero__desc {
  margin-bottom: var(--a-xl);
  font-size: 18px;
  line-height: 1.625;
  letter-spacing: 0;
  color: var(--a-on-var);
}
.ab-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a-md);
}

.ab-hero__locations {
  display: flex;
  align-items: center;
  gap: var(--a-xl);
  margin-top: var(--a-2xl);
  padding-top: var(--a-lg);
  color: var(--a-outline);
}
.ab-loc { display: flex; flex-direction: column; }
.ab-loc__title {
  font-family: var(--a-serif);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .1em;
  color: var(--a-on);
}
.ab-loc__sub {
  font-size: 11px;
  line-height: 26px;
  color: var(--a-on-var);
}
.ab-hero__loc-sep {
  width: 4px;
  height: 4px;
  flex: 0 0 auto;
  border-radius: 9999px;
  background: var(--a-outline-var);
}

.ab-hero__right { position: relative; }
.ab-hero__frame {
  position: relative;
  padding: var(--a-sm);
  background: var(--a-lowest);
  box-shadow: var(--a-sh-xl);
}
.ab-hero__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--a-surface-dim);
  overflow: hidden;
}
.ab-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}
.ab-hero__media:hover .ab-hero__img { transform: scale(1.05); }
.ab-hero__scrim {
  position: absolute;
  inset: 0;
  opacity: .6;
  background: linear-gradient(to top, rgba(0, 0, 0, .6) 0%, transparent 50%, transparent 100%);
}
.ab-hero__badge {
  position: absolute;
  left: var(--a-md);
  bottom: var(--a-md);
  display: flex;
  align-items: center;
  gap: var(--a-sm);
  padding: var(--a-sm);
  background: rgba(252, 249, 242, .95);
  box-shadow: var(--a-sh-md);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.ab-hero__badge-text { display: flex; flex-direction: column; }
.ab-hero__badge-title {
  font-size: 11px;
  line-height: 26px;
  font-weight: 600;
  color: var(--a-on);
}
.ab-hero__badge-sub {
  font-size: 10px;
  line-height: 26px;
  color: var(--a-on-var);
}
.ab-hero__record {
  position: absolute;
  top: -12px;
  right: -12px;
  padding: 4px var(--a-md);
  background: var(--a-secondary);
  color: var(--a-on-secondary);
  font-family: var(--a-serif);
  font-size: 11px;
  line-height: 26px;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: var(--a-sh-md);
}

/* --------------------------------------------------------- 品牌起源 */
.ab-origin { width: 100%; background: var(--a-surface); padding-block: var(--a-3xl); }
/* 頁尾「關於大行」連到各段（#origin、#principles、#archive、#appointment-section）時，標題不被固定頁首擋住 */
.ab-origin,
.ab-principles,
.ab-archive,
.ab-gallery { scroll-margin-top: var(--header-h); }
.ab-origin__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--a-gutter-lg);
  align-items: center;
}
.ab-origin__media-col { position: relative; order: 2; }
.ab-origin__body-col  { display: flex; flex-direction: column; justify-content: center; order: 1; }

.ab-origin__frame {
  position: relative;
  padding: var(--a-md);
  background: var(--a-low);
  box-shadow: var(--a-sh-md);
}
.ab-origin__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--a-surface-dim);
  overflow: hidden;
}
.ab-origin__media img { width: 100%; height: 100%; object-fit: cover; }

.ab-origin__note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-sm);
  margin-top: var(--a-md);
  padding: var(--a-md);
  background: var(--a-container);
}
.ab-origin__note-left { display: flex; align-items: center; gap: var(--a-sm); }
.ab-origin__note-icon { color: var(--a-secondary); }
.ab-origin__note-title {
  font-family: var(--a-serif);
  font-size: 14px;
  line-height: 20px;
  color: var(--a-on);
}
.ab-origin__note-meta {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--a-on-var);
}

.ab-origin__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--a-sm);
  margin-bottom: var(--a-xs);
  font-family: var(--a-serif);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a-tertiary);
}
.ab-origin__rule { width: 32px; height: 1px; background: var(--a-outline-var); }

.ab-origin__title {
  margin-bottom: var(--a-md);
  font-family: var(--a-serif);
  font-size: 28px;
  line-height: 38px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--a-on);
}
.ab-origin__text {
  margin-bottom: var(--a-lg);
  font-size: 15px;
  line-height: 1.625;
  letter-spacing: .01em;
  color: var(--a-on-var);
}
.ab-origin__text > p + p { margin-top: var(--a-md); }

.ab-origin__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--a-sm);
  padding: var(--a-md);
  background: var(--a-low);
}
.ab-fact { display: flex; flex-direction: column; }
.ab-fact__value {
  font-family: var(--a-serif);
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--a-secondary);
}
.ab-fact__label {
  font-size: 11px;
  line-height: 26px;
  color: var(--a-on-var);
}

/* ----------------------------------------------- 四大核心立業原則 */
.ab-principles { width: 100%; background: var(--a-high); padding-block: var(--a-3xl); }
.ab-principles__head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--a-md);
  margin-bottom: var(--a-2xl);
}
.ab-principles__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  margin-bottom: var(--a-xs);
  font-family: var(--a-serif);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .1em;
  color: var(--a-tertiary);
}
.ab-principles__title {
  font-family: var(--a-serif);
  font-size: 40px;
  line-height: 52px;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--a-on);
}
.ab-principles__lead {
  max-width: 448px;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on-var);
}

.ab-principles__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--a-gutter-md);
}
.ab-principle {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--a-lg);
  background: var(--a-lowest);
  overflow: hidden;
  box-shadow: var(--a-sh-sm);
  transition: box-shadow .25s ease;
}
.ab-principle:hover { box-shadow: var(--a-sh-md); }
.ab-principle__corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 64px;
  height: 64px;
  border-bottom-left-radius: 9999px;
  background: rgba(229, 226, 219, .4);
  pointer-events: none;
  transition: background-color .25s ease;
}
.ab-principle:hover .ab-principle__corner { background: rgba(255, 223, 153, .3); }

.ab-principle__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--a-md);
}
.ab-principle__numeral {
  font-family: var(--a-serif);
  font-size: 18px;
  line-height: 28px;
  color: var(--a-tertiary);
}
.ab-principle__icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--a-container);
  color: var(--a-on);
}
.ab-principle__title {
  margin-bottom: var(--a-sm);
  font-family: var(--a-serif);
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--a-on);
}
.ab-principle__desc {
  font-size: 13px;
  line-height: 1.625;
  letter-spacing: .015em;
  color: var(--a-on-var);
}
.ab-principle__tag {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  margin-top: var(--a-lg);
  padding-top: var(--a-sm);
  font-size: 11px;
  line-height: 26px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--a-secondary);
}

/* ----------------------------------------- 典藏數據與庫房實景 */
.ab-archive { width: 100%; background: var(--a-surface); padding-block: var(--a-3xl); overflow: hidden; }

.ab-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--a-md);
  margin-bottom: var(--a-3xl);
  padding: var(--a-xl);
  background: var(--a-low);
}
.ab-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ab-stat__figure { display: flex; align-items: baseline; gap: var(--a-xxs); }
.ab-stat__value {
  font-family: var(--a-serif);
  font-size: 36px;
  line-height: 40px;
  color: var(--a-primary);
}
.ab-stat__suffix {
  font-family: var(--a-serif);
  font-size: 15px;
  line-height: 26px;
  color: var(--a-secondary);
}
.ab-stat__unit {
  margin-left: var(--a-xxs);
  font-size: 12px;
  line-height: 16px;
  color: var(--a-on-var);
}
.ab-stat__title {
  margin-top: var(--a-xxs);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--a-on);
}
.ab-stat__note {
  margin-top: 2px;
  font-size: 11px;
  line-height: 26px;
  color: var(--a-outline);
}

.ab-archive__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--a-gutter-lg);
  align-items: center;
}
.ab-archive__photos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--a-md);
}
.ab-photo {
  position: relative;
  margin: 0;
  padding: var(--a-xs);
  background: var(--a-lowest);
  box-shadow: var(--a-sh-md);
}
.ab-photo__media {
  aspect-ratio: 4 / 3;
  background: var(--a-surface-dim);
  overflow: hidden;
}
.ab-photo__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.ab-photo:hover .ab-photo__media img { transform: scale(1.05); }
.ab-photo__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-xs);
  padding: var(--a-sm);
}
.ab-photo__title {
  font-family: var(--a-serif);
  font-size: 12px;
  line-height: 16px;
  color: var(--a-on);
}
.ab-photo__stamp {
  font-family: var(--a-serif);
  font-size: 10px;
  line-height: 26px;
  white-space: nowrap;
}
.ab-photo__stamp--gold      { color: var(--a-secondary); }
.ab-photo__stamp--vermilion { color: var(--a-tertiary); }

.ab-archive__body { display: flex; flex-direction: column; justify-content: center; }
.ab-archive__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  margin-bottom: var(--a-xs);
  font-family: var(--a-serif);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a-secondary);
}
.ab-archive__title {
  margin-bottom: var(--a-md);
  font-family: var(--a-serif);
  font-size: 28px;
  line-height: 1.375;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--a-on);
}
.ab-archive__text {
  margin-bottom: var(--a-md);
  font-size: 15px;
  line-height: 1.625;
  letter-spacing: .01em;
  color: var(--a-on-var);
}
.ab-archive__text--last { margin-bottom: var(--a-lg); }

.ab-archive__tags { display: flex; flex-wrap: wrap; gap: var(--a-xs); }
.ab-tag {
  padding: 4px var(--a-sm);
  background: var(--a-high);
  font-size: 11px;
  line-height: 26px;
  color: var(--a-on-var);
}

/* ----------------------------------- 台北鑑賞空間與私享流程 */
.ab-gallery { width: 100%; background: var(--a-container); padding-block: var(--a-3xl); }

.ab-salon {
  margin-bottom: var(--a-3xl);
  background: var(--a-lowest);
  box-shadow: var(--a-sh-lg);
  overflow: hidden;
}
.ab-salon__grid { display: grid; grid-template-columns: minmax(0, 1fr); }

.ab-salon__media { position: relative; aspect-ratio: 16 / 10; }
.ab-salon__photo {
  width: 100%;
  height: 100%;
  min-height: 340px;
  background-size: cover;
  background-position: center;
}
.ab-salon__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .7) 0%, transparent 50%, transparent 100%);
}
.ab-salon__caption {
  position: absolute;
  left: var(--a-md);
  bottom: var(--a-md);
  font-family: var(--a-serif);
  font-size: 14px;
  line-height: 20px;
  color: var(--a-on-primary);
}

.ab-salon__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--a-xl);
}
.ab-salon__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  margin-bottom: var(--a-xs);
  font-family: var(--a-serif);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a-tertiary);
}
.ab-salon__title {
  margin-bottom: var(--a-md);
  font-family: var(--a-serif);
  font-size: 28px;
  line-height: 38px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--a-on);
}
.ab-salon__text {
  margin-bottom: var(--a-md);
  font-size: 15px;
  line-height: 1.625;
  letter-spacing: .01em;
  color: var(--a-on-var);
}
.ab-salon__text--sm {
  margin-bottom: var(--a-lg);
  font-size: 13px;
  letter-spacing: .015em;
}

.ab-salon__specs {
  margin-bottom: var(--a-lg);
  padding: var(--a-md);
  background: var(--a-low);
  font-size: 12px;
  line-height: 16px;
  color: var(--a-on-var);
}
.ab-salon__specs > * + * { margin-top: var(--a-xs); }
.ab-spec { display: flex; align-items: center; gap: var(--a-sm); }
.ab-spec__icon  { color: var(--a-secondary); }
.ab-spec__label { color: var(--a-on); font-weight: 500; }

.ab-salon__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a-sm);
}
.ab-salon__actions .ab-btn--primary { letter-spacing: .05em; }

.ab-protocol__head {
  max-width: 512px;
  margin-inline: auto;
  margin-bottom: var(--a-xl);
  text-align: center;
}
.ab-protocol__eyebrow {
  font-family: var(--a-serif);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a-secondary);
}
.ab-protocol__title {
  margin-top: var(--a-xxs);
  font-family: var(--a-serif);
  font-size: 22px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--a-on);
}
.ab-protocol__note {
  margin-top: var(--a-xxs);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on-var);
}

.ab-protocol__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--a-gutter-md);
}
.ab-step {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--a-lg);
  background: var(--a-low);
}
.ab-step__no {
  margin-bottom: var(--a-sm);
  font-family: var(--a-serif);
  font-size: 30px;
  line-height: 36px;
  color: rgba(236, 193, 90, .7);
}
.ab-step__title {
  margin-bottom: var(--a-xs);
  font-family: var(--a-serif);
  font-size: 14px;
  line-height: 20px;
  color: var(--a-on);
}
.ab-step__desc {
  font-size: 12px;
  line-height: 1.625;
  color: var(--a-on-var);
}
.ab-step__note {
  display: flex;
  align-items: center;
  gap: var(--a-xxs);
  margin-top: var(--a-md);
  padding-top: var(--a-xs);
  font-size: 11px;
  line-height: 26px;
  color: var(--a-outline);
}

/* --------------------------------------------------- 預約彈窗 */
.ab-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--a-margin);
}
.ab-modal[hidden] { display: none; }
.ab-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.ab-modal__panel {
  position: relative;
  width: 100%;
  max-width: 576px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: var(--a-xl);
  background: var(--a-surface);
  box-shadow: var(--a-sh-2xl);
}
.ab-modal__close {
  position: absolute;
  top: var(--a-md);
  right: var(--a-md);
  color: var(--a-on-var);
  transition: color .2s ease;
}
.ab-modal__close:hover { color: var(--a-on); }

.ab-modal__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--a-sm);
  margin-bottom: var(--a-xs);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a-secondary);
}
.ab-modal__title {
  margin-bottom: var(--a-sm);
  font-family: var(--a-serif);
  font-size: 22px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--a-on);
}
.ab-modal__lead {
  margin-bottom: var(--a-lg);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on-var);
}

.ab-form > * + * { margin-top: var(--a-md); }
.ab-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--a-md);
}
.ab-form__row--tight { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-sm); }

.ab-field { display: flex; flex-direction: column; gap: var(--a-xxs); }
.ab-field__label {
  font-size: 11px;
  line-height: 26px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--a-on);
}
.ab-field__input {
  width: 100%;
  padding: var(--a-sm) var(--a-md);
  background: var(--a-low);
  border: 0;
  border-radius: 0;
  outline: none;
  font-family: var(--a-body);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on);
  transition: background-color .2s ease, box-shadow .2s ease;
}
.ab-field__input::placeholder { color: var(--a-outline); }
.ab-field__input:focus {
  background: var(--a-lowest);
  box-shadow: inset 0 0 0 1px var(--a-primary);
}

.ab-form__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--a-sm);
  padding-top: var(--a-sm);
}
.ab-form__actions .ab-btn--primary {
  padding: var(--a-sm) var(--a-xl);
  letter-spacing: .05em;
}
.ab-form__result {
  margin-top: var(--a-sm);
  padding: var(--a-sm) var(--a-md);
  background: var(--a-low);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on);
}
.ab-form__result[hidden] { display: none; }
.ab-form__result.is-error { background: #ffdad6; color: var(--a-error); }

/* ---------- Wabi-Sabi 主題：sm 640px ---------- */
@media (min-width: 640px) {
  .ab-br-sm { display: inline; }

  .ab-crumb__dossier { display: flex; }

  .ab-origin__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .ab-stat { align-items: flex-start; text-align: left; }

  .ab-archive__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-photo--offset { margin-top: var(--a-xl); }

  .ab-protocol__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ab-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Wabi-Sabi 主題：md 768px ---------- */
@media (min-width: 768px) {
  .theme-wabi { --a-margin: 40px; }

  .ab-principles__head { flex-direction: row; align-items: flex-end; }

  .ab-principles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Wabi-Sabi 主題：lg 1024px ---------- */
@media (min-width: 1024px) {
  .theme-wabi { --a-margin: 64px; }

  .ab-hero__inner { padding-block: var(--a-3xl); }
  .ab-hero__grid,
  .ab-origin__grid,
  .ab-archive__grid,
  .ab-salon__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }

  .ab-hero__left  { grid-column: span 6 / span 6; padding-right: var(--a-xl); }
  .ab-hero__right { grid-column: span 6 / span 6; }
  .ab-hero__title { font-size: 44px; line-height: 58px; }

  .ab-origin__media-col { grid-column: span 5 / span 5; order: 1; }
  .ab-origin__body-col  { grid-column: span 7 / span 7; order: 2; padding-left: var(--a-xl); }

  .ab-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ab-stat__value { font-size: 48px; line-height: 1; }

  .ab-archive__photos { grid-column: span 7 / span 7; }
  .ab-archive__body   { grid-column: span 5 / span 5; padding-left: var(--a-lg); }

  .ab-principles__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .ab-salon__media { grid-column: span 6 / span 6; aspect-ratio: auto; }
  .ab-salon__body  { grid-column: span 6 / span 6; padding: var(--a-2xl); }
  .ab-salon__scrim,
  .ab-salon__caption { display: none; }

  .ab-protocol__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 減少動態效果 ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   09. 探索古物（沿用 .theme-wabi 設計代幣）
   ========================================================================== */
.theme-wabi {
  --a-vermilion: #832613;   /* on-tertiary-fixed-variant：朱印濃色 */
  --a-bright:    #fcf9f2;   /* surface-bright */
}

.icon--26 { width: 26px; height: 26px; }
.icon--28 { width: 28px; height: 28px; }

/* ------------------------------------------------------ 頂部氛圍帶 */
.ex-intro {
  width: 100%;
  padding-inline: var(--a-margin);
  padding-block: var(--a-xl);
  background: var(--a-low);
}
.ex-intro__inner {
  max-width: 1380px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--a-lg);
}

.ex-intro__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-xs);
}

.ex-crumb {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on-var);
}
.ex-crumb a { transition: color .2s ease; }
.ex-crumb a:hover { color: var(--a-on); }
.ex-crumb__sep { color: var(--a-outline-var); font-weight: 300; }
.ex-crumb__current { color: var(--a-on); font-weight: 500; }
.ex-crumb__code {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--a-secondary);
}

.ex-stock {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  padding: var(--a-xxs) var(--a-sm);
  background: var(--a-container);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--a-on-var);
}
.ex-stock__dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 9999px;
  background: var(--a-vermilion);
}
.ex-stock__sep { color: var(--a-outline-var); }
.ex-stock__count { font-weight: 600; color: var(--a-on); }

.ex-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--a-gutter-lg);
  align-items: end;
}
.ex-intro__headline { display: flex; flex-direction: column; gap: var(--a-xs); }
.ex-intro__kicker {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  font-family: var(--a-serif);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--a-vermilion);
}
.ex-intro__title {
  font-family: var(--a-serif);
  font-size: 40px;
  line-height: 52px;
  font-weight: 500;
  letter-spacing: .025em;
  color: var(--a-on);
}
.ex-intro__lead {
  max-width: 768px;
  margin-top: var(--a-xxs);
  font-size: 15px;
  line-height: 1.625;
  letter-spacing: .01em;
  color: var(--a-on-var);
}

.ex-intro__aside { display: flex; align-items: center; gap: var(--a-md); }
.ex-assure-card {
  display: flex;
  align-items: center;
  gap: var(--a-md);
  width: 100%;
  padding: var(--a-md);
  background: var(--a-surface);
  box-shadow: var(--a-sh-sm);
}
.ex-assure-card__icon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--a-container);
  color: var(--a-vermilion);
}
.ex-assure-card__text { display: flex; flex-direction: column; }
.ex-assure-card__title {
  font-family: var(--a-serif);
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--a-on);
}
.ex-assure-card__sub {
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on-var);
}

.ex-pills {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  padding-top: var(--a-xs);
  padding-bottom: var(--a-xxs);
  overflow-x: auto;
}
.ex-pill {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  flex: 0 0 auto;
  padding: var(--a-xs) var(--a-md);
  background: var(--a-surface);
  color: var(--a-on-var);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .08em;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.ex-pill:hover { background: var(--a-container); color: var(--a-on); }
.ex-pill.is-active {
  background: var(--a-primary);
  color: var(--a-on-primary);
  box-shadow: var(--a-sh-sm);
}
.ex-pill__count { font-size: 11px; font-weight: 400; color: var(--a-outline); }
.ex-pill.is-active .ex-pill__count { color: var(--a-variant); }

/* --------------------------------------------- 側欄篩選與藏品列表 */
.ex-catalog { padding-block: var(--a-2xl); }
.ex-catalog__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--a-gutter-lg);
  align-items: start;
}

.ex-filters {
  display: flex;
  flex-direction: column;
  gap: var(--a-lg);
  padding: var(--a-lg);
  background: var(--a-low);
  box-shadow: var(--a-sh-sm);
}
.ex-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--a-xs) var(--a-sm);
  background: var(--a-container);
}
.ex-filters__title {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  /* 設計稿此列只剩 2px 餘裕；實際瀏覽器有捲軸時會不足，改為不斷行以免標題被拆開 */
  white-space: nowrap;
  color: var(--a-on);
  font-family: var(--a-serif);
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: .05em;
}
.ex-filters__reset {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--a-vermilion);
  text-decoration: underline;
  white-space: nowrap;
  transition: color .2s ease;
}
.ex-filters__reset:hover { color: var(--a-on); }

.ex-filter { display: flex; flex-direction: column; gap: var(--a-xs); }
.ex-filter__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ex-filter__label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--a-on);
}
.ex-filter__value {
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--a-secondary);
  white-space: nowrap;
}
.ex-filter__options {
  display: flex;
  flex-direction: column;
  gap: var(--a-xxs);
  margin-top: var(--a-xxs);
}

.ex-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--a-xs);
  background: var(--a-surface);
  cursor: pointer;
  transition: background-color .2s ease;
}
.ex-check:hover { background: var(--a-container); }
.ex-check__left { display: flex; align-items: center; gap: var(--a-xs); }
.ex-check__box {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--a-primary);
  cursor: pointer;
}
.ex-check__text {
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on-var);
}
.ex-check__text.is-on { color: var(--a-on); }
.ex-check:hover .ex-check__text { color: var(--a-on); }
.ex-check__count {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--a-on-var);
}

.ex-range {
  width: 100%;
  margin-top: var(--a-xxs);
  accent-color: var(--a-primary);
  cursor: pointer;
}
.ex-filter__bands {
  display: flex;
  flex-direction: column;
  gap: var(--a-xxs);
  margin-top: var(--a-xs);
}
.ex-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--a-xxs);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on-var);
  cursor: pointer;
  transition: color .2s ease;
}
.ex-band:hover { color: var(--a-on); }
.ex-band__count {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
}

.ex-filter__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-xxs);
  margin-top: var(--a-xxs);
}
.ex-chip {
  padding: var(--a-xxs) var(--a-xs);
  background: var(--a-surface);
  color: var(--a-on);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.ex-chip:hover { background: var(--a-secondary); color: var(--a-on-secondary); }
.ex-chip.is-active { background: var(--a-primary); color: var(--a-on-primary); }
.ex-chip.is-active:hover { background: var(--a-primary); color: var(--a-on-primary); }

/* --- 篩選狀態（級距、標籤、分頁改為連結後的補充樣式） --- */
.ex-catalog { scroll-margin-top: var(--header-h); }
.ex-band.is-active { background: var(--a-surface); color: var(--a-on); font-weight: 600; }
.ex-band.is-active .ex-band__count { color: var(--a-primary); }
.ex-filters__apply {
  padding: var(--a-xs) var(--a-sm);
  background: var(--a-primary);
  color: var(--a-on-primary);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .08em;
  cursor: pointer;
}
.ex-results[aria-busy="true"] { opacity: .55; pointer-events: none; transition: opacity .2s ease; }

.ex-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--a-xs);
  padding: var(--a-2xl) var(--a-md);
  background: var(--a-low);
  text-align: center;
}
.ex-empty__title {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--a-on);
}
.ex-empty__text {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on-var);
}
.ex-empty__reset {
  margin-inline: 2px;
  color: var(--a-vermilion);
  text-decoration: underline;
}
.ex-empty__reset:hover { color: var(--a-on); }

/* 搜尋藏品（頁首搜尋送到這裡；手機版頁首沒有搜尋框，列表上方一定看得到） */
.ex-search { display: flex; gap: var(--a-xs); margin-bottom: var(--a-md); }
.ex-search__field {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 14px;
  background: var(--a-surface);
  border: 1px solid rgba(208, 196, 190, .9);
  transition: border-color .2s ease;
}
.ex-search__field:focus-within { border-color: var(--a-on); }
.ex-search__icon { flex: 0 0 auto; color: var(--a-on-var); }
.ex-search__input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 0;
  background: none;
  outline: none;
  font: inherit;
  font-size: 14px;
  color: var(--a-on);
}
.ex-search__input::placeholder { color: var(--a-on-var); opacity: .8; }
.ex-search__btn {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 22px;
  background: var(--a-on);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  transition: opacity .2s ease;
}
.ex-search__btn:hover { opacity: .85; }
.ex-search__btn:focus-visible { outline: 2px solid var(--a-secondary); outline-offset: 2px; }
.ex-search__summary { margin: calc(-1 * var(--a-xs)) 0 var(--a-md); font-size: 14px; line-height: 22px; color: var(--a-on-var); }
.ex-search__summary strong { color: var(--a-on); }
.ex-search__also { font-size: 13px; }
.ex-search__clear { margin-left: 10px; color: var(--a-vermilion); text-decoration: underline; white-space: nowrap; }
.ex-search__clear:hover { color: var(--a-on); }

/* --- 主列表 --- */
.ex-results { display: flex; flex-direction: column; gap: var(--a-lg); }

.ex-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--a-sm);
  padding: var(--a-sm);
  background: var(--a-low);
  box-shadow: var(--a-sh-sm);
}
.ex-toolbar__left  { display: flex; align-items: center; gap: var(--a-sm); }
.ex-toolbar__right { display: flex; align-items: center; gap: var(--a-xs); }
.ex-toolbar__count {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--a-on-var);
}
.ex-toolbar__count span { color: var(--a-on); font-weight: 500; }
.ex-toolbar__label {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--a-on-var);
  white-space: nowrap;
}
.ex-select {
  padding: var(--a-xs) var(--a-sm);
  background: var(--a-surface);
  border: 0;
  border-radius: 0;
  outline: none;
  font-family: var(--a-body);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on);
  cursor: pointer;
}

.ex-viewswitch {
  display: none;
  align-items: center;
  gap: var(--a-xxs);
  padding: var(--a-xxs) var(--a-xs);
  background: var(--a-surface);
}
.ex-viewswitch__btn {
  display: flex;
  align-items: center;
  /* 設計稿的圖示是字型字符，行框 24px；此處以固定高度對齊同樣的盒高 */
  height: 32px;
  padding: var(--a-xxs);
  color: var(--a-outline);
  transition: color .2s ease, background-color .2s ease;
}
.ex-viewswitch__btn:hover { color: var(--a-primary); }
.ex-viewswitch__btn.is-active { color: var(--a-primary); }
.ex-viewswitch__btn.is-active:hover { background: var(--a-container); }

.ex-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--a-gutter-md);
}

/* --- 藏品卡 --- */
.ex-card {
  display: flex;
  flex-direction: column;
  background: var(--a-lowest);
  box-shadow: var(--a-sh-sm);
  transition: box-shadow .3s ease;
}
.ex-card:hover { box-shadow: var(--a-sh-md); }

.ex-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--a-container);
  overflow: hidden;
}
.ex-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}
.ex-card:hover .ex-card__img { transform: scale(1.05); }

.ex-card__era {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: var(--a-xxs);
  padding: var(--a-xxs) var(--a-xs);
  background: var(--a-bright);
  box-shadow: var(--a-sh-sm);
}
.ex-card__era-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 9999px;
}
.ex-card__era-dot--vermilion { background: var(--a-vermilion); }
.ex-card__era-dot--gold      { background: var(--a-secondary); }
.ex-card__era-text {
  font-family: var(--a-serif);
  font-size: 11px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--a-on);
}

.ex-card__fav {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(252, 249, 242, .9);
  color: var(--a-on);
  box-shadow: var(--a-sh-sm);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: color .2s ease;
}
.ex-card__fav:hover { color: var(--a-vermilion); }
.ex-card__fav.is-active { color: var(--a-vermilion); }
.ex-card__fav.is-active .icon { fill: currentColor; }

.ex-card__badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: var(--a-xxs) var(--a-xs);
  font-size: 10px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: .12em;
}
.ex-card__badge--ink       { background: rgba(0, 0, 0, .9);  color: var(--a-on-primary); }
.ex-card__badge--gold      { background: var(--a-secondary); color: var(--a-on-secondary); }
.ex-card__badge--stone     { background: var(--a-variant);   color: var(--a-on); }
.ex-card__badge--vermilion { background: var(--a-vermilion); color: var(--a-lowest); }

.ex-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  gap: var(--a-sm);
  padding: var(--a-md);
}
.ex-card__head { display: flex; flex-direction: column; gap: var(--a-xxs); }
.ex-card__kicker {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a-secondary);
}
.ex-card__title {
  font-family: var(--a-serif);
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--a-on);
  transition: color .2s ease;
}
.ex-card:hover .ex-card__title { color: var(--a-secondary); }
.ex-card__desc {
  margin-top: var(--a-xxs);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on-var);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ex-card__foot {
  display: flex;
  flex-direction: column;
  gap: var(--a-xs);
  padding: var(--a-xs);
  background: var(--a-low);
}
.ex-card__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.ex-card__price-label {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--a-on-var);
}
.ex-card__price {
  font-family: var(--a-serif);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--a-on);
}
.ex-card__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--a-xxs);
  margin-top: var(--a-xxs);
}
.ex-card__buy,
.ex-card__view {
  padding: var(--a-xs);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  text-align: center;
  transition: background-color .2s ease, color .2s ease;
}
.ex-card__buy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--a-xxs);
  background: var(--a-primary);
  color: var(--a-on-primary);
}
.ex-card__buy:hover { background: var(--a-on-var); }
.ex-card__buy.is-done { background: var(--a-secondary); }
.ex-card__view { background: var(--a-surface); color: var(--a-on); }
.ex-card__view:hover { background: var(--a-container); }

/* --- 分頁 --- */
.ex-pager {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-md);
  margin-top: var(--a-lg);
  padding: var(--a-md);
  background: var(--a-low);
}
.ex-pager__pages { display: flex; align-items: center; gap: var(--a-xs); }
.ex-pager__btn,
.ex-pager__num {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--a-surface);
  transition: background-color .2s ease;
}
.ex-pager__btn { color: var(--a-on-var); }
.ex-pager__btn:hover { background: var(--a-container); }
.ex-pager__btn:disabled,
.ex-pager__btn.is-disabled { opacity: .4; cursor: default; }
.ex-pager__btn:disabled:hover,
.ex-pager__btn.is-disabled:hover { background: var(--a-surface); }
.ex-pager__num {
  color: var(--a-on);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
}
.ex-pager__num:hover { background: var(--a-container); }
.ex-pager__num.is-active {
  background: var(--a-primary);
  color: var(--a-on-primary);
  font-weight: 700;
}
.ex-pager__num.is-active:hover { background: var(--a-primary); }
.ex-pager__gap {
  padding-inline: var(--a-xxs);
  color: var(--a-outline-var);
}

.ex-pager__jump {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on-var);
}
.ex-pager__input {
  width: 56px;
  padding-block: var(--a-xxs);
  background: var(--a-surface);
  border: 0;
  border-radius: 0;
  outline: none;
  text-align: center;
  font-family: var(--a-body);
  color: var(--a-on);
  font-weight: 500;
}
.ex-pager__go {
  margin-left: var(--a-xxs);
  padding: var(--a-xxs) var(--a-sm);
  background: var(--a-surface);
  color: var(--a-on);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  transition: background-color .2s ease, color .2s ease;
}
.ex-pager__go:hover { background: var(--a-primary); color: var(--a-on-primary); }

/* --------------------------------------------------- 本季特展聚光 */
.ex-spot { width: 100%; background: var(--a-container); padding-block: var(--a-2xl); }
.ex-spot__inner { display: flex; flex-direction: column; gap: var(--a-xl); }
.ex-spot__head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--a-sm);
}
.ex-spot__headline { display: flex; flex-direction: column; gap: var(--a-xxs); }
.ex-spot__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a-secondary);
}
.ex-spot__title {
  font-family: var(--a-serif);
  font-size: 28px;
  line-height: 38px;
  font-weight: 500;
  letter-spacing: .025em;
  color: var(--a-on);
}
.ex-spot__link {
  display: flex;
  align-items: center;
  gap: var(--a-xxs);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--a-on);
  white-space: nowrap;
  transition: color .2s ease;
}
.ex-spot__link:hover { color: var(--a-secondary); }

.ex-spot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--a-gutter-md);
}
.ex-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--a-lg);
  background: var(--a-surface);
  box-shadow: var(--a-sh-sm);
  overflow: hidden;
}
.ex-feature__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--a-lg);
  align-items: center;
}
.ex-feature__media {
  aspect-ratio: 1 / 1;
  background: var(--a-low);
  overflow: hidden;
}
.ex-feature__media img,
.ex-feature__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.ex-feature:hover .ex-feature__media img,
.ex-feature:hover .ex-feature__thumb img { transform: scale(1.05); }

.ex-feature__body { display: flex; flex-direction: column; gap: var(--a-sm); }
.ex-feature__eyebrow {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--a-vermilion);
}
.ex-feature__title {
  font-family: var(--a-serif);
  font-size: 22px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--a-on);
}
.ex-feature__desc {
  font-size: 13px;
  line-height: 1.625;
  letter-spacing: .015em;
  color: var(--a-on-var);
}
.ex-feature__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--a-xs);
}
.ex-feature__price {
  font-family: var(--a-serif);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--a-on);
}
.ex-feature__meta {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--a-secondary);
}

.ex-feature__row { display: flex; align-items: center; gap: var(--a-md); }
.ex-feature__thumb {
  width: 128px;
  height: 128px;
  flex: 0 0 auto;
  background: var(--a-low);
  overflow: hidden;
}
.ex-feature__info { display: flex; flex-direction: column; gap: var(--a-xxs); }
.ex-feature__kicker {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a-secondary);
}
.ex-feature__subtitle {
  font-family: var(--a-serif);
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--a-on);
}
.ex-feature__note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--a-md);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on-var);
}
.ex-feature__note a {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--a-on);
  text-decoration: underline;
  white-space: nowrap;
  transition: color .2s ease;
}
.ex-feature__note a:hover { color: var(--a-secondary); }

/* 大卡填了連結網址時整張卡可點 */
.ex-feature__jump {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.ex-feature__jump:focus-visible {
  outline: 2px solid var(--a-secondary);
  outline-offset: -4px;
}
.ex-feature--link { cursor: pointer; }
.ex-feature--link .ex-feature__title { transition: color .2s ease; }
.ex-feature--link:hover .ex-feature__title { color: var(--a-secondary); }

/* ------------------------------------------------- 三大安心承諾 */
.ex-assure { width: 100%; background: var(--a-low); padding-block: var(--a-2xl); }
.ex-assure__head {
  display: flex;
  flex-direction: column;
  gap: var(--a-xs);
  max-width: 672px;
  margin-inline: auto;
  margin-bottom: var(--a-xl);
  text-align: center;
}
.ex-assure__eyebrow {
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a-vermilion);
}
.ex-assure__title {
  font-family: var(--a-serif);
  font-size: 28px;
  line-height: 38px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--a-on);
}
.ex-assure__lead {
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on-var);
}
.ex-assure__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--a-gutter-lg);
}
.ex-promise {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--a-sm);
  padding: var(--a-lg);
  background: var(--a-surface);
  box-shadow: var(--a-sh-sm);
}
.ex-promise__icon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--a-low);
  color: var(--a-secondary);
}
.ex-promise__title {
  font-family: var(--a-serif);
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--a-on);
}
.ex-promise__desc {
  font-size: 13px;
  line-height: 1.625;
  letter-spacing: .015em;
  color: var(--a-on-var);
}

/* ---------- 探索古物：sm 640px ---------- */
@media (min-width: 640px) {
  .ex-toolbar { flex-direction: row; align-items: center; }
  .ex-viewswitch { display: flex; }
  .ex-pager { flex-direction: row; }
  .ex-feature__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 探索古物：md 768px ---------- */
@media (min-width: 768px) {
  .ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-spot__head { flex-direction: row; align-items: flex-end; }
  .ex-spot__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ex-feature--large { grid-column: span 7 / span 7; }
  .ex-feature--small { grid-column: span 5 / span 5; }
  .ex-assure__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 探索古物：lg 1024px ---------- */
@media (min-width: 1024px) {
  .ex-catalog__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ex-filters {
    grid-column: span 3 / span 3;
    position: sticky;
    /* 設計稿為 112px（其頁首 96px）；本站頁首 80px，改用變數保持相同視覺留白 */
    top: calc(var(--header-h) + 16px);
  }
  .ex-results { grid-column: span 9 / span 9; }
  .ex-intro__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ex-intro__headline { grid-column: span 8 / span 8; }
  .ex-intro__aside { grid-column: span 4 / span 4; justify-content: flex-end; }
}

/* ---------- 探索古物：xl 1280px ---------- */
@media (min-width: 1280px) {
  .ex-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   10. 拍賣競標（沿用 .theme-wabi 設計代幣）
   ========================================================================== */
.theme-wabi {
  --a-error:          #ba1a1a;
  --a-tertiary-fixed: #ffdad3;
  --a-tint:           #625d5b;
  --a-primary-container: #1e1b19;
  --a-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.auction-main {
  width: 100%;
  font-family: var(--a-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--a-on);
}

/* 本頁圓角一律 4px（設計稿的 borderRadius DEFAULT） */
.auction-main { --au-r: 4px; }

@keyframes au-ping {
  0%        { transform: scale(1);   opacity: 1; }
  75%, 100% { transform: scale(2);   opacity: 0; }
}

/* ---------------------------------------------------- 頂部狀態列 */
.au-ticker { width: 100%; background: var(--a-high); padding-block: var(--a-xs); }
.au-ticker__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--a-xs);
  color: var(--a-on-var);
}

.au-crumb {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .05em;
}
.au-crumb a { transition: color .2s ease; }
.au-crumb a:hover { color: var(--a-primary); }
.au-crumb__sep { color: var(--a-outline); }
.au-crumb__current { color: var(--a-on); font-weight: 500; }

.au-signal {
  display: flex;
  align-items: center;
  gap: var(--a-sm);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
}
.au-signal__live {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--a-error);
}
.au-signal__dot {
  position: relative;
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 9999px;
  background: var(--a-error);
}
.au-signal__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: var(--a-error);
  animation: au-ping 1s cubic-bezier(0, 0, .2, 1) infinite;
}
.au-signal__sep { color: var(--a-outline-var); font-weight: 300; }
.au-signal__online { color: var(--a-on-var); }
.au-signal__online strong { color: var(--a-on); font-weight: 600; }

/* ------------------------------------------------ 專場標頭與焦點拍品 */
.au-hero { width: 100%; background: var(--a-surface); padding-block: var(--a-xl); }

.au-hero__head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--a-md);
  margin-bottom: var(--a-xl);
}
.au-hero__headline { display: flex; flex-direction: column; gap: var(--a-xxs); }
.au-hero__tags {
  display: flex;
  align-items: center;
  gap: var(--a-sm);
  margin-bottom: var(--a-xxs);
}
.au-tag {
  padding: 2px var(--a-xs);
  background: var(--a-tertiary);
  color: var(--a-tertiary-fixed);
  font-family: var(--a-serif);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: .18em;
}
.au-catalogue {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a-secondary);
}
.au-hero__title {
  font-family: var(--a-serif);
  font-size: 40px;
  line-height: 52px;
  font-weight: 400;
  letter-spacing: .025em;
  color: var(--a-on);
}
.au-hero__lead {
  font-size: 15px;
  line-height: 26px;
  letter-spacing: .01em;
  color: var(--a-on-var);
}

.au-timer {
  display: flex;
  align-items: center;
  gap: var(--a-md);
  flex: 0 0 auto;
  padding: var(--a-md);
  background: var(--a-lowest);
  border-radius: var(--au-r);
  box-shadow: var(--a-sh-sm);
}
.au-timer__body { display: flex; flex-direction: column; }
.au-timer__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--a-error);
}
.au-timer__dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 9999px;
  background: var(--a-error);
}
.au-timer__value {
  margin-top: var(--a-xxs);
  font-family: var(--a-serif);
  font-size: 22px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--a-on);
}
.au-timer__count {
  font-family: var(--a-mono);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--a-primary);
}
.au-timer__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--a-high);
  border-radius: var(--au-r);
  color: var(--a-on);
}

/* --- 焦點拍品 --- */
.au-lot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--a-lowest);
  border-radius: var(--au-r);
  box-shadow: var(--a-sh-md);
  overflow: hidden;
}

.au-lot__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 420px;
  padding: var(--a-md);
  background: var(--a-low);
}
.au-lot__stamps {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--a-sm);
}
.au-lot__flags { display: flex; flex-direction: column; align-items: flex-start; gap: var(--a-xxs); }
.au-lot__flag {
  padding: var(--a-xxs) var(--a-sm);
  background: var(--a-primary);
  color: var(--a-on-primary);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.au-lot__no {
  font-family: var(--a-serif);
  font-size: 28px;
  line-height: 38px;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--a-on);
}
/* 印記：朱紅實心圓章＋白字（原本淡粉字配近乎透明的底，看不清楚） */
.au-seal {
  width: 76px;
  height: 76px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 9999px;
  background: #a8322a;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6), inset 0 0 0 4px #a8322a, 0 2px 6px rgba(28, 28, 24, .2);
  text-align: center;
}
.au-seal span {
  margin-right: -.2em;   /* 抵銷字距，讓文字置中 */
  font-family: var(--a-serif);
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .2em;
  color: #fff;
}

.au-lot__media {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block: auto;
  padding-block: var(--a-md);
  overflow: hidden;
}
.au-lot__media img {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  transition: transform .7s ease;
}
.au-lot__media:hover img { transform: scale(1.05); }

.au-lot__provenance {
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a-sm);
  padding: var(--a-sm) var(--a-md) var(--a-xs);
  background: rgba(255, 255, 255, .8);
  border-radius: var(--au-r);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.au-lot__prov-label {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--a-secondary);
}
.au-lot__prov-dot { color: var(--a-outline-var); }
.au-lot__prov-text {
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on-var);
}

/* --- 出價面板 --- */
.au-bid {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--a-lg);
  background: var(--a-lowest);
}
.au-bid__era {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  margin-bottom: var(--a-xs);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--a-on-var);
}
.au-bid__category { color: var(--a-secondary); font-weight: 500; }
.au-bid__title {
  margin-bottom: var(--a-sm);
  font-family: var(--a-serif);
  font-size: 28px;
  line-height: 1.375;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--a-on);
}
.au-bid__desc {
  margin-bottom: var(--a-lg);
  font-size: 15px;
  line-height: 1.625;
  letter-spacing: .01em;
  color: var(--a-on-var);
}

.au-bid__box {
  margin-bottom: var(--a-md);
  padding: var(--a-md);
  background: var(--a-low);
  border-radius: var(--au-r);
}
.au-bid__box-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--a-xs);
  margin-bottom: var(--a-xs);
}
.au-bid__box-label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--a-on-var);
}
.au-bid__box-count {
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: .015em;
  color: var(--a-secondary);
}
.au-bid__amount-row {
  display: flex;
  align-items: baseline;
  gap: var(--a-sm);
  margin-bottom: var(--a-xs);
}
.au-bid__amount {
  font-family: var(--a-serif);
  font-size: 38px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--a-on);
}
.au-bid__start {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--a-on-var);
}
.au-bid__ticker {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  padding: var(--a-xs) var(--a-xs) 0;
  background: rgba(255, 255, 255, .6);
  border-radius: var(--au-r);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-secondary);
}
.au-bid__ticker-time { color: rgba(77, 69, 64, .7); font-weight: 400; }

.au-bid__increments { margin-bottom: var(--a-md); }
.au-bid__inc-label {
  display: block;
  margin-bottom: var(--a-xs);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--a-on-var);
}
.au-bid__inc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--a-sm);
}
.au-bid__inc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--a-xxs);
  padding: var(--a-xs) var(--a-sm);
  background: var(--a-container);
  border-radius: var(--au-r);
  color: var(--a-on);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .08em;
  transition: background-color .2s ease;
}
.au-bid__inc:hover { background: var(--a-high); }

/* 快速加價的回饋：按鈕按下、金額欄閃一下金色外框、下方顯示加了多少（main.js） */
.au-bid__inc { transition: background-color .2s ease, color .2s ease, transform .1s ease; }
.au-bid__inc:active { transform: scale(.97); }
.au-bid__inc.is-pressed,
.au-bid__inc.is-pressed:hover { background: var(--a-primary); color: var(--a-on-primary); }
.au-bid__input-row.is-updated { animation: au-bid-updated .9s ease; }
@keyframes au-bid-updated {
  0%, 35% { background: #f6ecd4; box-shadow: inset 0 0 0 2px var(--a-secondary); }
  100%    { box-shadow: inset 0 0 0 2px transparent; }
}
.au-bid__step-note {
  margin-top: var(--a-xs);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: .015em;
  color: var(--a-secondary);
}
@media (prefers-reduced-motion: reduce) {
  .au-bid__inc:active { transform: none; }
  .au-bid__input-row.is-updated { animation: none; box-shadow: inset 0 0 0 2px var(--a-secondary); }
}

.au-bid__form { display: flex; flex-direction: column; gap: var(--a-xs); }
.au-bid__input-row {
  display: flex;
  align-items: center;
  padding: var(--a-xxs) var(--a-md);
  background: var(--a-low);
  border-radius: var(--au-r);
  transition: background-color .2s ease;
}
.au-bid__input-row:focus-within { background: var(--a-lowest); }
.au-bid__prefix {
  margin-right: var(--a-xs);
  font-family: var(--a-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--a-on-var);
}
.au-bid__input {
  width: 100%;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  font-family: var(--a-serif);
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--a-on);
}
.au-bid__input-note {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--a-on-var);
  white-space: nowrap;
}
.au-bid__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--a-xs);
  width: 100%;
  padding: var(--a-md) var(--a-lg);
  background: var(--a-primary);
  color: var(--a-on-primary);
  font-family: var(--a-serif);
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: var(--a-sh-md);
  transition: background-color .2s ease, transform .1s ease;
}
.au-bid__submit:hover { background: var(--a-primary-container); }
.au-bid__submit:active { transform: scale(.99); }
.au-bid__result {
  padding: var(--a-xs) var(--a-sm);
  background: var(--a-low);
  border-radius: var(--au-r);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on);
}
.au-bid__result[hidden] { display: none; }

.au-bid__trust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-xs);
  margin-top: var(--a-md);
  padding: var(--a-md) var(--a-md) var(--a-xs);
  background: rgba(246, 243, 236, .5);
  border-radius: var(--au-r);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--a-on-var);
}
.au-bid__trust-text { display: flex; align-items: center; gap: var(--a-xxs); }
.au-bid__trust-text .icon { color: var(--a-secondary); }
.au-bid__trust a { color: var(--a-secondary); }
.au-bid__trust a:hover { text-decoration: underline; }

/* ------------------------------------------------------ 篩選控制列 */
.au-filterbar {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  width: 100%;
  padding-block: var(--a-md);
  background: var(--a-low);
  box-shadow: var(--a-sh-sm);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.au-filterbar__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--a-md);
}
.au-pills {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  padding-bottom: var(--a-xxs);
  overflow-x: auto;
}
.au-pill {
  flex: 0 0 auto;
  padding: var(--a-xs) var(--a-md);
  background: var(--a-container);
  color: var(--a-on);
  border-radius: var(--au-r);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.au-pill:hover { background: var(--a-high); }
.au-pill.is-muted { color: var(--a-on-var); }
.au-pill.is-active {
  background: var(--a-primary);
  color: var(--a-on-primary);
  box-shadow: var(--a-sh-sm);
}
.au-pill.is-active:hover { background: var(--a-primary); }

.au-controls {
  display: flex;
  align-items: center;
  gap: var(--a-sm);
  flex: 0 0 auto;
}
.au-search,
.au-sort {
  display: flex;
  align-items: center;
  background: var(--a-lowest);
  border-radius: var(--au-r);
  box-shadow: var(--a-sh-sm);
}
.au-search { padding: var(--a-xxs) var(--a-md); }
.au-sort   { padding: var(--a-xxs) var(--a-sm); }
.au-search .icon,
.au-sort .icon { color: var(--a-on-var); flex: 0 0 auto; }
.au-search .icon { margin-right: var(--a-xs); }
.au-sort .icon   { margin-right: var(--a-xxs); }
.au-search__input {
  width: 160px;
  background: none;
  border: 0;
  outline: none;
  font-family: var(--a-body);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on);
}
.au-search__input::placeholder { color: rgba(77, 69, 64, .6); }
.au-sort__select {
  padding-right: var(--a-xs);
  background: none;
  border: 0;
  outline: none;
  font-family: var(--a-body);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--a-on);
  cursor: pointer;
}

/* ---------------------------------------------------------- 拍品列表 */
.au-lots { width: 100%; background: var(--a-surface); padding-block: var(--a-2xl); }
.au-lots__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-md);
  margin-bottom: var(--a-lg);
}
.au-lots__eyebrow {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a-secondary);
}
.au-lots__title {
  font-family: var(--a-serif);
  font-size: 28px;
  line-height: 38px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--a-on);
}
.au-lots__count {
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on-var);
  text-align: right;
}
.au-lots__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--a-gutter-lg);
}

/* --- 拍品卡 --- */
.au-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--a-lowest);
  border-radius: var(--au-r);
  box-shadow: var(--a-sh-sm);
  overflow: hidden;
  transition: box-shadow .3s ease;
}
.au-card:hover { box-shadow: var(--a-sh-xl); }

.au-card__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 256px;
  padding: var(--a-sm);
  background: var(--a-low);
  overflow: hidden;
}
.au-card__img {
  width: 100%;
  height: 100%;
  transition: transform .5s ease;
}
.au-card__img--contain { object-fit: contain; }
.au-card__img--cover   { object-fit: cover; }
.au-card:hover .au-card__img { transform: scale(1.05); }

.au-card__no {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  padding: 2px var(--a-xs);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .05em;
}
.au-card__no--ink  { background: var(--a-primary);   color: var(--a-on-primary); }
.au-card__no--gold { background: var(--a-secondary); color: var(--a-on-secondary); }

.au-card__timer,
.au-card__state {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  padding: 2px var(--a-xs);
  border-radius: var(--au-r);
  box-shadow: var(--a-sh-sm);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: .12em;
}
.au-card__timer {
  display: flex;
  align-items: center;
  gap: var(--a-xxs);
  background: rgba(255, 255, 255, .9);
  color: var(--a-error);
  font-family: var(--a-mono);
  font-weight: 600;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.au-card__state {
  background: var(--a-variant);
  color: var(--a-on);
  font-weight: 500;
}

.au-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--a-xs);
  padding: var(--a-md);
}
.au-card__kicker {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a-secondary);
}
.au-card__title {
  font-family: var(--a-serif);
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--a-on);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .2s ease;
}
.au-card:hover .au-card__title { color: var(--a-secondary); }
.au-card__meta {
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on-var);
}

.au-card__pricebox {
  margin-top: var(--a-xs);
  padding: var(--a-sm);
  background: var(--a-low);
  border-radius: var(--au-r);
}
.au-card__stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--a-xxs);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--a-on-var);
}
.au-card__stat-right--gold { color: var(--a-secondary); font-weight: 500; }
.au-card__stat-right--ink  { color: var(--a-on);        font-weight: 500; }
.au-card__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.au-card__price-label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--a-on-var);
}
.au-card__price {
  font-family: var(--a-serif);
  font-size: 22px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: .01em;
}
.au-card__price--ink  { color: var(--a-on); }
.au-card__price--gold { color: var(--a-secondary); }

.au-card__actions {
  display: flex;
  gap: var(--a-xs);
  padding: var(--a-md);
  padding-top: 0;
}
.au-card__primary {
  flex: 1;
  padding-block: var(--a-xs);
  border-radius: var(--au-r);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
  transition: background-color .2s ease;
}
.au-card__primary--primary {
  background: var(--a-primary);
  color: var(--a-on-primary);
  box-shadow: var(--a-sh-sm);
}
.au-card__primary--primary:hover { background: var(--a-primary-container); }
.au-card__primary--soft {
  background: var(--a-high);
  color: var(--a-on);
}
.au-card__primary--soft:hover { background: var(--a-variant); }
.au-card__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--a-container);
  border-radius: var(--au-r);
  color: var(--a-on-var);
  transition: background-color .2s ease;
}
.au-card__icon:hover { background: var(--a-high); }
.au-card__icon.is-active { color: var(--a-vermilion); }
.au-card__icon.is-active .icon { fill: currentColor; }

.au-lots__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--a-md);
  margin-top: var(--a-xl);
}
.au-more {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  padding: var(--a-sm) var(--a-xl);
  background: var(--a-low);
  border-radius: var(--au-r);
  color: var(--a-on);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background-color .2s ease;
}
.au-more:hover { background: var(--a-container); }

/* ------------------------------------------------------ 出價熱度統計 */
.au-analytics { width: 100%; background: var(--a-low); padding-block: var(--a-xl); }
.au-analytics__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--a-gutter-lg);
  align-items: center;
  padding: var(--a-lg);
  background: var(--a-lowest);
  border-radius: var(--au-r);
  box-shadow: var(--a-sh-sm);
}
.au-analytics__intro { display: flex; flex-direction: column; gap: var(--a-sm); }
.au-analytics__eyebrow {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a-secondary);
}
.au-analytics__title {
  font-family: var(--a-serif);
  font-size: 22px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--a-on);
}
.au-analytics__lead {
  font-size: 13px;
  line-height: 1.625;
  letter-spacing: .015em;
  color: var(--a-on-var);
}
.au-analytics__stats {
  display: flex;
  align-items: center;
  gap: var(--a-md);
  padding-top: var(--a-xs);
}
.au-stat__value {
  font-family: var(--a-serif);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--a-on);
}
.au-stat__value--gold { color: var(--a-secondary); }
.au-stat__label {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--a-on-var);
}
.au-stat__divider { width: 1px; height: 32px; background: var(--a-variant); }

.au-analytics__chart { display: flex; flex-direction: column; gap: var(--a-sm); }
.au-analytics__chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-xs);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--a-on-var);
}
.au-analytics__refresh { color: var(--a-secondary); font-weight: 500; }

.au-chart {
  width: 100%;
  padding: var(--a-md);
  background: var(--a-low);
  border-radius: var(--au-r);
}
.au-chart__svg { width: 100%; height: 176px; }
.au-chart__grid { stroke: var(--a-variant); }
.au-chart__axis { stroke: var(--a-outline-var); }
.au-chart__tick,
.au-chart__label {
  font-family: var(--a-body);
  font-size: 10px;
  fill: var(--a-on-var);
}
.au-chart__label { font-size: 11px; }
.au-chart__value {
  font-family: var(--a-body);
  font-size: 11px;
  font-weight: 700;
}
.au-chart__bar { transition: opacity .2s ease; }
.au-chart__bar:hover { opacity: .8; }
.au-chart__bar--ink,       .au-chart__value--ink       { fill: var(--a-primary); }
.au-chart__bar--gold,      .au-chart__value--gold      { fill: var(--a-secondary); }
.au-chart__bar--muted,     .au-chart__value--muted     { fill: var(--a-on-var); }
.au-chart__bar--vermilion, .au-chart__value--vermilion { fill: var(--a-tertiary); }
.au-chart__bar--tint,      .au-chart__value--tint      { fill: var(--a-tint); }

/* ---------------------------------------------------------- 競拍指南 */
.au-protocol { width: 100%; background: var(--a-surface); padding-block: var(--a-3xl); }
.au-protocol__head {
  max-width: 672px;
  margin-inline: auto;
  margin-bottom: var(--a-2xl);
  text-align: center;
}
.au-protocol__mark {
  width: 32px;
  height: 32px;
  margin-inline: auto;
  margin-bottom: var(--a-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--a-tertiary);
  border-radius: var(--au-r);
  color: var(--a-tertiary-fixed);
  font-family: var(--a-serif);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: .18em;
  padding-left: .18em;
}
.au-protocol__title {
  margin-bottom: var(--a-xs);
  font-family: var(--a-serif);
  font-size: 40px;
  line-height: 52px;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--a-on);
}
.au-protocol__lead {
  font-size: 15px;
  line-height: 26px;
  letter-spacing: .01em;
  color: var(--a-on-var);
}
.au-protocol__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--a-gutter-lg);
}
.au-proto {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--a-lg);
  background: var(--a-lowest);
  border-radius: var(--au-r);
  box-shadow: var(--a-sh-sm);
}
.au-proto__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--a-md);
  background: var(--a-high);
  border-radius: var(--au-r);
}
.au-proto__icon--ink       { color: var(--a-primary); }
.au-proto__icon--gold      { color: var(--a-secondary); }
.au-proto__icon--vermilion { color: var(--a-tertiary); }
.au-proto__icon--on        { color: var(--a-on); }
.au-proto__code {
  margin-bottom: var(--a-xxs);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--a-secondary);
}
.au-proto__title {
  margin-bottom: var(--a-xs);
  font-family: var(--a-serif);
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--a-on);
}
.au-proto__desc {
  font-size: 13px;
  line-height: 1.625;
  letter-spacing: .015em;
  color: var(--a-on-var);
}
.au-proto__note {
  display: flex;
  align-items: center;
  gap: var(--a-xxs);
  margin-top: var(--a-md);
  padding-top: var(--a-md);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--a-on-var);
}
.au-proto__note .icon { color: var(--a-secondary); }

/* ---------------------------------------------------------- 專場預告 */
.au-upcoming { width: 100%; background: var(--a-surface); padding-bottom: var(--a-3xl); }
.au-banner {
  position: relative;
  padding: var(--a-lg);
  background: var(--a-primary);
  color: var(--a-on-primary);
  border-radius: var(--au-r);
  box-shadow: var(--a-sh-xl);
  overflow: hidden;
}
.au-banner__glow {
  position: absolute;
  top: -64px;
  right: -64px;
  width: 320px;
  height: 320px;
  border-radius: 9999px;
  background: rgba(119, 90, 0, .2);
  filter: blur(64px);
  pointer-events: none;
}
.au-banner__inner {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--a-lg);
}
.au-banner__body {
  display: flex;
  flex-direction: column;
  gap: var(--a-xs);
  max-width: 672px;
}
.au-banner__tags { display: flex; align-items: center; gap: var(--a-sm); flex-wrap: wrap; }
.au-banner__tag {
  padding: 2px 10px;
  background: var(--a-secondary);
  color: var(--a-on-secondary);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.au-banner__date {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--a-variant);
}
.au-banner__title {
  font-family: var(--a-serif);
  font-size: 40px;
  line-height: 52px;
  font-weight: 400;
  letter-spacing: .025em;
  color: var(--a-on-primary);
}
.au-banner__lead {
  font-size: 15px;
  line-height: 1.625;
  letter-spacing: .01em;
  color: var(--a-variant);
}
.au-banner__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--a-sm);
  width: 100%;
  flex: 0 0 auto;
}
.au-banner__primary,
.au-banner__secondary {
  padding: var(--a-md);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
  transition: background-color .2s ease;
}
.au-banner__primary {
  padding-inline: var(--a-lg);
  background: var(--a-on-primary);
  color: var(--a-primary);
  font-weight: 700;
  box-shadow: var(--a-sh-sm);
}
.au-banner__primary:hover { background: var(--a-variant); }
.au-banner__secondary {
  background: none;
  color: var(--a-on-primary);
  font-weight: 600;
}
.au-banner__secondary:hover { background: rgba(255, 255, 255, .1); }

/* ---------- 拍賣競標：sm 640px ---------- */
@media (min-width: 640px) {
  .au-lots__more { flex-direction: row; }
  .au-banner__actions { flex-direction: row; align-items: center; }
}

/* ---------- 拍賣競標：md 768px ---------- */
@media (min-width: 768px) {
  .au-hero { padding-block: var(--a-2xl); }
  .au-hero__head { flex-direction: row; align-items: flex-end; }
  .au-lots__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .au-protocol__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 分類與探索古物共用後有 11 個（2026-09-19）：分類自成一列、放不下就換行；搜尋與排序在下一列靠右 */
  .au-filterbar__inner { flex-direction: column; align-items: stretch; gap: var(--a-sm); }
  .au-pills { padding-bottom: 0; flex-wrap: wrap; overflow-x: visible; }
  .au-controls { justify-content: flex-end; }
  .au-search__input { width: 224px; }
  .au-banner { padding: var(--a-xl); }
}

/* ---------- 拍賣競標：lg 1024px ---------- */
@media (min-width: 1024px) {
  .au-lot { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .au-lot__visual { grid-column: span 7 / span 7; min-height: 580px; padding: var(--a-xl); }
  .au-bid        { grid-column: span 5 / span 5; padding: var(--a-xl); }

  /* 拍品改為 3 欄（設計稿為 4 欄，依需求改為 3 欄 × 3 排） */
  .au-lots__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .au-protocol__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .au-analytics__card { grid-template-columns: repeat(12, minmax(0, 1fr)); padding: var(--a-xl); }
  .au-analytics__intro { grid-column: span 4 / span 4; }
  .au-analytics__chart { grid-column: span 8 / span 8; }

  .au-banner__inner { flex-direction: row; align-items: center; }
  .au-banner__actions { width: auto; }
}

/* ----------------------------------------- 10-1 競標狀態、出價區與拍品頁 */
/* 篩選控制列：手機上搜尋與排序各佔一整列（排序選項文字較長，避免撐寬頁面） */
.au-controls { flex-wrap: wrap; }
.au-search,
.au-sort { flex: 1 1 100%; min-width: 0; }
.au-search__input { width: 100%; }
.au-sort__select { width: 100%; min-width: 0; }
@media (min-width: 768px) {
  .au-controls { flex-wrap: nowrap; }
  .au-search,
  .au-sort { flex: 0 0 auto; }
  .au-search__input { width: 224px; }
  .au-sort__select { width: auto; }
}

/* 拍品卡：連結、狀態標籤；載入更多後捲動到新的第一張（避開吸頂的頁首與篩選列） */
.au-card { scroll-margin-top: calc(var(--header-h) + 96px); }
.au-card__media { color: inherit; }
.au-card__title a { color: inherit; }
a.au-card__primary { display: block; }
.au-card__state--upcoming { background: var(--a-primary); color: var(--a-on-primary); }
.au-card__state--sold { background: var(--a-secondary); color: var(--a-on-secondary); }
.au-card__state--unsold,
.au-card__state--abandoned,
.au-card__state--closing { background: var(--a-high); color: var(--a-on-var); }
.au-card--unsold .au-card__img,
.au-card--abandoned .au-card__img { opacity: .8; }

a.au-banner__primary,
a.au-banner__secondary { display: inline-flex; align-items: center; justify-content: center; text-align: center; }

.au-lot__media { color: inherit; }
.au-bid__title a { color: inherit; transition: color .2s ease; }
.au-bid__title a:hover { color: var(--a-secondary); }
.au-lot__more {
  display: inline-flex;
  align-items: center;
  gap: var(--a-xxs);
  margin-top: var(--a-md);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--a-secondary);
}
.au-lot__more:hover { text-decoration: underline; text-underline-offset: 3px; }

.au-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--a-xs);
  padding: var(--a-2xl) var(--a-md);
  background: var(--a-lowest);
  border-radius: var(--au-r);
  box-shadow: var(--a-sh-sm);
  text-align: center;
}
.au-empty__title { font-family: var(--a-serif); font-size: 20px; line-height: 30px; color: var(--a-on); }
.au-empty__text { font-size: 14px; line-height: 22px; color: var(--a-on-var); }
.au-empty a { margin-top: var(--a-xs); font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--a-secondary); text-decoration: underline; text-underline-offset: 3px; }

/* --- 出價區 --- */
.au-panel { display: flex; flex-direction: column; gap: var(--a-sm); }
.au-panel [hidden],
.au-history [hidden] { display: none !important; }
.au-panel__status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a-xs); }
.au-phase {
  padding: 2px var(--a-xs);
  border-radius: var(--au-r);
  background: var(--a-high);
  color: var(--a-on);
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: .1em;
}
.au-phase--live { background: var(--a-error); color: #fff; }
.au-phase--upcoming { background: var(--a-primary); color: var(--a-on-primary); }
.au-phase--sold { background: var(--a-secondary); color: var(--a-on-secondary); }
.au-panel__clock { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; color: var(--a-on-var); }
.au-panel__clock .icon { color: var(--a-error); }
.au-panel__count { font-family: var(--a-mono); font-size: 16px; font-weight: 700; letter-spacing: 0; color: var(--a-primary); }
.au-panel__time { font-size: 13px; line-height: 20px; letter-spacing: .015em; color: var(--a-on-var); }
.au-panel .au-bid__box { margin-bottom: 0; }
.au-panel .au-bid__ticker { padding: 6px var(--a-xs); }
.au-panel .au-bid__increments { margin-bottom: var(--a-xxs); }
.au-panel__mine {
  padding: var(--a-xs) var(--a-sm);
  border-radius: var(--au-r);
  background: #fdf0e0;
  color: #7f5500;
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
}
.au-panel__mine.is-leading { background: #e3efe1; color: #1d4a27; }
.au-panel__note { font-size: 12px; line-height: 19px; letter-spacing: .02em; color: var(--a-on-var); }
.au-panel__note a { color: var(--a-secondary); text-decoration: underline; text-underline-offset: 3px; }

/* 使用代理投標（會員自行勾選） */
.au-proxy {
  display: flex;
  align-items: flex-start;
  gap: var(--a-xs);
  padding: var(--a-sm);
  border: 1px solid rgba(208, 196, 190, .8);
  border-radius: var(--au-r);
  background: var(--a-lowest);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.au-proxy:hover { border-color: var(--a-outline); }
.au-proxy.is-checked { border-color: var(--a-secondary); background: #f6efe0; }
.au-proxy__input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  accent-color: var(--a-primary);
  cursor: pointer;
}
/* 客戶多為年長藏家：字級放大、分行說明 */
.au-proxy__text { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 22px; letter-spacing: .02em; color: var(--a-on-var); }
.au-proxy__text strong { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--a-on); }

.au-bid__field-label { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--a-on); }

.au-proxy-hint {
  padding: var(--a-sm) var(--a-md);
  border-left: 4px solid var(--a-secondary);
  border-radius: var(--au-r);
  background: #f6efe0;
  font-size: 15px;
  line-height: 26px;
  color: var(--a-on);
}
.au-proxy-hint__title { margin-bottom: 4px; font-size: 16px; font-weight: 700; }
.au-proxy-hint__steps { display: flex; flex-direction: column; gap: 2px; margin: 0 0 6px; padding-left: 1.4em; list-style: decimal; }
.au-proxy-hint strong { font-weight: 700; color: #6b4e00; }
.au-proxy-hint__note { font-size: 14px; line-height: 22px; color: var(--a-on-var); }
a.au-bid__submit { text-align: center; }
.au-bid__submit:disabled { opacity: .6; cursor: progress; }
.au-bid__result.is-error { background: #fbe9e7; color: var(--a-error); }
.au-bid__result.is-success { background: #e3efe1; color: #1d4a27; }
.au-panel__buynow {
  display: flex;
  flex-direction: column;
  gap: var(--a-xxs);
  padding-top: var(--a-sm);
  border-top: 1px dashed rgba(208, 196, 190, .8);
}
.au-panel__buynow-btn {
  width: 100%;
  padding: var(--a-sm) var(--a-md);
  border: 1px solid var(--a-on);
  border-radius: var(--au-r);
  background: transparent;
  color: var(--a-on);
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: .1em;
  transition: background-color .2s ease;
}
.au-panel__buynow-btn:hover { background: var(--a-container); }
.au-panel__buynow-btn:disabled { opacity: .6; cursor: progress; }
.au-panel__result {
  display: flex;
  flex-direction: column;
  gap: var(--a-xs);
  padding: var(--a-md);
  border-radius: var(--au-r);
  background: var(--a-low);
  font-size: 14px;
  line-height: 22px;
  color: var(--a-on-var);
}
.au-panel__result strong { font-family: var(--a-serif); font-size: 18px; line-height: 28px; font-weight: 600; color: var(--a-on); }
.au-panel__result--sold { background: #f6efe0; }
.au-panel__link { align-self: flex-start; font-weight: 600; color: var(--a-secondary); text-decoration: underline; text-underline-offset: 3px; }

/* --- 拍品頁 --- */
.au-flash {
  margin-bottom: var(--a-md);
  padding: var(--a-sm) var(--a-md);
  border-radius: 4px;
  background: #e3efe1;
  color: #1d4a27;
  font-size: 14px;
  line-height: 22px;
}
.au-flash--error { background: #fbe9e7; color: var(--a-error); }
.au-lotpage__meta { font-size: 13px; line-height: 20px; letter-spacing: .04em; color: var(--a-on-var); }

/* 出價紀錄：摘要列＋有欄位標題的表格（手機可左右滑動） */
.au-history { padding-bottom: var(--a-xl); }
.au-history__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--a-xxs) var(--a-md);
  margin-bottom: var(--a-sm);
  padding: var(--a-sm) var(--a-md);
  border-radius: 4px;
  background: var(--a-low);
  font-size: 15px;
  line-height: 24px;
  color: var(--a-on-var);
}
.au-history__summary strong { font-weight: 700; color: var(--a-on); }
.au-history__wrap { overflow-x: auto; }
.au-history__table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 24px; }
.au-history__table th {
  padding: 10px var(--a-sm);
  border-bottom: 2px solid rgba(208, 196, 190, .9);
  text-align: left;
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--a-on-var);
  white-space: nowrap;
}
.au-history__table th.is-num { text-align: right; }
.au-history__table td {
  padding: 12px var(--a-sm);
  border-bottom: 1px solid rgba(208, 196, 190, .5);
  color: var(--a-on);
  vertical-align: middle;
}
.au-history__table tbody tr:last-child td { border-bottom: 0; }
.au-history__table tr.is-top td { background: #fbf6ea; }
.au-history__time { font-family: var(--a-mono); font-size: 14px; color: var(--a-on-var); white-space: nowrap; }
.au-history__name { font-weight: 600; white-space: nowrap; }
.au-history__name em { font-style: normal; color: var(--a-secondary); }
.au-history__amount { text-align: right; font-family: var(--a-serif); font-weight: 600; white-space: nowrap; }
.au-history__badge {
  display: inline-block;
  margin-left: var(--a-xxs);
  padding: 0 8px;
  border-radius: 999px;
  background: var(--a-secondary);
  color: var(--a-on-secondary);
  font-family: var(--a-body);
  font-size: 12px;
  line-height: 20px;
  font-weight: 600;
  vertical-align: middle;
}
.au-history__kind { font-size: 14px; color: var(--a-on-var); white-space: nowrap; }
.au-history__empty { font-size: 15px; line-height: 24px; color: var(--a-on-var); }
.au-history__foot { margin-top: var(--a-sm); font-size: 13px; line-height: 20px; color: var(--a-on-var); }

/* ==========================================================================
   11. 知識專區（沿用 .theme-wabi 設計代幣）
   ========================================================================== */
.theme-wabi {
  --a-primary-fixed:     #e9e1dd;
  --a-primary-fixed-dim: #ccc5c2;
  --a-secondary-fixed:   #ffdf99;
}

.knowledge-main {
  width: 100%;
  font-family: var(--a-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--a-on);
  /* 本頁圓角預設 4px（設計稿的 borderRadius DEFAULT） */
  --kb-r: 4px;
}

/* ------------------------------------------------------ 專區標頭 */
.kb-header {
  width: 100%;
  background: rgba(246, 243, 236, .6);
  padding-block: var(--a-xl);
}
.kb-crumb {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  margin-bottom: var(--a-md);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--a-on-var);
}
.kb-crumb a { transition: color .2s ease; }
.kb-crumb a:hover { color: var(--a-primary); }
.kb-crumb__sep { color: var(--a-outline-var); }
.kb-crumb__current { color: var(--a-primary); font-weight: 600; }

.kb-header__row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--a-lg);
}
.kb-header__body { max-width: 768px; }
.kb-header__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--a-xs);
  margin-bottom: var(--a-sm);
  padding: var(--a-xxs) var(--a-sm);
  background: var(--a-container);
  border-radius: 0;
  color: var(--a-secondary);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.kb-header__dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 9999px;
  background: var(--a-secondary);
}
.kb-header__title {
  margin-bottom: var(--a-sm);
  font-family: var(--a-serif);
  font-size: 40px;
  line-height: 52px;
  font-weight: 400;
  letter-spacing: -.025em;
  color: var(--a-on);
}
.kb-header__lead {
  font-size: 18px;
  line-height: 1.625;
  letter-spacing: 0;
  color: var(--a-on-var);
}

.kb-seal {
  display: none;
  align-items: center;
  gap: var(--a-md);
  max-width: 320px;
  padding: var(--a-md);
  background: var(--a-surface);
  box-shadow: var(--a-sh-sm);
}
.kb-seal__mark {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--a-xxs);
  background: var(--a-tertiary);
  color: var(--a-tertiary-fixed);
  font-family: var(--a-serif);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .18em;
  text-align: center;
  padding-left: calc(var(--a-xxs) + .18em);
}
.kb-seal__text { display: flex; flex-direction: column; }
.kb-seal__title {
  font-family: var(--a-serif);
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--a-on);
}
.kb-seal__subtitle {
  margin-top: var(--a-xxs);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--a-on-var);
}

/* ------------------------------------------------------ 焦點長文 */
.kb-featured { width: 100%; padding-block: var(--a-2xl); }
.kb-featured__card {
  padding: var(--a-md);
  background: var(--a-lowest);
  box-shadow: var(--a-sh-md);
}
.kb-featured__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--a-xl);
  align-items: center;
}

.kb-featured__media { position: relative; overflow: hidden; }
.kb-featured__frame {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--a-container);
  overflow: hidden;
}
.kb-featured__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}
.kb-featured__media:hover .kb-featured__frame img { transform: scale(1.05); }
.kb-featured__badge {
  position: absolute;
  top: var(--a-md);
  left: var(--a-md);
  padding: var(--a-xxs) var(--a-sm);
  background: rgba(252, 249, 242, .9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--a-on);
}

.kb-featured__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding-block: var(--a-xs);
}
.kb-featured__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  margin-bottom: var(--a-xs);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a-secondary);
}
.kb-featured__title {
  margin-bottom: var(--a-md);
  font-family: var(--a-serif);
  font-size: 28px;
  line-height: 1.375;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--a-on);
}
.kb-featured__desc {
  margin-bottom: var(--a-lg);
  font-size: 15px;
  line-height: 1.625;
  letter-spacing: .01em;
  color: var(--a-on-var);
}

.kb-author {
  margin-top: var(--a-md);
  padding: var(--a-md);
  background: var(--a-low);
}
.kb-author__row {
  display: flex;
  align-items: center;
  gap: var(--a-sm);
  margin-bottom: var(--a-sm);
}
.kb-author__mark {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--a-primary);
  color: var(--a-on-primary);
  font-family: var(--a-serif);
  font-size: 12px;
}
.kb-author__name {
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: .015em;
  color: var(--a-on);
}
.kb-author__role {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--a-on-var);
}
.kb-author__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-xs);
  padding-top: var(--a-xs);
}
.kb-author__date {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--a-outline);
}
.kb-author__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--a-xs);
  padding: var(--a-xs) var(--a-md);
  background: var(--a-primary);
  color: var(--a-on-primary);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .05em;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.kb-author__cta:hover { background: var(--a-tint); }

/* ------------------------------------------------ 分類與搜尋 */
.kb-filters {
  width: 100%;
  padding-block: var(--a-lg);
  background: rgba(246, 243, 236, .5);
}
.kb-filters__inner { display: flex; flex-direction: column; gap: var(--a-lg); }

.kb-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a-xs);
}
.kb-tab {
  padding: var(--a-xs) var(--a-md);
  background: var(--a-surface);
  color: var(--a-on-var);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .05em;
  transition: background-color .2s ease, color .2s ease;
}
.kb-tab:hover { background: var(--a-container); }
.kb-tab.is-active {
  background: var(--a-primary);
  color: var(--a-on-primary);
}
.kb-tab.is-active:hover { background: var(--a-primary); }

.kb-search-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-md);
  padding: var(--a-md);
  background: var(--a-surface);
  box-shadow: var(--a-sh-sm);
}
.kb-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--a-xs) var(--a-md);
  background: var(--a-low);
}
.kb-search .icon { color: var(--a-on-var); flex: 0 0 auto; margin-right: var(--a-xs); }
.kb-search__input {
  width: 100%;
  background: none;
  outline: none;
  font-family: var(--a-body);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on);
}
.kb-search__input::placeholder { color: rgba(77, 69, 64, .6); }

.kb-sort {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--a-sm);
  width: 100%;
}
.kb-sort__label {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--a-on-var);
  white-space: nowrap;
}
.kb-sort__select {
  padding: var(--a-xs) var(--a-sm);
  background: var(--a-low);
  outline: none;
  font-family: var(--a-body);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on);
  cursor: pointer;
}

/* ------------------------------------------------ 專題講堂 */
.kb-archive { width: 100%; padding-block: var(--a-3xl); }
.kb-archive__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-md);
  margin-bottom: var(--a-xl);
}
.kb-archive__title-row { display: flex; align-items: center; gap: var(--a-sm); }
.kb-archive__marker {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  background: var(--a-secondary);
}
.kb-archive__title {
  font-family: var(--a-serif);
  font-size: 28px;
  line-height: 38px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--a-on);
}
.kb-archive__meta {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a-on-var);
  text-align: right;
}
.kb-archive__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--a-gutter-lg);
}

/* --- 文章卡 --- */
.kb-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--a-md);
  background: var(--a-lowest);
  box-shadow: var(--a-sh-sm);
  transition: box-shadow .3s ease;
}
.kb-card:hover { box-shadow: var(--a-sh-lg); }
.kb-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--a-md);
  background: var(--a-high);
  overflow: hidden;
}
.kb-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.kb-card:hover .kb-card__media img { transform: scale(1.05); }
.kb-card__tag {
  position: absolute;
  left: var(--a-xs);
  bottom: var(--a-xs);
  padding: 2px var(--a-xs);
  background: rgba(252, 249, 242, .9);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--a-primary);
}
.kb-card__title {
  margin-bottom: var(--a-xs);
  font-family: var(--a-serif);
  font-size: 18px;
  line-height: 1.375;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--a-on);
  transition: color .2s ease;
}
.kb-card:hover .kb-card__title { color: var(--a-secondary); }
.kb-card__excerpt {
  margin-bottom: var(--a-md);
  font-size: 13px;
  line-height: 1.625;
  letter-spacing: .015em;
  color: var(--a-on-var);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kb-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-xs);
  padding: var(--a-sm) var(--a-sm) var(--a-xs);
  background: rgba(246, 243, 236, .6);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--a-on-var);
}
.kb-card__meta { display: flex; align-items: center; gap: var(--a-xxs); }
.kb-card__link {
  display: inline-flex;
  align-items: center;
  color: var(--a-primary);
  font-weight: 700;
  white-space: nowrap;
  transition: transform .2s ease;
}
.kb-card:hover .kb-card__link { transform: translateX(4px); }

/* --- 分頁 --- */
.kb-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--a-sm);
  margin-top: var(--a-2xl);
}
.kb-pager__btn,
.kb-pager__num {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .08em;
  transition: background-color .2s ease;
}
.kb-pager__btn { background: var(--a-container); color: var(--a-on); }
.kb-pager__btn:hover { background: var(--a-high); }
.kb-pager__num { background: var(--a-surface); color: var(--a-on); }
.kb-pager__num:hover { background: var(--a-container); }
.kb-pager__num.is-active {
  background: var(--a-primary);
  color: var(--a-on-primary);
}
.kb-pager__gap { padding-inline: var(--a-xs); color: var(--a-outline); }

/* ------------------------------------------------ 術語圖典 */
.kb-glossary {
  width: 100%;
  padding-block: var(--a-3xl);
  background: rgba(235, 232, 225, .4);
}
.kb-glossary__head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--a-md);
  margin-bottom: var(--a-2xl);
}
.kb-glossary__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  margin-bottom: var(--a-xxs);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--a-secondary);
}
.kb-glossary__title {
  font-family: var(--a-serif);
  font-size: 40px;
  line-height: 52px;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--a-on);
}
.kb-glossary__lead {
  max-width: 448px;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on-var);
}
.kb-glossary__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--a-gutter-md);
}

.kb-term {
  position: relative;
  padding: var(--a-lg);
  background: var(--a-surface);
  box-shadow: var(--a-sh-sm);
  overflow: hidden;
  transition: box-shadow .25s ease;
}
.kb-term:hover { box-shadow: var(--a-sh-md); }
.kb-term__number {
  position: absolute;
  right: -8px;
  bottom: -8px;
  font-family: var(--a-serif);
  font-size: 40px;
  line-height: 52px;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--a-tertiary);
  opacity: .1;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
.kb-term__icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--a-md);
  background: var(--a-container);
  color: var(--a-secondary);
}
.kb-term__title {
  margin-bottom: var(--a-xs);
  font-family: var(--a-serif);
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--a-on);
}
.kb-term__latin {
  margin-bottom: var(--a-sm);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--a-secondary);
}
.kb-term__desc {
  font-size: 13px;
  line-height: 1.625;
  letter-spacing: .015em;
  color: var(--a-on-var);
}

/* ------------------------------------------------ 訂閱導引 */
.kb-cta {
  width: 100%;
  padding-block: var(--a-3xl);
  background: var(--a-primary);
  color: var(--a-on-primary);
}
.kb-cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--a-gutter-lg);
  align-items: center;
}
.kb-cta__body { display: flex; flex-direction: column; gap: var(--a-md); }
.kb-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--a-xs);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--a-secondary-fixed);
}
.kb-cta__title {
  font-family: var(--a-serif);
  font-size: 40px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--a-on-primary);
}
.kb-cta__lead {
  max-width: 672px;
  font-size: 18px;
  line-height: 1.625;
  letter-spacing: 0;
  color: var(--a-primary-fixed-dim);
}
.kb-cta__points {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a-lg);
  padding-top: var(--a-xs);
}
.kb-point {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-primary-fixed);
}
.kb-point .icon { color: var(--a-secondary-fixed); }

.kb-cta__card {
  display: flex;
  flex-direction: column;
  gap: var(--a-md);
  padding: var(--a-xl);
  background: rgba(235, 232, 225, .1);
}
.kb-cta__card-title {
  padding-bottom: var(--a-xs);
  border-bottom: 1px solid rgba(235, 232, 225, .2);
  font-family: var(--a-serif);
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--a-on-primary);
}
.kb-cta__card-lead {
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-primary-fixed-dim);
}
.kb-cta__actions {
  display: flex;
  flex-direction: column;
  gap: var(--a-sm);
  margin-top: var(--a-xs);
}
.kb-cta__primary,
.kb-cta__secondary {
  width: 100%;
  padding: var(--a-sm) var(--a-md);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-align: center;
  transition: background-color .2s ease;
}
.kb-cta__primary {
  display: inline-block;
  background: var(--a-secondary);
  color: var(--a-on-secondary);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.kb-cta__primary:hover { background: var(--a-secondary-fixed); }
.kb-cta__secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--a-xs);
  background: rgba(235, 232, 225, .2);
  color: var(--a-on-primary);
  letter-spacing: .05em;
}
.kb-cta__secondary:hover { background: rgba(235, 232, 225, .3); }
.kb-cta__footnote {
  text-align: center;
  font-size: 11px;
  /* 對齊設計稿：inline 文字的行框由外層 16px/1.5 的 strut 決定 */
  line-height: 24px;
  font-weight: 600;
  letter-spacing: .12em;
  color: rgba(204, 197, 194, .6);
}

/* ---------- 知識專區：md 768px ---------- */
@media (min-width: 768px) {
  .kb-featured__card { padding: var(--a-xl); }
  .kb-search-bar { flex-direction: row; }
  .kb-search { width: 66.666667%; }
  .kb-sort { width: auto; }
  .kb-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-glossary__head { flex-direction: row; align-items: flex-end; }
  .kb-glossary__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 知識專區：lg 1024px ---------- */
@media (min-width: 1024px) {
  .kb-header__row { flex-direction: row; align-items: flex-end; }
  .kb-seal { display: flex; }

  .kb-featured__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .kb-featured__media { grid-column: span 7 / span 7; }
  .kb-featured__body { grid-column: span 5 / span 5; }

  .kb-archive__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kb-glossary__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .kb-cta__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .kb-cta__body { grid-column: span 8 / span 8; }
  .kb-cta__card { grid-column: span 4 / span 4; }
}

/* ==========================================================================
   12. 聯繫我們（沿用 .theme-wabi 設計代幣）
   ========================================================================== */
.contact-main {
  width: 100%;
  font-family: var(--a-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--a-on);
  background: var(--a-surface);
  /* 本頁圓角：預設 4px、lg 8px、xl 12px（設計稿的 Tailwind 值） */
  --ct-r: 4px;
  --ct-r-lg: 8px;
  --ct-r-xl: 12px;
}

.ct-hairline {
  display: block;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, transparent, rgba(119, 90, 0, .4), transparent);
}

/* --- 共用小零件 --- */
.ct-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--a-xs);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a-secondary);
}
.ct-eyebrow--vermilion { color: var(--a-vermilion); font-weight: 700; }
.ct-rule {
  width: 20px;
  height: 1px;
  flex: 0 0 auto;
  background: var(--a-vermilion);
}
.ct-rule--gold      { width: 16px; background: var(--a-secondary); }
.ct-rule--vermilion { width: 16px; background: var(--a-vermilion); }

.ct-features { display: flex; flex-direction: column; gap: var(--a-md); }
.ct-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--a-sm);
  padding: var(--a-sm);
  background: var(--a-low);
  border: 1px solid rgba(208, 196, 190, .3);
  border-radius: var(--ct-r-lg);
}
.ct-feature__icon {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--a-container);
  color: var(--a-secondary);
}
.ct-feature__text { display: flex; flex-direction: column; gap: 2px; }
.ct-feature__title {
  font-family: var(--a-serif);
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--a-on);
}
.ct-feature__desc {
  font-size: 13px;
  line-height: 1.625;
  letter-spacing: .015em;
  color: var(--a-on-var);
}

/* ------------------------------------------------------ 標頭 */
.ct-header { padding-top: var(--a-xl); padding-bottom: var(--a-lg); }
.ct-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-md);
  margin-bottom: var(--a-md);
}
.ct-crumb {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--a-on-var);
}
.ct-crumb a { transition: color .2s ease; }
.ct-crumb a:hover { color: var(--a-on); }
.ct-crumb__sep { color: var(--a-outline-var); font-weight: 300; }
.ct-crumb__current { color: var(--a-on); font-weight: 600; letter-spacing: .05em; }

.ct-status {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a-secondary);
}
.ct-status__dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 9999px;
  background: var(--a-secondary);
}

.ct-header__row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--a-lg);
  padding-bottom: var(--a-lg);
  border-bottom: 1px solid rgba(208, 196, 190, .6);
}
.ct-header__body {
  display: flex;
  flex-direction: column;
  gap: var(--a-xs);
  max-width: 768px;
}
.ct-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--a-xs);
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a-vermilion);
}
.ct-header__title {
  font-family: var(--a-serif);
  font-size: 40px;
  line-height: 52px;
  font-weight: 400;
  letter-spacing: -.025em;
  color: var(--a-on);
}
.ct-header__lead {
  margin-top: var(--a-xs);
  font-size: 15px;
  line-height: 1.625;
  letter-spacing: .01em;
  color: var(--a-on-var);
}

.ct-seal {
  display: none;
  align-items: center;
  gap: var(--a-md);
  padding: var(--a-sm);
  background: var(--a-low);
  border-radius: var(--ct-r-lg);
  box-shadow: var(--a-sh-sm);
}
.ct-seal__mark {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--a-xxs);
  background: var(--a-bright);
  border: 2px solid var(--a-vermilion);
  box-shadow: var(--a-sh-sm);
  color: var(--a-vermilion);
  font-family: var(--a-serif);
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .1em;
  padding-left: calc(var(--a-xxs) + .1em);
}
.ct-seal__text { display: flex; flex-direction: column; }
.ct-seal__title {
  font-family: var(--a-serif);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--a-on);
}
.ct-seal__subtitle {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--a-on-var);
}

/* ------------------------------------------------ 聯絡管道卡 */
.ct-channels { margin-bottom: var(--a-2xl); }
.ct-channels__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--a-gutter-md);
}
.ct-channel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--a-lg);
  background: var(--a-lowest);
  border-radius: var(--ct-r-xl);
  box-shadow: var(--a-sh-sm);
  transition: box-shadow .25s ease;
}
.ct-channel:hover { box-shadow: var(--a-sh-md); }
.ct-channel__body { display: flex; flex-direction: column; }
.ct-channel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-xs);
  margin-bottom: var(--a-md);
}
.ct-channel__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ct-r-lg);
  background: var(--a-container);
  color: var(--a-primary);
}
.ct-channel__badge {
  padding: var(--a-xxs) 10px;
  background: var(--a-container);
  border-radius: var(--ct-r);
  color: var(--a-on-var);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ct-channel__title {
  margin-bottom: var(--a-xs);
  font-family: var(--a-serif);
  font-size: 22px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--a-on);
}
.ct-channel__desc {
  margin-bottom: var(--a-md);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on-var);
}
.ct-channel__rows {
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
}
.ct-channel__rows > * + * { margin-top: var(--a-xs); }

.ct-row {
  display: flex;
  padding-block: var(--a-xxs);
  border-bottom: 1px solid var(--a-variant);
}
.ct-row--row   { align-items: center; justify-content: space-between; gap: var(--a-xs); }
.ct-row--stack { flex-direction: column; }
.ct-row__label { color: var(--a-on-var); }
.ct-row--stack .ct-row__label {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
}
.ct-row__value {
  letter-spacing: .025em;
  transition: color .2s ease;
}
.ct-row__value--gold { color: var(--a-secondary); font-weight: 600; }
.ct-row__value--ink  { color: var(--a-on); font-weight: 600; }
.ct-row--row .ct-row__value--ink { font-weight: 500; }
a.ct-row__value--gold:hover { color: var(--a-on-secondary-container, #765900); }
a.ct-row__value--ink:hover  { color: var(--a-secondary); }

.ct-channel__note {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  margin-top: var(--a-md);
  padding-top: var(--a-sm);
  border-top: 1px solid rgba(229, 226, 219, .8);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--a-on-var);
}
.ct-channel__note .icon { color: var(--a-secondary); flex: 0 0 auto; }

/* ------------------------------------------------ 諮詢表單 */
.ct-inquiry { margin-bottom: var(--a-3xl); }
.ct-inquiry__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.ct-form-card {
  padding: var(--a-lg);
  background: var(--a-lowest);
  border: 1px solid rgba(208, 196, 190, .4);
  border-radius: var(--ct-r-xl);
  box-shadow: var(--a-sh-md);
}
.ct-form-card__head {
  margin-bottom: var(--a-lg);
  padding-bottom: var(--a-md);
  border-bottom: 1px solid rgba(208, 196, 190, .6);
}
.ct-form-card__title {
  margin-top: var(--a-xs);
  font-family: var(--a-serif);
  font-size: 28px;
  line-height: 38px;
  font-weight: 600;
  letter-spacing: .025em;
  color: var(--a-on);
}
.ct-form-card__lead {
  margin-top: var(--a-xxs);
  font-size: 13px;
  line-height: 1.625;
  letter-spacing: .015em;
  color: var(--a-on-var);
}

.ct-form > * + * { margin-top: var(--a-md); }
.ct-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--a-md);
}
.ct-field { display: flex; flex-direction: column; gap: var(--a-xxs); }
.ct-field__label {
  display: flex;
  align-items: center;
  gap: var(--a-xxs);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--a-on);
}
.ct-field__label--split { justify-content: space-between; }
.ct-req { color: var(--a-vermilion); }
.ct-optional { color: var(--a-on-var); font-weight: 400; }
.ct-hint {
  font-size: 11px;
  line-height: 14px;
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--a-on-var);
}
.ct-field__input {
  width: 100%;
  padding: var(--a-sm) var(--a-md);
  background: var(--a-low);
  /* 設計稿載入了 Tailwind forms plugin，輸入框帶 1px 灰邊 */
  border: 1px solid #6b7280;
  border-radius: var(--ct-r-lg);
  outline: none;
  font-family: var(--a-body);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on);
  transition: background-color .2s ease, box-shadow .2s ease;
}
.ct-field__input::placeholder { color: rgba(77, 69, 64, .6); }
.ct-field__input:focus {
  background: var(--a-lowest);
  box-shadow: inset 0 0 0 1px var(--a-primary);
}
.ct-field__input--area { resize: vertical; }
.ct-field__input--select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
}
.ct-select { position: relative; }
.ct-select__caret {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding-inline: 12px;
  color: var(--a-on-var);
  pointer-events: none;
}

.ct-form__consent { padding-top: var(--a-xs); }
.ct-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--a-xs);
  cursor: pointer;
}
.ct-consent__box {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 4px;
  accent-color: var(--a-primary);
  border-radius: var(--ct-r);
  cursor: pointer;
}
.ct-consent__text {
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on-var);
  transition: color .2s ease;
}
.ct-consent:hover .ct-consent__text { color: var(--a-on); }
.ct-consent__text a {
  margin-left: 4px;
  color: var(--a-secondary);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.ct-consent__text a:hover { color: var(--a-on); }

.ct-form__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-md);
  padding-top: var(--a-sm);
}
.ct-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--a-sm);
  width: 100%;
  padding: 14px var(--a-xl);
  background: var(--a-primary);
  color: var(--a-on-primary);
  border-radius: var(--ct-r);
  box-shadow: var(--a-sh-sm);
  font-family: var(--a-serif);
  font-size: 18px;
  line-height: 26px;
  letter-spacing: .01em;
  transition: background-color .2s ease, transform .1s ease;
}
.ct-submit:hover { background: var(--a-primary-container); }
.ct-submit:active { transform: scale(.99); }
.ct-submit:disabled { opacity: .7; cursor: not-allowed; }
.ct-submit__label { font-weight: 500; letter-spacing: .1em; }
.ct-submit__en {
  font-family: var(--a-body);
  font-size: 11px;
  line-height: 14px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a-primary-fixed);
}
.ct-submit .icon { transition: transform .2s ease; }
.ct-submit:hover .icon { transform: translateX(4px); }

.ct-secure {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--a-on-var);
}
.ct-secure .icon { color: var(--a-secondary); flex: 0 0 auto; }

.ct-form__feedback {
  padding: var(--a-sm);
  background: var(--a-high);
  border-left: 4px solid var(--a-secondary);
  border-radius: var(--ct-r-lg);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on);
}
.ct-form__feedback[hidden] { display: none; }
.ct-form__feedback.is-error { border-left-color: var(--a-error); color: var(--a-error); }

/* --- 顧問服務面板 --- */
.ct-bespoke {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: var(--a-lg);
  background: var(--a-lowest);
  border: 1px solid rgba(208, 196, 190, .4);
  border-radius: var(--ct-r-xl);
  box-shadow: var(--a-sh-md);
}
.ct-bespoke__body { display: flex; flex-direction: column; }
.ct-bespoke__head {
  margin-bottom: var(--a-md);
  padding-bottom: var(--a-sm);
  border-bottom: 1px solid rgba(208, 196, 190, .6);
}
.ct-bespoke__title {
  margin-top: var(--a-xs);
  font-family: var(--a-serif);
  font-size: 28px;
  line-height: 38px;
  font-weight: 600;
  letter-spacing: .025em;
  color: var(--a-on);
}
.ct-bespoke__lead {
  margin-top: var(--a-xxs);
  font-size: 13px;
  line-height: 1.625;
  letter-spacing: .015em;
  color: var(--a-on-var);
}
.ct-bespoke__media {
  position: relative;
  /* 設計稿為「外層帶邊框 + 內層 h-44」兩層，故邊框加在 176px 之外 */
  box-sizing: content-box;
  height: 176px;
  margin-top: var(--a-lg);
  border: 1px solid rgba(208, 196, 190, .4);
  border-radius: var(--ct-r-lg);
  overflow: hidden;
}
.ct-bespoke__media img { width: 100%; height: 100%; object-fit: cover; }
.ct-bespoke__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .2) 50%, transparent);
}
.ct-bespoke__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--a-sm);
  font-size: 13px;
  line-height: 1.375;
  letter-spacing: .015em;
  color: var(--a-bright);
}
/* 電話與營業時間分成兩行（2026-09-19 使用者要求：原本擠在同一列、電話號碼被拆成兩行） */
.ct-bespoke__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: var(--a-md);
  padding-top: var(--a-sm);
  border-top: 1px solid rgba(229, 226, 219, .8);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--a-on-var);
}
.ct-bespoke__hotline { display: flex; align-items: center; gap: var(--a-xs); }
.ct-bespoke__hotline a { white-space: nowrap; }
.ct-bespoke__hotline .icon { color: var(--a-secondary); flex: 0 0 auto; }
.ct-bespoke__hotline a { color: var(--a-secondary); font-weight: 600; }
.ct-bespoke__hotline a:hover { text-decoration: underline; }
.ct-bespoke__hours { display: block; padding-left: 24px; color: var(--a-outline); font-weight: 500; }   /* 對齊電話圖示右邊的文字 */

/* ------------------------------------------------ 據點與地圖 */
.ct-location { margin-bottom: var(--a-3xl); }
.ct-location__card {
  background: var(--a-lowest);
  border: 1px solid rgba(208, 196, 190, .4);
  border-radius: var(--ct-r-xl);
  box-shadow: var(--a-sh-md);
  overflow: hidden;
}
.ct-location__head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--a-md);
  padding: var(--a-lg);
  border-bottom: 1px solid rgba(208, 196, 190, .6);
}
.ct-location__headline { display: flex; flex-direction: column; gap: var(--a-xxs); }
.ct-location__title {
  font-family: var(--a-serif);
  font-size: 28px;
  line-height: 38px;
  font-weight: 600;
  letter-spacing: .025em;
  color: var(--a-on);
}
.ct-location__lead {
  margin-top: var(--a-xxs);
  font-size: 13px;
  line-height: 1.625;
  letter-spacing: .015em;
  color: var(--a-on-var);
}
.ct-location__link {
  display: inline-flex;
  align-items: center;
  gap: var(--a-xs);
  align-self: flex-start;
  padding: var(--a-xs) var(--a-md);
  border: 1px solid var(--a-outline);
  border-radius: var(--ct-r);
  color: var(--a-on);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .05em;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease;
}
.ct-location__link:hover { border-color: var(--a-primary); color: var(--a-secondary); }
.ct-location__link .icon { color: var(--a-secondary); flex: 0 0 auto; }

.ct-location__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.ct-map {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  background: var(--a-low);
  border-bottom: 1px solid rgba(208, 196, 190, .6);
  overflow: hidden;
}
.ct-map__frame {
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: 0;
  filter: grayscale(1) contrast(.9);
  opacity: .9;
  transition: filter .5s ease, opacity .5s ease;
}
.ct-map__frame:hover { filter: grayscale(0) contrast(.9); opacity: 1; }
.ct-map__pin {
  position: absolute;
  top: var(--a-md);
  left: var(--a-md);
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  padding: var(--a-xs) var(--a-md);
  background: rgba(252, 249, 242, .95);
  border: 1px solid rgba(208, 196, 190, .6);
  border-radius: var(--ct-r-lg);
  box-shadow: var(--a-sh-sm);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--a-on);
  pointer-events: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.ct-map__pin-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 9999px;
  background: var(--a-secondary);
}

.ct-transport {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--a-lg);
  background: var(--a-lowest);
}
.ct-transport__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.ct-transport__body > * + * { margin-top: var(--a-lg); }
.ct-transport__head {
  margin-bottom: var(--a-md);
  padding-bottom: var(--a-sm);
  border-bottom: 1px solid rgba(208, 196, 190, .6);
}
.ct-transport__title {
  margin-top: var(--a-xs);
  font-family: var(--a-serif);
  font-size: 28px;
  line-height: 38px;
  font-weight: 600;
  letter-spacing: .025em;
  color: var(--a-on);
}
.ct-transport__lead {
  margin-top: var(--a-xxs);
  font-size: 13px;
  line-height: 1.625;
  letter-spacing: .015em;
  color: var(--a-on-var);
}
.ct-transport__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--a-sm);
  padding-top: var(--a-md);
  border-top: 1px solid rgba(229, 226, 219, .8);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--a-on-var);
}
.ct-transport__item { display: flex; align-items: center; gap: var(--a-xs); }
.ct-transport__item .icon { color: var(--a-secondary); flex: 0 0 auto; }
.ct-transport__item a { color: var(--a-secondary); font-weight: 600; }
.ct-transport__item a:hover { text-decoration: underline; }

/* ---------- 聯繫我們：sm 640px ---------- */
@media (min-width: 640px) {
  .ct-form__actions { flex-direction: row; }
  .ct-submit { width: auto; }
  .ct-transport__foot { flex-direction: row; align-items: center; }
}

/* ---------- 聯繫我們：md 768px ---------- */
@media (min-width: 768px) {
  .ct-channels__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ct-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-form-card,
  .ct-bespoke { padding: var(--a-xl); }
  .ct-location__head { flex-direction: row; align-items: flex-end; padding: var(--a-xl); }
  .ct-transport { padding: var(--a-xl); }
}

/* ---------- 聯繫我們：lg 1024px ---------- */
@media (min-width: 1024px) {
  .ct-header__row { flex-direction: row; align-items: flex-end; }
  .ct-seal { display: flex; }
  .ct-header__title { font-size: 56px; line-height: 72px; }

  .ct-inquiry__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ct-form-card { grid-column: span 7 / span 7; }
  .ct-bespoke   { grid-column: span 5 / span 5; }

  .ct-location__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ct-map {
    grid-column: span 7 / span 7;
    min-height: 440px;
    border-bottom: 0;
    border-right: 1px solid rgba(208, 196, 190, .6);
  }
  .ct-map__frame { min-height: 440px; }
  .ct-transport { grid-column: span 5 / span 5; }
}


/* ==========================================================================
   13. 會員：登入、註冊、忘記密碼、會員中心（沿用 Wabi-Sabi 主題代幣）
   ========================================================================== */

/* 頁首帳戶按鈕：已登入時右下角加上小圓點（絕對定位，不影響版面） */
.header-actions__avatar.is-member { position: relative; }
.header-actions__avatar.is-member::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #3f8f4e;
}

.member-main {
  width: 100%;
  padding-bottom: var(--a-2xl);
  font-family: var(--a-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--a-on);
  background: var(--a-surface);
  --mb-r: 4px;
  --mb-r-lg: 8px;
}

/* --- 標題區 --- */
.mb-header { padding-top: var(--a-xl); padding-bottom: var(--a-lg); }
.mb-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a-xs);
  margin-bottom: var(--a-md);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--a-on-var);
}
.mb-crumb a { transition: color .2s ease; }
.mb-crumb a:hover { color: var(--a-on); }
.mb-crumb__sep { color: var(--a-outline-var); font-weight: 300; }
.mb-crumb__current { color: var(--a-on); letter-spacing: .05em; }

.mb-header__body {
  display: flex;
  flex-direction: column;
  gap: var(--a-xs);
  padding-bottom: var(--a-lg);
  border-bottom: 1px solid rgba(208, 196, 190, .6);
}
.mb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--a-xs);
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a-vermilion);
}
.mb-rule { width: 20px; height: 1px; flex: 0 0 auto; background: var(--a-vermilion); }
.mb-header__title {
  font-family: var(--a-serif);
  font-size: 32px;
  line-height: 42px;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--a-on);
}
.mb-header__lead {
  max-width: 768px;
  font-size: 15px;
  line-height: 1.625;
  letter-spacing: .01em;
  color: var(--a-on-var);
}

/* --- 版面 --- */
.mb-layout { display: grid; gap: var(--a-lg); align-items: start; }
.mb-layout--narrow { max-width: 560px; }

/* --- 卡片 --- */
.mb-card {
  min-width: 0;
  padding: var(--a-lg);
  background: var(--a-lowest);
  border: 1px solid rgba(208, 196, 190, .4);
  border-radius: var(--mb-r-lg);
  box-shadow: var(--a-sh-md);
}
.mb-card__head {
  margin-bottom: var(--a-lg);
  padding-bottom: var(--a-md);
  border-bottom: 1px solid rgba(208, 196, 190, .6);
}
.mb-card__title {
  font-family: var(--a-serif);
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: .02em;
}
.mb-card__lead {
  margin-top: var(--a-xxs);
  font-size: 13px;
  line-height: 1.625;
  letter-spacing: .015em;
  color: var(--a-on-var);
}
.mb-card__switch {
  margin-top: var(--a-lg);
  padding-top: var(--a-md);
  border-top: 1px solid rgba(208, 196, 190, .6);
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  color: var(--a-on-var);
}
.mb-card__switch a,
.mb-link {
  margin-left: 4px;
  font-weight: 600;
  color: var(--a-secondary);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.mb-card__switch a:hover,
.mb-link:hover { color: var(--a-on); }

.mb-alert {
  margin-bottom: var(--a-md);
  padding: var(--a-sm) var(--a-md);
  border-left: 3px solid var(--a-secondary);
  border-radius: var(--mb-r);
  background: var(--a-high);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on);
}
.mb-alert--success { border-left-color: #2d6a3a; background: #e3efe1; color: #1d4a27; }
.mb-alert--error   { border-left-color: var(--a-error); background: #ffdad6; color: #7a1010; }

/* --- 表單 --- */
.mb-form > * + * { margin-top: var(--a-md); }
.mb-form__row { display: grid; gap: var(--a-md); }
.mb-form__section {
  padding-top: var(--a-xs);
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--a-secondary);
}
.mb-form__section:first-child { padding-top: 0; }

.mb-field { display: flex; flex-direction: column; gap: var(--a-xxs); min-width: 0; }
.mb-field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--a-xs);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--a-on);
}
.mb-field__label a {
  letter-spacing: .04em;
  color: var(--a-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mb-field__label a:hover { color: var(--a-on); }
.mb-req { margin-left: 2px; color: var(--a-vermilion); }
.mb-optional { font-weight: 400; color: var(--a-on-var); }

.mb-input {
  width: 100%;
  padding: var(--a-sm) var(--a-md);
  background: var(--a-low);
  border: 1px solid var(--a-outline-var);
  border-radius: var(--mb-r);
  font-family: var(--a-body);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on);
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.mb-input::placeholder { color: rgba(77, 69, 64, .55); }
.mb-input:focus {
  outline: none;
  background: var(--a-lowest);
  border-color: var(--a-primary);
  box-shadow: inset 0 0 0 1px var(--a-primary);
}
.mb-field.has-error .mb-input { border-color: var(--a-error); background: #fffafa; }
.mb-field__help  { font-size: 12px; line-height: 18px; color: var(--a-on-var); }
.mb-field__error { font-size: 12px; line-height: 18px; font-weight: 600; color: var(--a-error); }

.mb-password { position: relative; }
.mb-password .mb-input { padding-right: 64px; }
.mb-password__toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  padding: 4px 8px;
  border-radius: var(--mb-r);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--a-secondary);
  cursor: pointer;
}
.mb-password__toggle:hover { background: var(--a-container); }

.mb-check {
  display: flex;
  align-items: flex-start;
  gap: var(--a-xs);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on-var);
  cursor: pointer;
}
.mb-check input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: var(--a-primary);
  cursor: pointer;
}
.mb-check a { color: var(--a-secondary); text-decoration: underline; text-underline-offset: 4px; }
.mb-check.has-error { color: var(--a-error); }

.mb-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--a-sm);
  width: 100%;
  padding: 14px var(--a-xl);
  background: var(--a-primary);
  color: var(--a-on-primary);
  border-radius: var(--mb-r);
  box-shadow: var(--a-sh-sm);
  font-family: var(--a-serif);
  font-size: 17px;
  line-height: 24px;
  letter-spacing: .1em;
  cursor: pointer;
  transition: background-color .2s ease;
}
.mb-submit:hover { background: var(--a-primary-container); }
.mb-submit:active { transform: scale(.99); }
.mb-submit__en {
  font-family: var(--a-body);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a-primary-fixed);
}
.mb-submit .icon { transition: transform .2s ease; }
.mb-submit:hover .icon { transform: translateX(4px); }

.mb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-md); padding-top: var(--a-xs); }
.mb-meta { font-size: 12px; line-height: 18px; color: var(--a-on-var); }

/* --- 會員禮遇面板 --- */
.mb-benefits {
  position: relative;
  overflow: hidden;
  padding: var(--a-lg);
  background: var(--a-primary-container);
  color: var(--a-surface);
  border-radius: var(--mb-r-lg);
  box-shadow: var(--a-sh-lg);
}
.mb-benefits__stamp {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 2px;
  background: var(--a-vermilion);
  color: #fff;
  font-family: var(--a-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .05em;
}
.mb-benefits__eyebrow {
  margin-top: var(--a-lg);
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--a-sec-fixed-dim);
}
.mb-benefits__title {
  margin-top: var(--a-xs);
  font-family: var(--a-serif);
  font-size: 24px;
  line-height: 34px;
  font-weight: 400;
  letter-spacing: .02em;
}
.mb-benefits__list {
  display: flex;
  flex-direction: column;
  gap: var(--a-sm);
  margin-top: var(--a-lg);
  padding: 0;
  list-style: none;
}
.mb-benefits__item {
  display: flex;
  align-items: flex-start;
  gap: var(--a-sm);
  padding-bottom: var(--a-sm);
  border-bottom: 1px solid rgba(252, 249, 242, .12);
  font-size: 14px;
  line-height: 22px;
  color: rgba(252, 249, 242, .88);
}
.mb-benefits__item .icon { flex: 0 0 auto; margin-top: 3px; color: var(--a-sec-fixed-dim); }
.mb-benefits__note { margin-top: var(--a-lg); font-size: 12px; line-height: 18px; color: rgba(252, 249, 242, .6); }

/* --- 會員中心側欄 --- */
.mb-nav {
  padding: var(--a-md);
  background: var(--a-low);
  border: 1px solid rgba(208, 196, 190, .5);
  border-radius: var(--mb-r-lg);
}
.mb-nav__hello { padding: var(--a-xs) var(--a-sm) var(--a-md); border-bottom: 1px solid rgba(208, 196, 190, .6); }
.mb-nav__name { font-family: var(--a-serif); font-size: 18px; line-height: 26px; }
.mb-nav__email { font-size: 12px; line-height: 18px; color: var(--a-on-var); word-break: break-all; }
.mb-nav__list { display: flex; flex-direction: column; gap: 2px; margin-top: var(--a-sm); padding: 0; list-style: none; }
.mb-nav__link {
  display: flex;
  align-items: center;
  gap: var(--a-sm);
  padding: 10px var(--a-sm);
  border-radius: var(--mb-r);
  font-size: 14px;
  line-height: 20px;
  color: var(--a-on-var);
  transition: background-color .2s ease, color .2s ease;
}
.mb-nav__link:hover { background: var(--a-container); color: var(--a-on); }
.mb-nav__link.is-active {
  background: var(--a-lowest);
  color: var(--a-on);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--a-vermilion);
}
.mb-nav__logout { margin-top: var(--a-sm); padding-top: var(--a-sm); border-top: 1px solid rgba(208, 196, 190, .6); }
.mb-nav__logout button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--a-sm);
  padding: 10px var(--a-sm);
  border-radius: var(--mb-r);
  font-size: 14px;
  line-height: 20px;
  color: var(--a-on-var);
  cursor: pointer;
}
.mb-nav__logout button:hover { color: var(--a-vermilion); background: var(--a-container); }

@media (min-width: 640px) {
  .mb-card { padding: var(--a-xl); }
  .mb-benefits { padding: var(--a-xl); }
  .mb-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .mb-header__title { font-size: 40px; line-height: 52px; }
}

@media (min-width: 960px) {
  .mb-layout--auth { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--a-xl); }
  .mb-layout--center { grid-template-columns: 260px minmax(0, 1fr); gap: var(--a-xl); }
  .mb-layout--center .mb-nav { position: sticky; top: calc(var(--header-h, 80px) + 24px); }
}

/* --- 我的收藏 --- */
.mb-favs { display: grid; gap: var(--a-sm); margin: 0; padding: 0; list-style: none; }
.mb-fav {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--a-md);
  align-items: start;
  padding: var(--a-sm);
  background: var(--a-low);
  border: 1px solid rgba(208, 196, 190, .5);
  border-radius: var(--mb-r);
}
.mb-fav__thumb {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--mb-r);
  background: var(--a-container);
}
.mb-fav__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mb-fav.is-off .mb-fav__thumb img { filter: grayscale(1); opacity: .6; }
.mb-fav__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mb-fav__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--a-on-var);
}
.mb-fav__status {
  padding: 0 6px;
  border-radius: 999px;
  background: var(--a-container);
  color: var(--a-vermilion);
}
.mb-fav__name {
  font-family: var(--a-serif);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--a-on);
}
.mb-fav__price { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--a-on); }
.mb-fav__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-sm); margin-top: var(--a-xs); }
.mb-fav__remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(208, 196, 190, .9);
  border-radius: 999px;
  background: var(--a-lowest);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--a-on-var);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.mb-fav__remove .icon { color: var(--a-vermilion); fill: currentColor; }
.mb-fav__remove:hover { color: var(--a-vermilion); border-color: var(--a-vermilion); }
.mb-fav__link {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--a-on-var);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mb-fav__link:hover { color: var(--a-on); }

.mb-favs__empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--a-xs); padding: var(--a-md) 0; }
.mb-favs__empty[hidden] { display: none; }
.mb-favs__empty-title { font-family: var(--a-serif); font-size: 18px; line-height: 26px; color: var(--a-on); }
.mb-favs__empty-text { margin-bottom: var(--a-sm); font-size: 13px; line-height: 20px; color: var(--a-on-var); }

@media (min-width: 1200px) {
  .mb-favs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   14. 購物車（stitch_購物車）
   設計稿為 Tailwind：字級與行高依 Tailwind 對照（text-xs 12/16、text-sm 14/20、text-lg 18/28、
   text-xl 20/28、text-2xl 24/32、text-4xl 36/40）；只寫 text-[10px]／text-[11px] 的地方沿用 1.5 倍行高。
   ========================================================================== */
.page-cart {
  --cart-bg:    #fcf9f2;
  --cart-dark:  #1c1917;
  --cart-muted: #78716c;
  --cart-seal:  #991b1b;
  --cart-gold:  #a16207;
  --cart-serif: "Noto Serif TC", "Songti TC", Baskerville, Georgia, serif;
  --cart-sans:  "Noto Sans TC", system-ui, sans-serif;
  --cart-ease:  cubic-bezier(.4, 0, .2, 1);
  background-color: var(--cart-bg);
}

.cart-container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* --- 麵包屑列 --- */
.cart-crumb {
  border-bottom: 1px solid #ece4d5;
  background: rgba(250, 246, 236, .6);
  font-family: var(--cart-sans);
}
.cart-crumb__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 12px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .05em;
  color: var(--cart-muted);
}
.cart-crumb__trail { display: flex; align-items: center; gap: 8px; }
.cart-crumb__trail a { transition: color .15s var(--cart-ease); }
.cart-crumb__trail a:hover { color: var(--cart-dark); }
.cart-crumb__current { color: var(--cart-dark); font-weight: 500; }
.cart-crumb__meta {
  display: none;
  align-items: center;
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
}
.cart-crumb__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-radius: 9999px;
  background: var(--cart-seal);
}

/* --- 主要內容與標題 --- */
.cart-main {
  padding-block: 40px;
  font-family: var(--cart-serif);
  color: var(--cart-dark);
}
.cart-heading { margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid #e2d8c7; }
.cart-heading__tags { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cart-heading__badge {
  padding: 2px 8px;
  border-radius: 2px;
  background: var(--cart-seal);
  color: #fff;
  font-family: var(--cart-sans);
  font-size: 10px;
  line-height: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cart-heading__dossier {
  font-family: var(--cart-sans);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cart-muted);
}
.cart-heading__title {
  margin-top: 8px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--cart-dark);
}
.cart-heading__lead {
  display: flex;
  align-items: center;
  margin-top: 12px;
  font-family: var(--cart-sans);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .025em;
  color: var(--cart-muted);
}
.cart-heading__icon { width: 16px; height: 16px; flex-shrink: 0; margin-right: 6px; color: var(--cart-gold); }

.cart-flash {
  margin-bottom: 24px;
  padding: 12px 16px;
  border: 1px solid #dce8d0;
  background: #f0f4ec;
  color: #3f6212;
  font-family: var(--cart-sans);
  font-size: 14px;
  line-height: 20px;
}
.cart-flash.is-error { border-color: #f3d9d3; background: #f8ede9; color: var(--cart-seal); }

.cart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* --- 購物車藏品 --- */
.cart-items { display: flex; flex-direction: column; gap: 32px; }

.cart-item {
  padding: 20px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid #e5dccf;
  border-radius: 2px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
  transition: border-color .15s var(--cart-ease);
}
.cart-item:hover { border-color: #cfc3b0; }
.cart-item__row { display: flex; flex-direction: column; gap: 24px; }

.cart-item__media {
  position: relative;
  flex-shrink: 0;
  height: 192px;
  overflow: hidden;
  background: #f4ede2;
  border: 1px solid #e5dcce;
}
.cart-item__img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cart-item__img:hover { transform: scale(1.05); }
.cart-item__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  background: rgba(28, 25, 23, .85);
  color: #fcf9f2;
  font-family: var(--cart-sans);
  font-size: 10px;
  line-height: 15px;
  letter-spacing: .1em;
}

.cart-item__body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.cart-item__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  font-family: var(--cart-sans);
  font-size: 11px;
  line-height: 16.5px;
  color: var(--cart-seal);
}
.cart-chip { padding: 2px 8px; border: 1px solid #f3d9d3; border-radius: 1px; background: #f8ede9; }
.cart-chip--gold { border-color: #f5e3bc; background: #fbf4e6; color: #854d0e; }
.cart-chip--moss { border-color: #dce8d0; background: #f0f4ec; color: #3f6212; }

.cart-item__title {
  margin-bottom: 4px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: .025em;
  color: var(--cart-dark);
}
.cart-item__spec {
  margin-bottom: 12px;
  font-family: var(--cart-sans);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .05em;
  color: var(--cart-muted);
}
.cart-item__stock {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cart-sans);
  font-size: 12px;
  line-height: 16px;
  color: #57534e;
}
.cart-item__dot { display: inline-block; flex-shrink: 0; width: 6px; height: 6px; border-radius: 9999px; background: #059669; }

.cart-item__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding-top: 20px;
  border-top: 1px solid #f0e7db;
}
.cart-item__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: var(--cart-sans);
  font-size: 12px;
  line-height: 16px;
  color: var(--cart-muted);
}
.cart-item__action { display: flex; align-items: center; gap: 4px; transition: color .15s var(--cart-ease); }
.cart-item__action:hover,
.cart-item__action.is-active { color: var(--cart-seal); }
.cart-item__action .icon { width: 14px; height: 14px; }
.cart-item__action.is-active .icon { fill: currentColor; }

.cart-item__price { text-align: right; }
.cart-item__price-label { font-family: var(--cart-sans); font-size: 12px; line-height: 16px; color: var(--cart-muted); }
.cart-item__price-value {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--cart-dark);
}
.cart-item__price-unit { font-family: var(--cart-sans); font-size: 12px; line-height: 16px; color: var(--cart-muted); }

/* 購買數量（藏品件數 2 以上才顯示；選擇後自動送出，沒有 JavaScript 時按「更新」） */
.cart-item__qty { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-family: var(--cart-sans); font-size: 12px; line-height: 16px; }
.cart-item__qty-label { color: var(--cart-muted); letter-spacing: .05em; }
.cart-item__qty-select {
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid #d6cdbd;
  border-radius: 2px;
  background: #fff;
  font: inherit;
  color: var(--cart-dark);
  cursor: pointer;
}
.cart-item__qty-select:focus-visible { outline: 2px solid var(--cart-seal); outline-offset: 2px; }
.cart-item__qty-btn { min-height: 32px; padding: 0 12px; border: 1px solid var(--cart-dark); border-radius: 2px; color: var(--cart-dark); }
.cart-item__qty-btn:hover { background: var(--cart-dark); color: #fff; }
.cart-item__qty.is-auto .cart-item__qty-btn { display: none; }

/* 已下架的藏品 */
.cart-item.is-unavailable .cart-item__img { filter: grayscale(1); opacity: .6; }
.cart-item.is-unavailable .cart-item__dot { background: var(--cart-seal); }
.cart-item.is-unavailable .cart-item__stock { color: var(--cart-seal); }
.cart-item.is-unavailable .cart-item__price-value { color: var(--cart-muted); text-decoration: line-through; }

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 28px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid #e5dccf;
  border-radius: 2px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}
.cart-empty__title { font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: .025em; }
.cart-empty__text { font-family: var(--cart-sans); font-size: 14px; line-height: 20px; color: var(--cart-muted); }
.cart-empty__btn {
  margin-top: 4px;
  padding: 10px 20px;
  background: var(--cart-dark);
  color: #fff;
  font-family: var(--cart-sans);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .1em;
  transition: background-color .15s var(--cart-ease);
}
.cart-empty__btn:hover { background: #000; }

.cart-items__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  font-family: var(--cart-sans);
  font-size: 12px;
  line-height: 16px;
}
.cart-items__back { display: inline-flex; align-items: center; color: var(--cart-muted); transition: color .15s var(--cart-ease); }
.cart-items__back:hover { color: var(--cart-dark); }
.cart-items__back .icon { width: 16px; height: 16px; margin-right: 4px; }
.cart-items__sync { color: #a8a29e; }

/* --- 結算摘要 --- */
.cart-summary__card {
  position: sticky;
  top: calc(var(--header-h) + 32px);
  padding: 24px;
  background: #f7f2e7;
  border: 1px solid #ded5c4;
  border-radius: 2px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}
.cart-summary__title {
  padding-bottom: 16px;
  border-bottom: 1px solid #e5ddcd;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--cart-dark);
}
.cart-summary__rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-block: 20px;
  border-bottom: 1px solid #e5ddcd;
  font-family: var(--cart-sans);
  font-size: 12px;
  line-height: 16px;
  color: var(--cart-dark);
}
/* 與設計稿一致：列內不加間距、不禁止換行（窄欄寬時換行位置才會相同） */
.cart-summary__row { display: flex; align-items: center; justify-content: space-between; }
.cart-summary__label { color: var(--cart-muted); }
.cart-summary__value { font-weight: 500; }
.cart-pill {
  padding: 2px 8px;
  border-radius: 1px;
  background: rgba(153, 27, 27, .1);
  color: var(--cart-seal);
  font-size: 11px;
  font-weight: 500;
}
.cart-summary__hint { margin-top: -4px; font-size: 11px; text-align: right; color: var(--cart-gold); }

.cart-summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 20px;
  border-bottom: 1px solid #e5ddcd;
}
.cart-summary__total-label {
  display: block;
  font-family: var(--cart-sans);
  font-size: 12px;
  line-height: 16px;
  color: var(--cart-muted);
}
.cart-summary__total-note { font-family: var(--cart-sans); font-size: 11px; color: #047857; }
.cart-summary__total-value {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--cart-dark);
}

.cart-summary__actions { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; font-family: var(--cart-sans); }
.cart-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: all .15s var(--cart-ease);
}
.cart-btn--primary {
  gap: 8px;
  padding-block: 14px;
  background: var(--cart-dark);
  color: #fff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
}
.cart-btn--primary:hover { background: #000; }
.cart-btn--primary .icon { width: 16px; height: 16px; color: #d4af37; }
.cart-btn--primary:disabled { opacity: .55; cursor: not-allowed; }
.cart-btn--primary:disabled:hover { background: var(--cart-dark); }
.cart-btn--outline {
  gap: 6px;
  padding-block: 12px;
  border: 1px solid var(--cart-dark);
  background: transparent;
  color: var(--cart-dark);
}
.cart-btn--outline:hover { background: var(--cart-dark); color: #fff; }
.cart-btn--outline .icon { width: 14px; height: 14px; color: var(--cart-seal); }
.cart-summary__note { font-size: 12px; line-height: 18px; text-align: center; color: var(--cart-muted); }

.cart-summary__assure { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(229, 221, 205, .8); }
.cart-summary__assure-title {
  margin-bottom: 12px;
  font-family: var(--cart-sans);
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cart-muted);
}
.cart-summary__assure-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--cart-sans);
  font-size: 12px;
  line-height: 16px;
  color: #44403c;
}
.cart-summary__assure-list li { display: flex; align-items: flex-start; }
.cart-summary__check { margin-right: 8px; font-weight: 700; color: var(--cart-seal); }

/* --- 推薦藏品 --- */
.cart-recommend { margin-top: 80px; padding-top: 48px; border-top: 1px solid #ded5c4; }
.cart-recommend__head { display: flex; flex-direction: column; justify-content: space-between; margin-bottom: 32px; }
.cart-recommend__eyebrow {
  display: block;
  margin-bottom: 4px;
  font-family: var(--cart-sans);
  font-size: 10px;
  line-height: 15px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--cart-seal);
}
.cart-recommend__title { font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: .05em; color: var(--cart-dark); }
.cart-recommend__more {
  margin-top: 8px;
  font-family: var(--cart-sans);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .05em;
  color: var(--cart-muted);
  transition: color .15s var(--cart-ease);
}
.cart-recommend__more:hover { color: var(--cart-dark); }

.cart-recommend__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.cart-rec {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  background: rgba(255, 255, 255, .6);
  border: 1px solid #e4dcce;
  border-radius: 2px;
  transition: all .15s var(--cart-ease);
}
.cart-rec:hover { border-color: rgba(153, 27, 27, .5); }
.cart-rec__media { height: 176px; margin-bottom: 12px; overflow: hidden; background: #f2ecdf; border: 1px solid #ede5d8; }
.cart-rec__img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--cart-ease); }
.cart-rec:hover .cart-rec__img { transform: scale(1.05); }
.cart-rec__meta { margin-bottom: 4px; font-family: var(--cart-sans); font-size: 10px; line-height: 15px; color: var(--cart-seal); }
.cart-rec__title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: .025em;
  color: var(--cart-dark);
  transition: color .15s var(--cart-ease);
}
.cart-rec:hover .cart-rec__title { color: var(--cart-seal); }
.cart-rec__note { margin-top: 4px; font-family: var(--cart-sans); font-size: 12px; line-height: 16px; color: var(--cart-muted); }
.cart-rec__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #f0e8dc;
}
.cart-rec__price { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--cart-dark); }
.cart-rec__add {
  padding: 6px 12px;
  border-radius: 1px;
  background: var(--cart-dark);
  color: #fff;
  font-family: var(--cart-sans);
  font-size: 12px;
  line-height: 16px;
  transition: background-color .15s var(--cart-ease);
}
.cart-rec__add:hover { background: var(--cart-seal); }

.cart-guide {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  background: rgba(243, 237, 225, .7);
  border: 1px solid #e0d7c7;
  border-radius: 2px;
}
.cart-guide__eyebrow { font-family: var(--cart-sans); font-size: 12px; line-height: 16px; font-weight: 700; color: var(--cart-seal); }
.cart-guide__title { margin-top: 8px; font-size: 18px; line-height: 28px; font-weight: 700; letter-spacing: .025em; color: var(--cart-dark); }
.cart-guide__text { margin-top: 12px; font-family: var(--cart-sans); font-size: 12px; line-height: 1.625; color: var(--cart-muted); }
.cart-guide__foot { margin-top: 24px; }
.cart-guide__btn {
  display: inline-block;
  width: 100%;
  padding-block: 8px;
  border: 1px solid var(--cart-dark);
  color: var(--cart-dark);
  text-align: center;
  font-family: var(--cart-sans);
  font-size: 12px;
  line-height: 16px;
  transition: all .15s var(--cart-ease);
}
.cart-guide__btn:hover { background: var(--cart-dark); color: #fff; }

/* --- 購物車：sm 640px --- */
@media (min-width: 640px) {
  .cart-container { padding-inline: 24px; }
  .cart-crumb__meta { display: flex; }
  .cart-heading__title { font-size: 36px; line-height: 40px; }
  .cart-heading__lead { font-size: 14px; line-height: 20px; }
  .cart-item { padding: 28px; }
  .cart-item__row { flex-direction: row; }
  .cart-item__media { width: 176px; height: 176px; }
  .cart-item__title { font-size: 20px; line-height: 28px; }
  .cart-summary__card { padding: 28px; }
  .cart-recommend__head { flex-direction: row; align-items: flex-end; }
  .cart-recommend__title { font-size: 24px; line-height: 32px; }
  .cart-recommend__more { margin-top: 0; }
  .cart-recommend__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 購物車：lg 1024px --- */
@media (min-width: 1024px) {
  .cart-container { padding-inline: 32px; }
  .cart-main { padding-block: 56px; }
  .cart-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px; }
  .cart-items { grid-column: span 8 / span 8; }
  .cart-summary { grid-column: span 4 / span 4; }
  .cart-recommend__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   14-1. 結帳（沿用購物車的配色與結算摘要；無設計稿）
   ========================================================================== */
.co-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--cart-sans);
  font-size: 12px;
  line-height: 20px;
  letter-spacing: .05em;
  color: var(--cart-muted);
}
.co-steps li { display: flex; align-items: center; gap: 6px; }
.co-steps__num {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid #d6cbb8;
  border-radius: 9999px;
  font-size: 11px;
  line-height: 1;
}
.co-steps .is-done .co-steps__num { border-color: var(--cart-seal); color: var(--cart-seal); }
.co-steps .is-current { font-weight: 500; color: var(--cart-dark); }
.co-steps .is-current .co-steps__num { border-color: var(--cart-dark); background: var(--cart-dark); color: #fff; }

.co-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.co-section {
  min-width: 0;
  padding: 24px 20px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid #e5dccf;
  border-radius: 2px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}
.co-section__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0e7db;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--cart-dark);
}
.co-section__step { font-family: var(--cart-sans); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .2em; color: var(--cart-seal); }
.co-section__optional { font-family: var(--cart-sans); font-size: 12px; font-weight: 400; letter-spacing: .02em; color: var(--cart-muted); }

.co-fields { display: grid; gap: 16px; }
.co-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-family: var(--cart-sans); }
.co-field--spaced { margin-top: 16px; }
.co-field__label { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .05em; color: var(--cart-dark); }
.co-req { margin-left: 2px; color: var(--cart-seal); }
.co-input {
  width: 100%;
  padding: 10px 12px;
  background: #fffdf8;
  border: 1px solid #d9cfbf;
  border-radius: 1px;
  font-family: var(--cart-sans);
  font-size: 14px;
  line-height: 20px;
  color: var(--cart-dark);
  transition: border-color .15s var(--cart-ease), box-shadow .15s var(--cart-ease);
}
.co-input:focus { outline: none; border-color: var(--cart-dark); box-shadow: inset 0 0 0 1px var(--cart-dark); }
.co-input::placeholder { color: #a8a29e; }
textarea.co-input { min-height: 88px; resize: vertical; }
.co-field.has-error .co-input { border-color: var(--cart-seal); background: #fffafa; }
.co-field__help { font-size: 12px; line-height: 18px; color: var(--cart-muted); }
.co-field__error { margin-top: 6px; font-family: var(--cart-sans); font-size: 12px; line-height: 18px; font-weight: 500; color: var(--cart-seal); }
.co-field .co-field__error { margin-top: 0; }
.co-readonly {
  padding: 10px 12px;
  border: 1px dashed #d9cfbf;
  font-size: 14px;
  line-height: 20px;
  color: var(--cart-muted);
  word-break: break-all;
}
.co-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.co-options { display: grid; gap: 12px; }
.co-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: #fffdf8;
  border: 1px solid #e0d6c5;
  border-radius: 2px;
  font-family: var(--cart-sans);
  cursor: pointer;
  transition: border-color .15s var(--cart-ease), box-shadow .15s var(--cart-ease), background-color .15s var(--cart-ease);
}
.co-option:hover { border-color: #cfc3b0; }
/* 選取中的選項：is-checked 由伺服器輸出、main.js 即時切換（不依賴 :has，舊瀏覽器也有效） */
.co-option.is-checked { background: #fff; border-color: var(--cart-dark); box-shadow: inset 0 0 0 1px var(--cart-dark); }
.co-option:focus-within { outline: 2px solid rgba(28, 25, 23, .3); outline-offset: 2px; }
.co-option input { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--cart-dark); cursor: pointer; }
.co-option__body { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.co-option__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.co-option__title { display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--cart-dark); }
.co-option__title .icon { width: 16px; height: 16px; color: var(--cart-gold); }
.co-option__fee { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--cart-dark); }
.co-option__note { font-size: 12px; line-height: 18px; color: var(--cart-muted); }

.co-address { display: grid; gap: 16px; margin-top: 16px; }
.co-address[hidden] { display: none; }
.co-alert {
  margin-bottom: 12px;
  padding: 10px 14px;
  background: #fbf4e6;
  border-left: 3px solid var(--cart-gold);
  font-family: var(--cart-sans);
  font-size: 12px;
  line-height: 18px;
  color: #854d0e;
}

.co-notice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  margin-bottom: 16px;
  padding: 14px 16px;
  overflow: auto;
  background: #f7f2e7;
  border: 1px solid #ece3d3;
  font-family: var(--cart-sans);
  font-size: 13px;
  line-height: 1.75;
  color: #57534e;
}
.co-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--cart-sans);
  font-size: 13px;
  line-height: 20px;
  color: var(--cart-dark);
  cursor: pointer;
}
.co-check input { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--cart-dark); cursor: pointer; }
.co-check.has-error { color: var(--cart-seal); }

/* 訂單明細（右欄） */
.co-lines { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 20px 0; list-style: none; border-bottom: 1px solid #e5ddcd; }
.co-line { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-family: var(--cart-sans); font-size: 12px; line-height: 16px; }
.co-line__img { width: 48px; height: 48px; object-fit: cover; background: #f4ede2; border: 1px solid #e5dcce; }
.co-line__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-family: var(--cart-serif);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  color: var(--cart-dark);
}
.co-line__price { display: flex; flex-direction: column; align-items: flex-end; font-weight: 500; white-space: nowrap; color: var(--cart-dark); }
.co-line__qty { font-size: 11px; font-weight: 400; color: var(--cart-muted); }
.co-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--cart-sans);
  font-size: 12px;
  line-height: 16px;
  color: var(--cart-muted);
  transition: color .15s var(--cart-ease);
}
.co-back:hover { color: var(--cart-dark); }
.co-back .icon { width: 14px; height: 14px; }

/* 前往綠界付款 */
.co-pay { width: 100%; max-width: 560px; margin-inline: auto; padding: 56px 16px 96px; text-align: center; font-family: var(--cart-sans); color: var(--cart-dark); }
.co-pay__card { padding: 40px 24px; background: rgba(255, 255, 255, .7); border: 1px solid #e5dccf; border-radius: 2px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); }
.co-pay__icon { width: 40px; height: 40px; margin: 0 auto 12px; color: var(--cart-gold); }
.co-pay__title { font-family: var(--cart-serif); font-size: 22px; line-height: 32px; font-weight: 700; letter-spacing: .05em; }
.co-pay__text { margin-top: 8px; font-size: 14px; line-height: 22px; color: var(--cart-muted); }
.co-pay__amount { margin-top: 16px; font-family: var(--cart-serif); font-size: 28px; line-height: 36px; font-weight: 700; }
.co-pay form { margin-top: 24px; }
.co-pay__test { margin-top: 12px; font-size: 12px; line-height: 18px; color: var(--cart-gold); }
.co-pay__back { margin-top: 20px; }

/* 已被訂單保留或已售出的藏品（藏品卡、詳細頁） */
.ex-card__buy.is-held,
.exd-btn.is-held { opacity: .55; cursor: not-allowed; }

@media (min-width: 640px) {
  .co-section { padding: 28px; }
  .co-fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-address { grid-template-columns: 160px minmax(0, 1fr); }
  .co-pay__card { padding: 48px 40px; }
}

@media (min-width: 1024px) {
  .co-main { grid-column: span 8 / span 8; }
}

/* ==========================================================================
   13-1. 會員中心：我的訂單（沿用 Wabi-Sabi 主題代幣）
   ========================================================================== */
.mb-orders { display: flex; flex-direction: column; gap: var(--a-sm); margin: 0; padding: 0; list-style: none; }
.mb-order {
  display: flex;
  flex-direction: column;
  gap: var(--a-sm);
  padding: var(--a-md);
  background: var(--a-low);
  border: 1px solid rgba(208, 196, 190, .5);
  border-radius: var(--mb-r);
}
.mb-order__head,
.mb-order__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a-xs) var(--a-sm); }
.mb-order__no { font-family: var(--a-serif); font-size: 16px; line-height: 24px; font-weight: 600; color: var(--a-on); }
.mb-order__no:hover { color: var(--a-vermilion); }
.mb-order__date { font-size: 12px; line-height: 18px; color: var(--a-on-var); }
.mb-order__body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--a-sm); align-items: center; }
.mb-order__thumbs { display: flex; gap: 6px; }
.mb-order__thumbs img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--mb-r); background: var(--a-container); }
.mb-order__items { min-width: 0; overflow: hidden; font-size: 13px; line-height: 20px; color: var(--a-on-var); text-overflow: ellipsis; white-space: nowrap; }
.mb-order__total { font-size: 15px; line-height: 22px; font-weight: 600; white-space: nowrap; color: var(--a-on); }
.mb-order__hint { font-size: 12px; line-height: 18px; font-weight: 600; color: #7f5500; }

.mb-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--a-container);
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--a-on-var);
}
.mb-status--pending,
.mb-status--quoting   { background: #fbedc9; color: #7f5500; }
.mb-status--paid,
.mb-status--shipped   { background: #e4ecf4; color: #35506c; }
.mb-status--completed { background: #e3efe1; color: #1d4a27; }

.mb-order-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--a-sm); }
.mb-order-detail { display: flex; flex-direction: column; gap: var(--a-lg); }
.mb-panel { padding: var(--a-md); background: var(--a-low); border: 1px solid rgba(208, 196, 190, .5); border-radius: var(--mb-r); }
.mb-panel--accent { border-left: 3px solid var(--a-vermilion); }
.mb-panel > * + * { margin-top: var(--a-sm); }
.mb-panel__title { margin-bottom: var(--a-sm); font-family: var(--a-serif); font-size: 18px; line-height: 26px; font-weight: 600; color: var(--a-on); }
.mb-panel > .mb-panel__title { margin-bottom: 0; }
.mb-panel__text { font-size: 13px; line-height: 1.7; color: var(--a-on-var); }
.mb-panel__amount { font-size: 15px; color: var(--a-on); }
.mb-panel .mb-alert { margin-bottom: 0; }

.mb-dl { margin: 0; }
.mb-dl__row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--a-sm);
  padding: 8px 0;
  border-bottom: 1px solid rgba(208, 196, 190, .4);
  font-size: 14px;
  line-height: 22px;
}
.mb-dl__row:last-child { border-bottom: 0; }
.mb-dl dt { font-size: 13px; color: var(--a-on-var); }
.mb-dl dd { margin: 0; word-break: break-word; color: var(--a-on); }
.mb-dl--totals { margin-top: var(--a-sm); }
.mb-dl__row--total dd { font-size: 17px; font-weight: 600; }

.mb-lines { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.mb-line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: var(--a-sm);
  align-items: center;
  padding: var(--a-sm) 0;
  border-bottom: 1px solid rgba(208, 196, 190, .4);
}
.mb-line img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--mb-r); background: var(--a-container); }
.mb-line__title { font-family: var(--a-serif); font-size: 15px; line-height: 22px; font-weight: 600; color: var(--a-on); }
a.mb-line__title:hover { color: var(--a-vermilion); }
.mb-line__meta { font-size: 12px; line-height: 18px; color: var(--a-on-var); }
.mb-line__price { font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; color: var(--a-on); }

.mb-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--a-sm); }
.mb-inline-form .mb-field { flex: 1 1 200px; }
.mb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--a-xs);
  padding: 11px var(--a-md);
  background: var(--a-primary);
  border: 1px solid var(--a-primary);
  border-radius: var(--mb-r);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--a-on-primary);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.mb-btn:hover { background: var(--a-primary-container); }
.mb-btn--ghost { background: transparent; border-color: var(--a-outline-var); color: var(--a-on); }
.mb-btn--ghost:hover { background: var(--a-container); }
.mb-btn--danger:hover { border-color: var(--a-vermilion); background: transparent; color: var(--a-vermilion); }
.mb-order-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-sm); }

@media (max-width: 479px) {
  .mb-order__body { grid-template-columns: minmax(0, 1fr) auto; }
  .mb-order__thumbs { grid-column: 1 / -1; }
}

/* ==========================================================================
   15. 探索古物：藏品詳細頁（快速鑑賞）
   設計稿沒有這一頁，沿用探索古物的 Wabi-Sabi 代幣（.theme-wabi 的 --a-*）
   ========================================================================== */
.exd-main { background: var(--a-surface); }

.exd-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a-xs);
  padding-top: var(--a-lg);
  padding-bottom: var(--a-md);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .015em;
  color: var(--a-on-var);
}
.exd-crumb a { transition: color .2s ease; }
.exd-crumb a:hover { color: var(--a-on); }
.exd-crumb__sep { color: var(--a-outline-var); font-weight: 300; }
.exd-crumb__current { color: var(--a-on); font-weight: 500; }

.exd { padding-bottom: var(--a-xl); }
.exd__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a-xl); align-items: start; }

/* --- 相簿 --- */
.exd-gallery { display: flex; flex-direction: column; gap: var(--a-sm); min-width: 0; }
.exd-gallery__stage { position: relative; background: var(--a-container); box-shadow: var(--a-sh-sm); }
.exd-gallery__main { display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; cursor: zoom-in; }
.exd-gallery__main.is-empty { cursor: default; }
/* 完整呈現整件器物（不裁切），留白處為底色 */
.exd-gallery__img { width: 100%; height: 100%; object-fit: contain; }
.exd-gallery__count {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(28, 25, 23, .72);
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: .08em;
  pointer-events: none;
}
/* 縮圖：手機與平板在主圖下方左右滑動；電腦版移到主圖左側（見 1024px 規則） */
.exd-gallery__thumbs {
  display: flex;
  gap: var(--a-xs);
  padding-bottom: 2px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.exd-gallery__thumbs li { flex: 0 0 64px; scroll-snap-align: start; }
.exd-gallery__rail { min-width: 0; }
/* 縮圖列的上下箭頭：只在電腦版、縮圖放不下時顯示（main.js 移除 hidden） */
.exd-gallery__scroll {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 100%;
  height: 28px;
  background: var(--a-container);
  color: var(--a-on);
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.exd-gallery__scroll:hover { background: var(--a-primary); color: var(--a-on-primary); }
.exd-gallery__scroll:disabled { opacity: .35; cursor: default; }
.exd-gallery__scroll:disabled:hover { background: var(--a-container); color: var(--a-on); }
.exd-gallery__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--a-container);
  opacity: .72;
  box-shadow: inset 0 0 0 2px transparent;
  transition: opacity .2s ease;
}
.exd-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.exd-gallery__thumb:hover { opacity: 1; }
.exd-gallery__thumb.is-active { opacity: 1; outline: 2px solid var(--a-on); outline-offset: -2px; }
.exd-gallery__hint { font-size: 12px; line-height: 16px; letter-spacing: .08em; color: var(--a-on-var); }

/* --- 放大檢視 --- */
.exd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 16px;
  background: rgba(28, 25, 23, .92);
}
.exd-lightbox[hidden] { display: none; }
.exd-lightbox__figure { display: flex; flex-direction: column; align-items: center; gap: var(--a-sm); max-width: 100%; margin: 0; }
.exd-lightbox__img { width: auto; max-width: min(1200px, 100%); max-height: calc(100vh - 160px); object-fit: contain; }
.exd-lightbox__caption { font-size: 13px; line-height: 20px; letter-spacing: .12em; color: rgba(255, 255, 255, .8); }
.exd-lightbox__close,
.exd-lightbox__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  transition: background-color .2s ease;
}
.exd-lightbox__close:hover,
.exd-lightbox__nav:hover { background: rgba(255, 255, 255, .26); }
.exd-lightbox__close { top: 12px; right: 12px; }
.exd-lightbox__nav { top: 50%; transform: translateY(-50%); }
.exd-lightbox__nav--prev { left: 12px; }
.exd-lightbox__nav--next { right: 12px; }

/* --- 藏品資訊 --- */
.exd-info__inner { display: flex; flex-direction: column; gap: var(--a-lg); }
.exd-info__head { display: flex; flex-direction: column; gap: var(--a-xs); }
.exd-info__kicker {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--a-secondary);
}
.exd-info__title {
  font-family: var(--a-serif);
  font-size: 28px;
  line-height: 38px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--a-on);
}
.exd-info__lead { font-size: 15px; line-height: 26px; letter-spacing: .01em; color: var(--a-on-var); }
.exd-info__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--a-xs);
  padding-block: var(--a-md);
  border-top: 1px solid rgba(208, 196, 190, .6);
  border-bottom: 1px solid rgba(208, 196, 190, .6);
}
.exd-info__price-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; color: var(--a-on-var); }
.exd-info__price-value { font-family: var(--a-serif); font-size: 28px; line-height: 38px; font-weight: 600; color: var(--a-on); }

.exd-facts { display: flex; flex-direction: column; margin: 0; }
.exd-facts__row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--a-sm);
  padding-block: var(--a-xs);
  border-bottom: 1px dashed rgba(208, 196, 190, .8);
  font-size: 14px;
  line-height: 22px;
}
.exd-facts__row dt { font-weight: 600; letter-spacing: .04em; color: var(--a-on-var); }
.exd-facts__row dd { margin: 0; color: var(--a-on); }
.exd-facts__row dd a:not(.exd-tag) { text-decoration: underline; text-underline-offset: 3px; transition: color .2s ease; }
.exd-facts__row dd a:not(.exd-tag):hover { color: var(--a-vermilion); }
.exd-facts__value { font-weight: 600; }
.exd-facts__pickup { font-weight: 600; color: var(--a-vermilion); }
.exd-facts__note { display: block; margin-top: 2px; font-size: 12px; line-height: 18px; color: var(--a-on-var); }
.exd-facts__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.exd-tag {
  padding: 2px 8px;
  background: var(--a-container);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: .06em;
  transition: background-color .2s ease, color .2s ease;
}
.exd-tag:hover { background: var(--a-primary); color: var(--a-on-primary); }

.exd-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a-xs); }
.exd-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--a-xs);
  min-height: 52px;
  padding: 12px 20px;
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: .12em;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.exd-btn .icon { width: 18px; height: 18px; }
.exd-btn--primary { background: var(--a-primary); color: var(--a-on-primary); }
.exd-btn--primary:hover { background: var(--a-on-var); }
.exd-btn--primary.is-in-cart { background: var(--a-secondary); color: var(--a-on-secondary); }
.exd-btn--ghost { border: 1px solid var(--a-on); background: transparent; color: var(--a-on); }
.exd-btn--ghost:hover { background: var(--a-container); }
.exd-btn--ghost.is-active { border-color: var(--a-vermilion); color: var(--a-vermilion); }
.exd-btn--ghost.is-active .icon { fill: currentColor; }

/* 購買數量（藏品件數 2 以上才顯示） */
.exd-qty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-sm);
  padding: 6px 6px 6px 16px;
  border: 1px solid rgba(208, 196, 190, .9);
  background: var(--a-surface);
}
.exd-qty__label { font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: .08em; color: var(--a-on); }
.exd-qty__select {
  min-width: 112px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--a-on);
  border-radius: 0;
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: var(--a-on);
  cursor: pointer;
}
.exd-qty__select:focus-visible { outline: 2px solid var(--a-secondary); outline-offset: 2px; }

.exd-info__back {
  display: inline-flex;
  align-items: center;
  gap: var(--a-xxs);
  align-self: flex-start;
  font-size: 13px;
  line-height: 20px;
  color: var(--a-on-var);
  transition: color .2s ease;
}
.exd-info__back:hover { color: var(--a-on); }
.exd-info__back .icon { width: 16px; height: 16px; }

/* --- 特色、規格、購物須知 --- */
.exd-sections { padding-bottom: var(--a-2xl); }
.exd-sections__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a-lg); align-items: start; }
.exd-block { padding: var(--a-lg); background: var(--a-lowest); box-shadow: var(--a-sh-sm); }
.exd-block__title {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  margin-bottom: var(--a-md);
  padding-bottom: var(--a-sm);
  border-bottom: 1px solid rgba(208, 196, 190, .6);
  font-family: var(--a-serif);
  font-size: 22px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--a-on);
}
.exd-block__title::before { content: ""; flex-shrink: 0; width: 20px; height: 1px; background: var(--a-vermilion); }
.exd-prose { display: flex; flex-direction: column; gap: var(--a-sm); font-size: 15px; line-height: 28px; letter-spacing: .01em; color: var(--a-on-var); }
.exd-specs { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 22px; }
.exd-specs th,
.exd-specs td { padding-block: 10px; border-bottom: 1px solid rgba(208, 196, 190, .5); text-align: left; vertical-align: top; }
.exd-specs th { width: 34%; padding-right: var(--a-sm); font-weight: 600; letter-spacing: .04em; color: var(--a-on-var); }
.exd-specs td { color: var(--a-on); overflow-wrap: anywhere; }
.exd-specs tr:last-child th,
.exd-specs tr:last-child td { border-bottom: 0; }
.exd-block--notice { background: var(--a-low); border: 1px solid rgba(208, 196, 190, .6); box-shadow: none; }
.exd-block--notice .exd-prose { font-size: 14px; line-height: 26px; }

@media (min-width: 480px) {
  .exd-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 640px) {
  .exd-gallery__thumbs li { flex-basis: 72px; }
  .exd-info__title { font-size: 32px; line-height: 44px; }
  .exd-block { padding: var(--a-xl); }
}

@media (min-width: 1024px) {
  .exd__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--a-2xl); }
  /* 相簿：縮圖在主圖左側、高度配合螢幕並固定在畫面上，不必上下捲動就能切換照片 */
  .exd-gallery {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas: "thumbs stage" "hint hint";
    gap: var(--a-xs) var(--a-sm);
  }
  .exd-gallery--single { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "hint"; }
  .exd-gallery__stage { grid-area: stage; }
  .exd-gallery__main { aspect-ratio: auto; height: min(720px, calc(100vh - var(--header-h) - 96px)); min-height: 380px; }
  .exd-gallery__rail {
    grid-area: thumbs;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: min(720px, calc(100vh - var(--header-h) - 96px));
    min-height: 380px;
  }
  .exd-gallery__scroll:not([hidden]) { display: flex; }
  .exd-gallery__thumbs {
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y proximity;
    scrollbar-width: none;   /* 以上下箭頭取代捲軸 */
  }
  .exd-gallery__thumbs::-webkit-scrollbar { display: none; }
  .exd-gallery__thumbs li { flex: 0 0 auto; }
  .exd-gallery__hint { grid-area: hint; }
  .exd-sections__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .exd-block--notice { grid-column: 1 / -1; }
  .exd-lightbox__nav--prev { left: 24px; }
  .exd-lightbox__nav--next { right: 24px; }
}

/* ==========================================================================
   16. 常見問題 FAQ（沒有設計稿，沿用 .theme-wabi 設計代幣；客戶多為年長藏家，字級放大）
   ========================================================================== */
.faq-main { padding-bottom: var(--a-3xl); background: var(--a-surface); color: var(--a-on); font-family: var(--a-body); }

.faq-head { padding-top: var(--a-lg); padding-bottom: var(--a-xl); }
.faq-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a-xs);
  margin-bottom: var(--a-lg);
  font-size: 14px;
  line-height: 22px;
  color: var(--a-on-var);
}
.faq-crumb a { transition: color .2s ease; }
.faq-crumb a:hover { color: var(--a-on); }
.faq-crumb__sep { color: var(--a-outline-var); }
.faq-crumb__current { color: var(--a-on); font-weight: 500; }
.faq-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  margin-bottom: var(--a-xs);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--a-secondary);
}
.faq-eyebrow__rule { width: 28px; height: 1px; background: var(--a-vermilion); }
.faq-title { font-family: var(--a-serif); font-size: 36px; line-height: 48px; font-weight: 500; letter-spacing: .03em; color: var(--a-on); }
.faq-lead { max-width: 720px; margin-top: var(--a-sm); font-size: 17px; line-height: 30px; color: var(--a-on-var); }

.faq-body { max-width: 960px; }
.faq-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-xs) var(--a-sm);
  margin-bottom: var(--a-sm);
  font-size: 15px;
  line-height: 24px;
  color: var(--a-on-var);
}
.faq-toggle-all {
  padding: 8px 18px;
  border: 1px solid var(--a-outline);
  border-radius: 999px;
  background: var(--a-lowest);
  color: var(--a-on);
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  transition: background-color .2s ease, border-color .2s ease;
}
.faq-toggle-all:hover { border-color: var(--a-on); background: var(--a-container); }

.faq-list { display: flex; flex-direction: column; gap: var(--a-sm); }
.faq-item {
  border: 1px solid rgba(208, 196, 190, .7);
  border-radius: 6px;
  background: var(--a-lowest);
  box-shadow: var(--a-sh-sm);
  scroll-margin-top: calc(var(--header-h) + 24px);
  transition: border-color .2s ease;
}
.faq-item[open] { border-color: var(--a-secondary); }
.faq-item__question {
  display: flex;
  align-items: flex-start;
  gap: var(--a-sm);
  padding: 20px var(--a-md);
  list-style: none;
  cursor: pointer;
  font-family: var(--a-serif);
  font-size: 19px;
  line-height: 30px;
  font-weight: 600;
  color: var(--a-on);
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question:hover .faq-item__text { color: var(--a-secondary); }
.faq-item__question:focus-visible { outline: 2px solid var(--a-secondary); outline-offset: 2px; border-radius: 6px; }
.faq-item__mark {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--a-primary);
  color: var(--a-on-primary);
  font-family: var(--a-serif);
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
}
.faq-item__mark--a { background: #a8322a; }
.faq-item__text { flex: 1 1 auto; min-width: 0; transition: color .2s ease; }
.faq-item__icon { position: relative; flex: 0 0 auto; width: 30px; height: 30px; }
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: var(--a-on-var);
  transform: translate(-50%, -50%);
  transition: transform .2s ease;
}
.faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-item__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-item__answer { display: flex; align-items: flex-start; gap: var(--a-sm); padding: 0 var(--a-md) 22px; }
.faq-item__content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  font-size: 17px;
  line-height: 30px;
  letter-spacing: .01em;
  color: var(--a-on);
}
.faq-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: var(--a-sm) var(--a-md) var(--a-sm) calc(var(--a-md) + 1.2em);
  border-radius: 6px;
  background: var(--a-low);
  list-style: decimal;
}
.faq-steps li::marker { font-weight: 700; color: var(--a-secondary); }
.faq-empty { font-size: 17px; line-height: 30px; color: var(--a-on-var); }

.faq-contact { max-width: 960px; margin-top: var(--a-2xl); }
.faq-contact__card {
  display: flex;
  flex-direction: column;
  gap: var(--a-md);
  padding: var(--a-lg);
  border: 1px solid rgba(208, 196, 190, .7);
  border-radius: 6px;
  background: var(--a-low);
}
.faq-contact__title { font-family: var(--a-serif); font-size: 24px; line-height: 34px; font-weight: 600; color: var(--a-on); }
.faq-contact__lead { margin-top: 4px; font-size: 16px; line-height: 28px; color: var(--a-on-var); }
.faq-contact__actions { display: flex; flex-wrap: wrap; gap: var(--a-xs); }
.faq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--a-xs);
  min-height: 48px;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.faq-btn .icon { width: 18px; height: 18px; }
.faq-btn--primary { background: var(--a-primary); color: var(--a-on-primary); }
.faq-btn--primary:hover { background: var(--a-on-var); }
.faq-btn--ghost { border: 1px solid var(--a-outline); background: var(--a-lowest); color: var(--a-on); }
.faq-btn--ghost:hover { border-color: var(--a-on); }

@media (min-width: 768px) {
  .faq-head { padding-top: var(--a-xl); }
  .faq-title { font-size: 44px; line-height: 58px; }
  .faq-item__question { padding: 22px var(--a-lg); font-size: 20px; }
  .faq-item__answer { padding: 0 var(--a-lg) 26px; }
  .faq-contact__card { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--a-xl); }
}

/* ==========================================================================
   17. 購物流程（沿用 16. 常見問題的標頭與聯絡區塊；步驟時間軸、說明卡）
   ========================================================================== */
/* 段落與清單（components/text-blocks.php；常見問題的回答也使用 .faq-steps） */
.text-blocks { display: flex; flex-direction: column; gap: 10px; font-size: 17px; line-height: 30px; letter-spacing: .01em; color: var(--a-on); }
.text-bullets { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 1.3em; list-style: disc; }
.text-bullets li::marker { color: var(--a-secondary); }
.faq-item__content .text-bullets { margin: 0; }

.guide-overview { max-width: 960px; margin-bottom: var(--a-xl); }
.guide-overview__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a-xs); margin: 0; padding: 0; list-style: none; }
.guide-overview__list a {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  min-height: 56px;
  padding: 8px 14px;
  border: 1px solid rgba(208, 196, 190, .7);
  border-radius: 6px;
  background: var(--a-lowest);
  color: var(--a-on);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  transition: border-color .2s ease, background-color .2s ease;
}
.guide-overview__list a:hover { border-color: var(--a-secondary); background: #fbf6ea; }
.guide-overview__num {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--a-primary);
  color: var(--a-on-primary);
  font-family: var(--a-serif);
  font-size: 15px;
  font-weight: 700;
}

.guide-steps { max-width: 960px; }
.guide-timeline { position: relative; display: flex; flex-direction: column; gap: var(--a-md); margin: 0; padding: 0; list-style: none; }
.guide-timeline::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 23px;
  width: 2px;
  background: rgba(208, 196, 190, .9);
}
.guide-step {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--a-sm);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.guide-step__num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #a8322a;
  color: #fff;
  font-family: var(--a-serif);
  font-size: 22px;
  font-weight: 700;
  box-shadow: 0 0 0 6px var(--a-surface);
}
.guide-step__card {
  min-width: 0;
  padding: var(--a-md);
  border: 1px solid rgba(208, 196, 190, .7);
  border-radius: 6px;
  background: var(--a-lowest);
  box-shadow: var(--a-sh-sm);
}
.guide-step__label { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .12em; color: var(--a-secondary); }
.guide-step__title { margin: 2px 0 var(--a-xs); font-family: var(--a-serif); font-size: 22px; line-height: 34px; font-weight: 600; color: var(--a-on); }
.guide-step__link { margin-top: var(--a-sm); }

.guide-section { max-width: 960px; margin-top: var(--a-xl); }
.guide-card { padding: var(--a-lg); border: 1px solid rgba(208, 196, 190, .7); border-radius: 6px; background: var(--a-low); }
.guide-card__title {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  margin-bottom: var(--a-sm);
  font-family: var(--a-serif);
  font-size: 24px;
  line-height: 34px;
  font-weight: 600;
  color: var(--a-on);
}
.guide-card__title::before { content: ""; flex: 0 0 auto; width: 20px; height: 1px; background: var(--a-vermilion); }
.guide-status { display: flex; flex-direction: column; margin: 0; border-top: 1px solid rgba(208, 196, 190, .7); }
.guide-status__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px var(--a-md);
  padding: 12px 0;
  border-bottom: 1px solid rgba(208, 196, 190, .5);
}
.guide-status__row dt { font-size: 17px; line-height: 28px; font-weight: 700; color: var(--a-on); }
.guide-status__row dd { margin: 0; font-size: 16px; line-height: 28px; color: var(--a-on-var); }
.guide-status__note { margin-top: var(--a-sm); font-size: 16px; line-height: 28px; color: var(--a-on); }

@media (min-width: 640px) {
  .guide-overview__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-status__row { grid-template-columns: 120px minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .guide-overview__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .guide-step__card { padding: var(--a-lg); }
  .guide-step__title { font-size: 24px; }
  .guide-card { padding: var(--a-xl); }
}

/* ==========================================================================
   18. 付款方式（沿用 16. 常見問題的標頭與聯絡區塊、17. 購物流程的說明卡）
   ========================================================================== */
.pay-methods { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a-md); max-width: 960px; }
.pay-method {
  display: flex;
  flex-direction: column;
  gap: var(--a-sm);
  min-width: 0;
  padding: var(--a-md);
  border: 1px solid rgba(208, 196, 190, .7);
  border-radius: 6px;
  background: var(--a-lowest);
  box-shadow: var(--a-sh-sm);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.pay-method__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a-xs); }
.pay-method__title { font-family: var(--a-serif); font-size: 26px; line-height: 36px; font-weight: 600; color: var(--a-on); }
.pay-method__status {
  padding: 2px 12px;
  border-radius: 999px;
  background: #e3efe1;
  color: #1d4a27;
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  white-space: nowrap;
}
.pay-method__status.is-off { background: var(--a-high); color: var(--a-on-var); }
.pay-method__summary { font-size: 17px; line-height: 30px; color: var(--a-on-var); }

@media (min-width: 768px) {
  .pay-method { padding: var(--a-lg); }
}
@media (min-width: 1024px) {
  .pay-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   19. 配送與運費說明（沿用 16～18 的標頭、說明卡與聯絡區塊；紙箱級距表）
   ========================================================================== */
.ship-first { max-width: 960px; }
.ship-first .guide-card { display: flex; flex-direction: column; gap: var(--a-sm); }
.ship-first .guide-card__title { margin-bottom: 0; }
.ship-first,
.ship-main .guide-section { scroll-margin-top: calc(var(--header-h) + 24px); }
.ship-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(208, 196, 190, .7);
  border-radius: 6px;
  background: var(--a-lowest);
}
.ship-table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 17px; line-height: 28px; }
.ship-table th {
  padding: 12px var(--a-md);
  background: var(--a-container);
  color: var(--a-on);
  text-align: left;
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  white-space: nowrap;
}
.ship-table td { padding: 14px var(--a-md); border-top: 1px solid rgba(208, 196, 190, .5); color: var(--a-on); }
.ship-table .is-num { text-align: right; white-space: nowrap; }
.ship-table td.is-num { font-family: var(--a-serif); font-size: 19px; font-weight: 700; }
.ship-table__box { font-weight: 600; white-space: nowrap; }
.ship-empty { font-size: 17px; line-height: 30px; color: var(--a-on-var); }

/* ==========================================================================
   20. 古物老件購買須知（沿用 16～19 的標頭、條目總覽與聯絡區塊）
   ========================================================================== */
/* 淺色框：列出常見情況、例子（TextBlocks「>」開頭的行） */
.text-callout {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--a-sm) var(--a-md);
  border: 1px dashed rgba(168, 50, 42, .35);
  border-radius: 6px;
  background: var(--a-low);
  color: var(--a-on);
}

.notice-subtitle {
  margin-top: var(--a-xs);
  font-family: var(--a-serif);
  font-size: 20px;
  line-height: 32px;
  letter-spacing: .04em;
  color: var(--a-secondary);
}
.notice-intro { max-width: 960px; margin-bottom: var(--a-xl); }
.notice-intro .text-blocks {
  padding: var(--a-md) var(--a-lg);
  border-left: 4px solid #a8322a;
  border-radius: 0 6px 6px 0;
  background: var(--a-lowest);
  box-shadow: var(--a-sh-sm);
}

.notice-list { display: flex; flex-direction: column; gap: var(--a-md); max-width: 960px; }
.notice-item {
  padding: var(--a-md);
  border: 1px solid rgba(208, 196, 190, .7);
  border-radius: 6px;
  background: var(--a-lowest);
  box-shadow: var(--a-sh-sm);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.notice-item__head {
  display: flex;
  align-items: flex-start;
  gap: var(--a-sm);
  margin-bottom: var(--a-sm);
  padding-bottom: var(--a-sm);
  border-bottom: 1px solid rgba(208, 196, 190, .6);
}
.notice-item__num { flex: 0 0 auto; font-family: var(--a-serif); font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: .02em; color: #a8322a; }
.notice-item__title { padding-top: 2px; font-family: var(--a-serif); font-size: 22px; line-height: 34px; font-weight: 600; color: var(--a-on); }

.notice-closing { max-width: 960px; margin-top: var(--a-2xl); }
.notice-closing__card { padding: var(--a-xl) var(--a-lg); border-radius: 6px; background: #1e1b19; color: var(--a-on-primary); }
.notice-closing__title {
  display: flex;
  align-items: center;
  gap: var(--a-xs);
  margin-bottom: var(--a-md);
  font-family: var(--a-serif);
  font-size: 26px;
  line-height: 36px;
  font-weight: 600;
  color: var(--a-on-primary);
}
.notice-closing__title::before { content: ""; flex: 0 0 auto; width: 24px; height: 1px; background: #d9a79f; }
.notice-closing__card .text-blocks { color: rgba(255, 255, 255, .88); }
.notice-closing__quote {
  margin-top: var(--a-lg);
  padding-top: var(--a-md);
  border-top: 1px solid rgba(255, 255, 255, .2);
  font-family: var(--a-serif);
  font-size: 24px;
  line-height: 38px;
  font-weight: 600;
  letter-spacing: .06em;
  color: #fff;
}
.notice-closing__sign { margin-top: var(--a-xs); font-size: 16px; line-height: 24px; letter-spacing: .12em; text-align: right; color: rgba(255, 255, 255, .75); }

@media (min-width: 768px) {
  .notice-item { padding: var(--a-lg); }
  .notice-item__num { font-size: 38px; line-height: 42px; }
  .notice-item__title { font-size: 24px; line-height: 38px; }
  .notice-closing__card { padding: var(--a-2xl) var(--a-xl); }
  .notice-closing__quote { font-size: 28px; line-height: 42px; }
}

/* ==========================================================================
   21. 退換貨說明（沿用 16～17 的標頭、說明卡與聯絡區塊）
   ========================================================================== */
.ret-first { max-width: 960px; }
.ret-deadline {
  display: flex;
  flex-direction: column;
  gap: var(--a-sm);
  padding: var(--a-md) var(--a-lg);
  border-left: 4px solid #a8322a;
  border-radius: 0 6px 6px 0;
  background: var(--a-lowest);
  box-shadow: var(--a-sh-sm);
}
.ret-deadline__badge {
  align-self: flex-start;
  flex: 0 0 auto;
  min-width: 112px;
  padding: 10px 18px;
  border: 2px solid #a8322a;
  border-radius: 6px;
  font-family: var(--a-serif);
  font-size: 34px;
  line-height: 42px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  color: #a8322a;
}
.ret-deadline__body { min-width: 0; }
.ret-deadline__title { margin-bottom: 4px; font-family: var(--a-serif); font-size: 24px; line-height: 34px; font-weight: 600; color: var(--a-on); }
.ret-deadline .text-blocks { font-size: 19px; line-height: 32px; }

.ret-steps { display: flex; flex-direction: column; gap: var(--a-xs); margin: 0; padding: 0; list-style: none; }
.ret-step {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: var(--a-sm);
  padding: 14px var(--a-md);
  border: 1px solid rgba(208, 196, 190, .7);
  border-radius: 6px;
  background: var(--a-lowest);
}
.ret-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1e1b19;
  font-family: var(--a-serif);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.ret-step__label { font-size: 18px; line-height: 28px; font-weight: 700; color: var(--a-on); }
.ret-step__text { margin-top: 2px; font-size: 17px; line-height: 30px; color: var(--a-on); overflow-wrap: anywhere; }

@media (min-width: 640px) {
  .ret-deadline { flex-direction: row; align-items: center; gap: var(--a-md); }
  .ret-deadline__badge { align-self: center; }
}
@media (min-width: 768px) {
  .ret-deadline { padding: var(--a-lg) var(--a-xl); }
  .ret-step { grid-template-columns: 44px minmax(0, 1fr); padding: var(--a-sm) var(--a-md); }
  .ret-step__num { width: 44px; height: 44px; }
}

/* ==========================================================================
   22. 首頁懸浮按鈕（加入 LINE 官方、聯繫我們、加入粉絲頁；partials/floating-contact.php）
   圓形圖示按鈕；文字在滑鼠移過去（或鍵盤聚焦）時從左側滑出，觸控裝置點了直接前往
   文字仍保留在按鈕內，螢幕閱讀器可讀；z-index 低於頁首（含手機選單）與右下角回到頂端按鈕
   ========================================================================== */
/* 放在右下角回到頂端按鈕（56px，距右 24px、距下 24px）的位置正上方並置中對齊，避開首頁輪播左右箭頭 */
.float-contact {
  position: fixed;
  right: 29px;
  bottom: 94px;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.float-contact__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(28, 28, 24, .22);
  transition: transform .15s ease, box-shadow .15s ease;
}
.float-contact__btn:hover { transform: scale(1.08); box-shadow: 0 8px 18px rgba(28, 28, 24, .28); }
.float-contact__btn:active { transform: scale(.95); }
.float-contact__btn:focus-visible { outline: 3px solid #1c1c18; outline-offset: 3px; }
.float-contact__btn--line { background: #06c755; }
.float-contact__btn--messenger { background: linear-gradient(160deg, #00b2ff 0%, #006aff 100%); }
.float-contact__btn--contact { background: #1e1b19; }
.float-contact__btn--facebook { background: #1877f2; }
.float-contact__icon { flex: 0 0 auto; width: 26px; height: 26px; }

/* 文字提示：平常隱藏，滑鼠移過去或鍵盤聚焦時顯示在按鈕左側（回到頂端按鈕共用） */
.float-contact__label,
.back-to-top__label {
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  padding: 6px 14px;
  border-radius: 999px;
  background: #1e1b19;
  box-shadow: 0 4px 12px rgba(28, 28, 24, .2);
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(8px, -50%);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.float-contact__label::after,
.back-to-top__label::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -5px;
  width: 10px;
  height: 10px;
  background: inherit;
  transform: translateY(-50%) rotate(45deg);
}
.float-contact__btn:focus-visible .float-contact__label,
.back-to-top.is-visible:focus-visible .back-to-top__label { opacity: 1; visibility: visible; transform: translate(0, -50%); }
@media (hover: hover) {
  .float-contact__btn:hover .float-contact__label,
  .back-to-top.is-visible:hover .back-to-top__label { opacity: 1; visibility: visible; transform: translate(0, -50%); }
}

@media (min-width: 768px) {
  .float-contact { right: 26px; gap: 12px; }
  .float-contact__btn { width: 52px; height: 52px; }
  .float-contact__icon { width: 28px; height: 28px; }
}
@media print {
  .float-contact { display: none; }
}

/* ==========================================================================
   23. 知識專區：可用的分類頁籤、搜尋、分頁連結，以及文章內頁（/knowledge-hub/article/{id}）
   文章內頁沒有設計稿：沿用知識專區與說明頁的 Wabi-Sabi 版面，內文字級放大、行距加寬（年長讀者）
   ========================================================================== */
a.kb-tab { display: inline-flex; align-items: center; text-decoration: none; }
.kb-search { gap: var(--a-xs); }
.kb-search__submit {
  flex: 0 0 auto;
  padding: 6px 16px;
  background: var(--a-primary);
  color: var(--a-on-primary);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: .08em;
  transition: opacity .2s ease;
}
.kb-search__submit:hover { opacity: .85; }
a.kb-pager__btn,
a.kb-pager__num { text-decoration: none; }
.kb-pager__btn.is-disabled { opacity: .35; }
a.kb-card__media { display: block; }
.kb-card__title a { color: inherit; text-decoration: none; }
.kb-empty {
  padding: var(--a-2xl) var(--a-md);
  background: var(--a-lowest);
  box-shadow: var(--a-sh-sm);
  font-size: 17px;
  line-height: 30px;
  text-align: center;
  color: var(--a-on-var);
}
.kb-empty a { margin-left: 6px; color: var(--a-primary); font-weight: 600; text-decoration: underline; }

/* --- 文章內頁 --- */
.kba { max-width: 820px; padding-top: var(--a-lg); }
.kba-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--a-lg);
  font-size: 14px;
  line-height: 22px;
  color: var(--a-on-var);
}
.kba-crumb a { color: inherit; text-decoration: none; }
.kba-crumb a:hover { color: var(--a-primary); text-decoration: underline; }
.kba-head { margin-bottom: var(--a-lg); }
.kba-category {
  display: inline-block;
  margin-bottom: var(--a-sm);
  padding: 2px 12px;
  background: var(--a-container);
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--a-primary);
  text-decoration: none;
}
.kba-category:hover { background: var(--a-high); }
.kba-title { font-family: var(--a-serif); font-size: 30px; line-height: 42px; font-weight: 600; letter-spacing: .02em; color: var(--a-on); }
.kba-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--a-xs);
  font-size: 15px;
  line-height: 24px;
  letter-spacing: .06em;
  color: var(--a-on-var);
}
.kba-lead {
  margin-top: var(--a-md);
  padding-left: var(--a-md);
  border-left: 3px solid var(--a-secondary);
  font-size: 18px;
  line-height: 32px;
  color: var(--a-on);
}
.kba-cover { margin: 0 0 var(--a-xl); background: var(--a-high); }
.kba-cover img { display: block; width: 100%; height: auto; }

/* 文章內文（後台編輯器的 HTML，HtmlSanitizer 過濾後輸出）
   kba-body--site：沒有自訂樣式的文章，套用網站統一的字級與標題樣式
   kba-body--custom：內文寫了自訂 style（2026-09-15 使用者選擇保留），不套網站的文章樣式、文章區放寬，盡量維持原本排版 */
.kba-body { color: var(--a-on); overflow-wrap: anywhere; }
.kba-body img { max-width: 100%; height: auto; }
.kba-body iframe { display: block; max-width: 100%; border: 0; }
.kba-body details > summary { cursor: pointer; }
.kba--custom { max-width: 1100px; }
.kba-body--custom { font-size: 16px; line-height: 1.8; }

.kba-body--site { font-size: 18px; line-height: 34px; letter-spacing: .02em; }
.kba-body--site > * + * { margin-top: var(--a-md); }
.kba-body--site h2 {
  margin-top: var(--a-xl);
  padding-bottom: var(--a-xs);
  border-bottom: 1px solid var(--a-outline-var);
  font-family: var(--a-serif);
  font-size: 24px;
  line-height: 36px;
  font-weight: 600;
  color: var(--a-on);
}
.kba-body--site h3 { margin-top: var(--a-lg); font-family: var(--a-serif); font-size: 20px; line-height: 32px; font-weight: 600; color: var(--a-primary); }
.kba-body--site h4 { margin-top: var(--a-lg); font-size: 18px; line-height: 30px; font-weight: 700; color: var(--a-on); }
.kba-body--site > h2:first-child,
.kba-body--site > h3:first-child,
.kba-body--site > h4:first-child { margin-top: 0; }
.kba-body--site strong,
.kba-body--site b { font-weight: 700; }
.kba-body--site a { color: var(--a-primary); text-decoration: underline; text-underline-offset: 3px; }
.kba-body--site ul,
.kba-body--site ol { margin: 0; padding-left: 1.4em; }
.kba-body--site ul { list-style: disc; }
.kba-body--site ol { list-style: decimal; }
.kba-body--site li + li { margin-top: 6px; }
.kba-body--site li::marker { color: var(--a-secondary); }
.kba-body--site blockquote { margin: 0; padding: var(--a-sm) var(--a-md); border-left: 4px solid #a8322a; background: var(--a-low); }
.kba-body--site blockquote > * + * { margin-top: var(--a-xs); }
.kba-body--site figure { margin: var(--a-lg) 0 0; }
.kba-body--site img { display: block; }
.kba-body--site figure img { width: 100%; }
.kba-body--site figcaption { margin-top: var(--a-xs); font-size: 14px; line-height: 22px; text-align: center; color: var(--a-on-var); }
.kba-body--site hr { margin-block: var(--a-xl); border: 0; border-top: 1px solid var(--a-outline-var); }
.kba-body--site table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 16px; line-height: 26px; }
.kba-body--site th,
.kba-body--site td { padding: 10px 12px; border: 1px solid var(--a-outline-var); vertical-align: top; }
.kba-body--site th { background: var(--a-container); font-weight: 600; }
.kba-body--site iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }

.kba-foot { display: flex; flex-wrap: wrap; gap: var(--a-sm); margin-top: var(--a-2xl); padding-top: var(--a-lg); border-top: 1px solid var(--a-outline-var); }
.kba-related { padding-block: var(--a-2xl) var(--a-3xl); }
.kba-related__title { margin-bottom: var(--a-lg); font-family: var(--a-serif); font-size: 26px; line-height: 36px; font-weight: 600; color: var(--a-on); }

@media (min-width: 768px) {
  .kba-title { font-size: 38px; line-height: 52px; }
  .kba-body--site { font-size: 19px; line-height: 36px; }
}

/* ==================================================================
 * 新會員轉盤與我的優惠券（2026-09-18）
 * 轉盤樣式依使用者提供的照片：芥末金外框、一圈燈泡、白金相間扇形、紅色指針、底座
 * ================================================================== */
.spin__stage { display: flex; justify-content: center; margin: var(--a-md) auto 0; max-width: 420px; }
.spin__svg { display: block; width: 100%; height: auto; overflow: visible; }
.spin__amount { font-family: var(--a-serif); font-size: 25px; font-weight: 700; letter-spacing: .02em; }
.spin__unit { font-size: 15px; font-weight: 600; }
.spin__needle {
  transform-box: view-box;
  transform-origin: 200px 200px;
  filter: drop-shadow(0 2px 2px rgba(60, 20, 0, .35));
}
.spin__bulb { fill: #fff7d6; stroke: #a8741c; stroke-width: 1.2; }
.spin__stage.is-spinning .spin__bulb--a { animation: spin-bulb .5s steps(1) infinite; }
.spin__stage.is-spinning .spin__bulb--b { animation: spin-bulb .5s steps(1) infinite .25s; }
.spin__stage.is-done .spin__bulb { fill: #fff2b3; }
@keyframes spin-bulb {
  0%   { fill: #fffbe6; filter: drop-shadow(0 0 4px #ffe27a); }
  50%  { fill: #c9922a; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .spin__stage.is-spinning .spin__bulb { animation: none; }
}

.spin__form { display: flex; flex-direction: column; align-items: center; gap: var(--a-xs); margin-top: var(--a-md); }
.spin__button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--a-xs);
  min-width: 220px; padding: 16px var(--a-xl);
  border: 0; border-radius: 999px;
  background: #b3261e; color: #fff;
  box-shadow: 0 4px 0 #7f1515, 0 8px 18px rgba(127, 21, 21, .25);
  font-family: var(--a-serif); font-size: 21px; line-height: 28px; font-weight: 600; letter-spacing: .2em;
  cursor: pointer; transition: transform .12s ease, background-color .2s ease;
}
.spin__button:hover { background: #c62828; }
.spin__button:active { transform: translateY(2px); box-shadow: 0 2px 0 #7f1515; }
.spin__button:disabled { background: #9e8f86; box-shadow: none; cursor: default; }
.spin__button:focus-visible { outline: 3px solid #e6b54a; outline-offset: 3px; }
.spin__hint { font-size: 15px; line-height: 24px; color: var(--a-on-var); text-align: center; }
.spin__hint.is-error { color: var(--a-error); font-weight: 600; }

.spin__status { margin-bottom: var(--a-sm); }
.spin__record { font-size: 15px; line-height: 26px; margin-bottom: var(--a-md); }
.spin__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-md); }
.spin__links .mb-submit { width: auto; }
.spin__link { font-weight: 600; color: var(--a-secondary); text-decoration: underline; text-underline-offset: 4px; }
.spin__stage.is-done .spin__svg { opacity: .92; }

.spin__subtitle { font-family: var(--a-serif); font-size: 18px; line-height: 28px; font-weight: 600; margin-bottom: var(--a-xs); }
.spin__prizes, .spin__terms { margin-top: var(--a-lg); padding-top: var(--a-md); border-top: 1px solid rgba(208, 196, 190, .6); }
.spin__prize-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: var(--a-xs); }
.spin__prize-list li {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--a-sm); border: 1px solid #e8d3a0; border-radius: 8px; background: #fffaf0;
}
.spin__prize-list strong { font-family: var(--a-serif); font-size: 18px; color: #8a1c14; }
.spin__prize-list span { font-size: 14px; color: var(--a-on-var); }
.spin__terms ol { padding-left: 1.4em; list-style: decimal; }
.spin__terms li { font-size: 15px; line-height: 26px; color: var(--a-on-var); }

.spin-result {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(28, 20, 10, .55);
}
.spin-result[hidden] { display: none; }
.spin-result__card {
  width: 100%; max-width: 420px; padding: var(--a-xl) var(--a-lg);
  border-radius: 16px; background: #fffdf6; text-align: center;
  border: 3px solid #e6b54a; box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
  animation: spin-pop .35s ease-out;
}
.spin-result__card:focus { outline: none; }
@keyframes spin-pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .spin-result__card { animation: none; } }
.spin-result__icon { width: 48px; height: 48px; color: #b3261e; }
.spin-result__eyebrow { margin-top: var(--a-xs); font-size: 16px; font-weight: 600; letter-spacing: .2em; color: #a8741c; }
.spin-result__title { margin-top: 4px; font-family: var(--a-serif); font-size: 26px; line-height: 36px; font-weight: 700; color: #8a1c14; }
.spin-result__text { margin-top: var(--a-sm); font-size: 15px; line-height: 26px; color: var(--a-on); }
.spin-result__actions { display: flex; flex-direction: column; align-items: center; gap: var(--a-sm); margin-top: var(--a-lg); }
.spin-result__actions .mb-submit { width: auto; }
.spin-result__link { font-size: 15px; font-weight: 600; color: var(--a-secondary); text-decoration: underline; text-underline-offset: 4px; }

/* 會員中心的轉盤邀請 */
.mb-spin-invite {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-sm);
  margin-bottom: var(--a-md); padding: var(--a-sm) var(--a-md);
  border: 1px solid #e6b54a; border-radius: 10px; background: #fff6dc; color: #4a3208;
  text-decoration: none; transition: background-color .2s ease;
}
.mb-spin-invite:hover { background: #ffefc2; }
.mb-spin-invite__icon { flex: 0 0 auto; width: 28px; height: 28px; color: #b3261e; }
.mb-spin-invite__text { flex: 1 1 220px; font-size: 15px; line-height: 24px; }
.mb-spin-invite__text strong { display: block; font-size: 16px; color: #8a1c14; }
.mb-spin-invite__cta { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: #8a1c14; }

/* 我的優惠券 */
.mb-coupons { display: grid; gap: var(--a-sm); }
.mb-coupon {
  display: flex; align-items: stretch; gap: var(--a-md);
  padding: var(--a-sm); border: 1px dashed #d8b560; border-radius: 10px; background: #fffaf0;
}
.mb-coupon__amount {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 96px; padding: var(--a-xs); border-radius: 8px; background: #b3261e; color: #fff;
}
.mb-coupon__currency { font-size: 12px; letter-spacing: .1em; }
.mb-coupon__amount strong { font-family: var(--a-serif); font-size: 26px; line-height: 32px; }
.mb-coupon__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.mb-coupon__title { font-size: 16px; line-height: 24px; font-weight: 600; }
.mb-coupon__badge {
  display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px;
  background: #2d6a3a; color: #fff; font-size: 12px; line-height: 20px; font-weight: 600; vertical-align: 2px;
}
.mb-coupon__meta { font-size: 14px; line-height: 22px; color: var(--a-on-var); }
.mb-coupon__meta a { color: var(--a-secondary); text-decoration: underline; }
.mb-coupon__use {
  flex: 0 0 auto; align-self: center; padding: 8px 14px; border-radius: 999px;
  border: 1px solid #b3261e; color: #b3261e; font-size: 14px; font-weight: 700; white-space: nowrap;
}
.mb-coupon__use:hover { background: #b3261e; color: #fff; }
.mb-coupon.is-used, .mb-coupon.is-expired { background: var(--a-low); border-color: var(--a-variant); }
.mb-coupon.is-used .mb-coupon__amount, .mb-coupon.is-expired .mb-coupon__amount { background: #9e948c; }
.mb-coupon.is-used .mb-coupon__badge { background: #6b6259; }
.mb-coupon.is-expired .mb-coupon__badge { background: #9e948c; }
.mb-coupons__note { margin-top: var(--a-md); font-size: 14px; line-height: 22px; color: var(--a-on-var); }
@media (max-width: 480px) {
  .mb-coupon { flex-wrap: wrap; gap: var(--a-sm); }
  .mb-coupon__amount { min-width: 80px; }
  .mb-coupon__body { flex: 1 1 150px; }
  .mb-coupon__use { margin-left: auto; }
}

/* 結帳：折價券 */
.co-coupon-help { margin: -4px 0 var(--a-sm); }
.co-option.is-disabled { opacity: .6; cursor: not-allowed; }
.co-option.is-disabled input { cursor: not-allowed; }
.co-discount .cart-summary__value { color: #b3261e; font-weight: 600; }

/* ==================================================================
 * 首頁彈出宣傳視窗：新會員轉盤（2026-09-18）
 * ================================================================== */
.spin-promo {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(28, 20, 10, .6);
  animation: spin-promo-fade .3s ease-out;
}
.spin-promo[hidden] { display: none; }
.has-spin-promo body { overflow: hidden; }
@keyframes spin-promo-fade { from { opacity: 0; } to { opacity: 1; } }

.spin-promo__card {
  position: relative;
  display: grid; grid-template-columns: 1fr; justify-items: center; gap: 12px;
  width: 100%; max-width: 620px; max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 32px 20px 20px;
  border: 3px solid #e6b54a; border-radius: 20px;
  background: radial-gradient(circle at 20% 15%, #fffaf0 0%, #fff4dc 55%, #fbe7bd 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  animation: spin-pop .35s ease-out;
}
.spin-promo__card:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .spin-promo, .spin-promo__card { animation: none; }
}

.spin-promo__close {
  position: absolute; top: 10px; right: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .8); color: #4a3208; cursor: pointer;
}
.spin-promo__close:hover { background: #fff; }
.spin-promo__close:focus-visible, .spin-promo__later:focus-visible, .spin-promo__cta:focus-visible { outline: 3px solid #b3261e; outline-offset: 2px; }

.spin-promo__wheel.spin__stage { width: 150px; max-width: none; margin: 0; }

.spin-promo__body { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.spin-promo__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px; background: #b3261e; color: #fff;
  font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: .1em;
}
.spin-promo__title {
  margin-top: 10px;
  font-family: "Noto Serif TC", "Noto Serif", serif; font-size: 22px; line-height: 1.4; font-weight: 700; color: #8a1c14;
  text-wrap: balance;
}
.spin-promo__text { margin-top: 6px; font-size: 16px; line-height: 1.7; color: #3a2a14; }
.spin-promo__prizes { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 10px; }
.spin-promo__prizes li {
  padding: 1px 8px; border: 1px solid #d8b560; border-radius: 999px; background: #fff;
  font-size: 13px; line-height: 22px; white-space: nowrap; font-weight: 700; color: #8a1c14;
}
.spin-promo__actions { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 14px; width: 100%; }
.spin-promo__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: 280px; padding: 12px 22px; border-radius: 999px;
  background: #b3261e; color: #fff; text-decoration: none;
  box-shadow: 0 4px 0 #7f1515, 0 8px 18px rgba(127, 21, 21, .25);
  font-family: "Noto Serif TC", "Noto Serif", serif; font-size: 18px; line-height: 26px; font-weight: 700; letter-spacing: .08em;
  transition: background-color .2s ease, transform .12s ease;
}
.spin-promo__cta:hover { background: #c62828; }
.spin-promo__cta:active { transform: translateY(2px); box-shadow: 0 2px 0 #7f1515; }
.spin-promo__login { font-size: 15px; line-height: 24px; color: #4a3208; }
.spin-promo__login a { font-weight: 700; color: #8a1c14; text-decoration: underline; text-underline-offset: 3px; }
.spin-promo__later {
  padding: 6px 0; border: 0; background: none; cursor: pointer;
  font-size: 15px; line-height: 22px; color: #6b5a44; text-decoration: underline; text-underline-offset: 3px;
}

@media (min-width: 720px) {
  .spin-promo__card { grid-template-columns: 190px 1fr; align-items: center; gap: 22px; padding: 32px 30px 26px 24px; }
  .spin-promo__wheel.spin__stage { width: 190px; }
  .spin-promo__body { align-items: flex-start; text-align: left; }
  .spin-promo__title { font-size: 25px; }
  .spin-promo__text { font-size: 16px; }
  .spin-promo__prizes { justify-content: flex-start; }
  .spin-promo__actions { align-items: flex-start; }
}
@media (max-height: 600px) and (max-width: 719px) {
  .spin-promo__wheel.spin__stage { width: 120px; }
}

/* ==================================================================
 * 節慶優惠碼（2026-09-18）：首頁宣傳視窗、結帳頁輸入框、我的優惠券兌換框
 * ================================================================== */
.code-promo__ticket {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 140px; padding: 16px 10px;
  border-radius: 12px; background: #b3261e; color: #fff; text-align: center;
  box-shadow: 0 6px 16px rgba(127, 21, 21, .3);
}
/* 票券兩側的半圓缺口 */
.code-promo__ticket::before, .code-promo__ticket::after {
  content: ""; position: absolute; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: #fff4dc;
}
.code-promo__ticket::before { left: -11px; }
.code-promo__ticket::after  { right: -11px; }
.code-promo__ticket-label { font-size: 14px; letter-spacing: .3em; opacity: .9; }
.code-promo__ticket-amount { font-family: "Noto Serif TC", "Noto Serif", serif; font-size: 34px; line-height: 1.1; font-weight: 700; }
.code-promo__ticket-amount small { margin-right: 3px; font-size: 13px; font-weight: 600; }
.code-promo__ticket-note { margin-top: 4px; padding-top: 6px; border-top: 1px dashed rgba(255, 255, 255, .5); font-size: 13px; }

.code-promo__code {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-top: 10px; padding: 6px 6px 6px 12px;
  border: 2px dashed #b3261e; border-radius: 10px; background: #fff;
}
.code-promo__code-label { font-size: 14px; color: #6b5a44; }
.code-promo__code-value { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 19px; letter-spacing: .08em; color: #8a1c14; user-select: all; }
.code-promo__copy {
  padding: 6px 14px; border: 1px solid #b3261e; border-radius: 999px; background: #fff; color: #b3261e;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.code-promo__copy:hover { background: #b3261e; color: #fff; }
.code-promo__meta { margin-top: 6px; font-size: 13px; line-height: 22px; color: #6b5a44; }
.code-promo__hint { font-size: 13px; line-height: 22px; color: #6b5a44; }
.code-promo__form { display: contents; }
.code-promo__form .spin-promo__cta { border: 0; cursor: pointer; }
@media (min-width: 720px) {
  .code-promo__card { grid-template-columns: 150px 1fr; max-width: 540px; gap: 20px; padding: 28px 26px 22px 22px; }
  .code-promo__card .spin-promo__title { font-size: 22px; }
  .code-promo__card .spin-promo__text { font-size: 15px; }
  .code-promo__card .spin-promo__cta { max-width: 250px; padding: 10px 20px; font-size: 17px; }
  .code-promo__code { justify-content: flex-start; }
}

/* 結帳頁：優惠碼 */
.co-promo { margin-bottom: var(--a-md); }
.co-promo__row { display: flex; gap: 8px; margin-top: 6px; }
.co-promo__input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; letter-spacing: .06em; }
.co-promo__input::placeholder { text-transform: none; letter-spacing: 0; }
.co-promo__apply {
  flex: 0 0 auto; padding: 0 20px; border: 1px solid var(--cart-dark, #1c1917); border-radius: 6px;
  background: var(--cart-dark, #1c1917); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
}
.co-promo__apply:hover { opacity: .88; }
.co-promo.has-error .co-promo__input { border-color: #ba1a1a; }
.co-promo__ok { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; font-size: 14px; line-height: 22px; color: #1d4a27; }
.co-promo__ok .icon { flex: 0 0 auto; margin-top: 2px; }

/* 我的優惠券：兌換優惠碼 */
.mb-redeem { margin-bottom: var(--a-md); padding: var(--a-sm) var(--a-md); border: 1px solid rgba(208, 196, 190, .8); border-radius: 10px; background: var(--a-low); }
.mb-redeem__label { display: block; font-size: 15px; line-height: 24px; font-weight: 600; }
.mb-redeem__row { display: flex; gap: 8px; margin-top: 8px; }
.mb-redeem__input {
  flex: 1 1 auto; min-width: 0; padding: 10px 12px; border: 1px solid var(--a-outline); border-radius: 6px; background: #fff;
  font-size: 16px; text-transform: uppercase; letter-spacing: .06em;
}
.mb-redeem__input::placeholder { text-transform: none; letter-spacing: 0; }
.mb-redeem__button {
  flex: 0 0 auto; padding: 0 22px; border: 0; border-radius: 6px; background: #b3261e; color: #fff;
  font-size: 16px; font-weight: 700; cursor: pointer;
}
.mb-redeem__button:hover { background: #c62828; }
.code-promo__members { font-weight: 700; color: #8a1c14; }
.code-promo__meta > span, .code-promo__meta > strong { white-space: nowrap; }

/* 取消訂閱電子報 */
.unsub { padding: 48px 0 72px; }
.unsub__card { max-width: 560px; margin: 0 auto; text-align: center; }
.unsub__text { margin-top: 16px; font-size: 16px; line-height: 1.8; color: var(--a-on); }
.unsub__muted { font-size: 14px; color: var(--a-on-var); }
.unsub__button { width: auto; display: inline-flex; margin-top: 24px; padding-left: 40px; padding-right: 40px; }
.unsub__keep { display: inline-block; margin-top: 16px; font-size: 15px; color: var(--a-secondary); text-decoration: underline; text-underline-offset: 4px; }
.ct-seal__logo { width: 56px; height: 56px; flex: 0 0 auto; object-fit: contain; border-radius: 4px; }

/* 藏品頁：相關關鍵字——一行小字、顏色較淡，但仍清楚可讀 */
.exd-keywords { margin-top: var(--a-lg); padding-top: var(--a-sm); border-top: 1px solid rgba(208, 196, 190, .5); font-size: 13px; line-height: 1.9; color: var(--a-outline); }
.exd-keywords__title { font-weight: 600; }
.exd-keywords a { color: var(--a-outline); text-decoration: none; }
.exd-keywords a:hover { color: var(--a-secondary); text-decoration: underline; text-underline-offset: 3px; }
.exd-keywords a:focus-visible { outline: 2px solid var(--a-secondary); outline-offset: 2px; }

/* 本季特展精選：大卡的 3D 模型（2026-09-19） */
.ex-feature__model { display: block; width: 100%; height: 100%; border: 0; background: #e9e6dc; }
.ex-feature--3d .ex-feature__media { border-radius: 4px; }
.ex-feature__more {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  margin-top: var(--a-sm); padding-bottom: 2px; border-bottom: 1px solid currentColor;
  font-size: 15px; font-weight: 600; letter-spacing: .06em; color: var(--a-on); text-decoration: none;
}
.ex-feature__more:hover { color: var(--a-secondary); }
.ex-feature__more:focus-visible { outline: 2px solid var(--a-secondary); outline-offset: 3px; }

/* 本季特展精選：小卡的說明（照片下方） */
.ex-feature__desc--small { margin: var(--a-md) 0 0; font-size: 14px; line-height: 1.85; color: var(--a-on-var); }

/* 語言切換：繁｜简（2026-09-19） */
.lang-switch { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; font-size: 14px; line-height: 1; }
.lang-switch__item {
  display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 6px;
  border-radius: 999px; color: var(--color-muted, #78716c); text-decoration: none; font-weight: 600;
}
.lang-switch__item:hover { color: var(--color-ink, #1c1917); background: rgba(28, 25, 23, .06); }
.lang-switch__item.is-current { color: #fff; background: var(--color-ink, #1c1917); }
.lang-switch__sep { color: #d6d3d1; }
/* 加了語言切換後，1280～1535 寬的頁首放不下（會員圖示被擠出畫面）：搜尋框縮窄、間距縮小（2026-09-19） */
@media (min-width: 1280px) and (max-width: 1535px) {
  .header-search { width: 180px; }
  .site-header__right { gap: 14px; }
  .main-nav { gap: 20px; }
}
/* 手機（640 以下）：語言切換只顯示「另一個語言」一顆小按鈕，品牌名稱才不會被擠成刪節號 */
@media (max-width: 639px) {
  .site-header__right { gap: 8px; }
  .lang-switch__item.is-current,
  .lang-switch__sep { display: none; }
  .lang-switch__item { min-width: 28px; height: 28px; padding: 0 4px; border: 1px solid #d6d3d1; font-size: 13px; }
}
@media (max-width: 379px) {
  .site-header__right { gap: 2px; }
  .lang-switch__item { min-width: 26px; height: 26px; padding: 0 3px; }
}

/* ==========================================================================
   手機、平板選單（漢堡選單；2026-09-19）：1280 以下主選單隱藏時使用
   ========================================================================== */
.nav-toggle {
  flex: 0 0 auto;
  width: 36px; height: 36px; margin-left: -6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 8px; color: var(--c-stone-800); cursor: pointer;
}
.nav-toggle:hover { background: rgba(28, 25, 23, .06); }
.nav-toggle:focus-visible { outline: 2px solid var(--c-stone-800); outline-offset: 2px; }
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; content: "";
}
.nav-toggle__bar { position: relative; }
.nav-toggle__bar::before { position: absolute; top: -6px; left: 0; }
.nav-toggle__bar::after  { position: absolute; top: 6px; left: 0; }
@media (min-width: 1280px) { .nav-toggle { display: none; } }
/* 手機：語言切換放在選單裡，頁首不另外顯示（品牌名稱才放得下） */
@media (max-width: 639px) {
  .site-header__right > .lang-switch { display: none; }
  .site-header__left { gap: 6px; }
}

.mobile-nav { position: fixed; inset: 0; z-index: 200; }
.mobile-nav[hidden] { display: none; }
.mobile-nav__backdrop { position: absolute; inset: 0; background: rgba(28, 25, 23, .45); opacity: 0; transition: opacity .25s ease; }
.mobile-nav__panel {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: min(340px, 86vw); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 18px; padding: 16px 20px 28px;
  background: #fdfcfa; box-shadow: 8px 0 30px rgba(28, 25, 23, .18);
  transform: translateX(-100%); transition: transform .28s ease;
}
.mobile-nav.is-open .mobile-nav__backdrop { opacity: 1; }
.mobile-nav.is-open .mobile-nav__panel { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mobile-nav__backdrop, .mobile-nav__panel { transition: none; }
}
.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; }
.mobile-nav__title { font-family: var(--font-serif); font-size: 18px; font-weight: 700; letter-spacing: .1em; color: var(--c-stone-900); }
.mobile-nav__close {
  width: 40px; height: 40px; margin-right: -8px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 8px; color: var(--c-stone-700); cursor: pointer;
}
.mobile-nav__close:hover { background: rgba(28, 25, 23, .06); }
.mobile-nav__search {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: var(--c-search-bg); border: 1px solid var(--c-search-bd); border-radius: var(--r-full); color: var(--c-stone-500);
}
.mobile-nav__search:focus-within { border-color: var(--c-stone-800); }
.mobile-nav__search input { flex: 1 1 auto; min-width: 0; background: none; border: 0; outline: none; font-size: 16px; color: var(--c-stone-800); }
.mobile-nav__links { display: flex; flex-direction: column; border-top: 1px solid var(--c-line-2, #e7e5e4); }
.mobile-nav__link {
  display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 4px;
  border-bottom: 1px solid var(--c-line-2, #e7e5e4);
  font-family: var(--font-serif); font-size: 17px; letter-spacing: .08em; color: var(--c-stone-800); text-decoration: none;
}
.mobile-nav__link .icon { color: var(--c-stone-400, #a8a29e); }
.mobile-nav__link.is-current { color: var(--c-wine); font-weight: 700; }
.mobile-nav__account { display: flex; flex-direction: column; gap: 2px; }
.mobile-nav__item {
  display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 4px;
  font-size: 15px; color: var(--c-stone-700); text-decoration: none;
}
.mobile-nav__item:hover, .mobile-nav__link:hover { color: var(--c-stone-950); }
.mobile-nav__lang { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--c-line-2, #e7e5e4); }
.mobile-nav__lang-label { margin-right: 4px; font-size: 13px; color: var(--c-stone-500); }
.mobile-nav__lang-item {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border: 1px solid #d6d3d1; border-radius: 999px; font-size: 14px; color: var(--c-stone-700); text-decoration: none;
}
.mobile-nav__lang-item.is-current { background: var(--c-stone-900, #1c1917); border-color: var(--c-stone-900, #1c1917); color: #fff; }
body.is-nav-open { overflow: hidden; }
@media (min-width: 640px) and (max-width: 1279px) {
  .site-header__left { gap: 12px; }   /* 選單按鈕與品牌之間 */
}
@media (max-width: 379px) {
  .nav-toggle { width: 30px; margin-left: -8px; }
  .site-header__left { gap: 4px; }
}

/* 英文版（2026-09-19）：美金約價、只有中文版的說明 */
.price-usd { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--c-stone-500, #78716c); }
.exd-info__price-usd { display: block; margin-top: 4px; font-size: 14px; color: var(--c-stone-600, #57534e); text-align: right; }
.exd-info__price-usd small { display: block; font-size: 11px; color: var(--c-stone-500, #78716c); }
.exd-lang-note, .kba-lang-note { margin: 8px 0 12px; font-size: 13px; line-height: 1.6; color: var(--c-stone-500, #78716c); }
.au-panel__overseas { display: flex; flex-direction: column; gap: 10px; }
/* 語言切換增加 EN 後再縮一點（2026-09-19） */
@media (min-width: 1280px) and (max-width: 1535px) {
  .header-search { width: 160px; }
}
@media (min-width: 1536px) {
  .header-search { width: 224px; }
}
/* 海外版藏品頁：聯繫購買的說明文字自成一列，放在按鈕下方（2026-09-20） */
.exd-actions { align-items: start; }
.exd-actions .exd-lang-note { grid-column: 1 / -1; order: 3; margin: 0; }

/* 來店尋寶彈窗：左上角顯示網站標誌（2026-09-20） */
.ab-modal__logo { height: 32px; width: auto; max-width: 96px; object-fit: contain; flex: 0 0 auto; }

/* 藏品檢索篩選：標題與「重設條件」之間留間距，空間不足時讓連結換到下一行（2026-09-20） */
.ex-filters__head { gap: 12px; flex-wrap: wrap; row-gap: 6px; }
.ex-filters__reset { margin-left: 28px; }   /* 換行時縮排對齊標題文字（圖示 20px ＋ 間距 8px）；同一行時仍被 space-between 推到右邊 */

/* ==============================================================
   LINE／Google 快速登入（2026-09-21）
   按鈕依品牌規範：LINE 綠底（#06C755）白字、Google 白底灰框；高度與「登入」按鈕一致，長輩好點
   ============================================================== */
.mb-social { display: flex; flex-direction: column; gap: 12px; margin-bottom: var(--a-lg, 20px); }
.mb-social__btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 52px; padding: 12px 20px;
  border-radius: var(--mb-r, 8px); font-size: 17px; font-weight: 600; line-height: 1.3;
  text-decoration: none; transition: filter .15s ease, box-shadow .15s ease;
}
.mb-social__btn:focus-visible { outline: 3px solid var(--a-primary, #1c1c18); outline-offset: 2px; }
.mb-social__btn--line { background: #06C755; color: #fff; border: 1px solid #06C755; }
.mb-social__btn--line:hover { filter: brightness(.94); }
.mb-social__btn--google { background: #fff; color: #1f1f1f; border: 1px solid #747775; }
.mb-social__btn--google:hover { box-shadow: 0 1px 3px rgba(60, 64, 67, .3); }
.mb-social__icon { width: 24px; height: 24px; flex: 0 0 auto; }
.mb-social__note { margin: 0; font-size: 14px; color: var(--a-muted, #7e7570); text-align: center; }
.mb-social__divider { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 14px; color: var(--a-muted, #7e7570); }
.mb-social__divider::before, .mb-social__divider::after { content: ""; flex: 1; height: 1px; background: var(--a-line, #e3ddd3); }

/* 會員中心：綁定管理 */
.mb-card--social { margin-top: 0; }
@media (min-width: 960px) {
  /* 會員中心是「選單｜內容」兩欄：綁定卡片要排在右欄、個人資料下方 */
  .mb-layout--center .mb-card--social { grid-column: 2; }
}
.mb-social-links { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.mb-social-links__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 0; border-top: 1px solid var(--a-line, #e3ddd3); }
.mb-social-links__row:first-child { border-top: 0; }
.mb-social-links__name { min-width: 72px; font-weight: 700; font-size: 16px; }
.mb-social-links__name--line { color: #06A549; }
.mb-social-links__state { flex: 1; font-size: 15px; color: var(--a-ink, #1c1c18); }
.mb-social-links__state--off { color: var(--a-muted, #7e7570); }
.mb-social-links__row form { margin: 0; }
.mb-social-links__btn {
  min-height: 40px; padding: 8px 16px; border-radius: var(--mb-r, 8px); font-size: 15px; cursor: pointer;
  background: transparent; border: 1px solid var(--a-line-strong, #d0c4be); color: var(--a-ink, #1c1c18);
}
.mb-social-links__btn--primary { background: var(--a-primary, #1c1c18); border-color: var(--a-primary, #1c1c18); color: var(--a-on-primary, #fff); }

/* 隱私權政策頁（2026-09-21）：沿用說明頁頁首＋知識文章內文排版 */
.privacy-updated { margin: 8px 0 0; font-size: 14px; color: var(--a-muted, #7e7570); }
.privacy-body { max-width: 760px; margin: 0 auto var(--a-3xl, 64px); }
.privacy-body h2 { margin-top: 2em; }
.privacy-body ul { padding-left: 1.3em; }
.privacy-body li { margin-bottom: .45em; }

/* 會員好禮：每項「標題＋說明」與結語（2026-09-22） */
.mb-benefits__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mb-benefits__name { font-size: 15px; line-height: 22px; font-weight: 700; color: rgba(252, 249, 242, .95); }
.mb-benefits__desc { font-size: 13px; line-height: 20px; color: rgba(252, 249, 242, .72); }
.mb-benefits__closing {
  margin-top: var(--a-lg);
  font-family: var(--a-serif);
  font-size: 16px;
  line-height: 26px;
  letter-spacing: .02em;
  color: var(--a-sec-fixed-dim);
}
/* 最後一行不要只剩一個字（例如「握。」「過。」） */
.mb-benefits__desc, .mb-benefits__closing { text-wrap: pretty; }

/* 會員中心：只差手機就能轉轉盤的提示（2026-09-23） */
.mb-spin-invite--hint { cursor: default; }
.mb-spin-invite--hint:hover { transform: none; }