/* 織夢二輪 — 設計系統
   依據：2026-07-27 精品車廠視覺語言逆向（Porsche / Harley-Davidson / Audi / Lexus 實查）
   三條硬規：同色階透明度做階層、圓角上限 4px、全站只有一個彩色 */

:root {
  --c-canvas: #0e1013;
  --c-surface: #171a1f;
  --c-surface-raised: #1f232a;
  --c-line: rgba(255, 255, 255, .10);
  --c-line-strong: rgba(255, 255, 255, .18);

  --c-text: #f2f4f7;
  --c-text-2: rgba(242, 244, 247, .70);
  --c-text-3: rgba(242, 244, 247, .55);
  --c-text-4: rgba(242, 244, 247, .55);   /* .38 只有 3.34:1、過不了 AA */

  /* 火焰紅：案主要「黑紅黑紅、很 rock」的哈雷調性，明確說不要綠色。
     選 #E8543D 是因為它在深底 5.23:1、卡片底 4.79:1，兩個都過 WCAG AA——
     更深的紅（#D6342A）雖然更沉，但只有 3.64:1、小字會看不清。 */
  --c-accent: #E8543D;
  --c-accent-hover: #C93E2A;
  --c-accent-ink: #0e1013;
  --c-sold: rgba(242, 244, 247, .45);
  --c-line-green: #06C755;

  --ff: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC",
        -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fw-normal: 400;
  --fw-bold: 700;

  --fs-display: clamp(2.125rem, 1.429rem + 2.86vw, 4rem);
  --fs-h1: clamp(1.75rem, 1.379rem + 1.52vw, 2.75rem);
  --fs-h2: clamp(1.375rem, 1.143rem + .95vw, 2rem);
  --fs-h3: clamp(1.125rem, 1.032rem + .38vw, 1.375rem);
  --fs-body: 1rem;
  /* 15px 是 TypoGate 的字級地板：再小老花就看不清，而買重機的客層年齡不低。
     原本 .875rem＝14px，全站 13 處次要文字（規格、台數、篩選鈕）整批踩線。
     一處一處補是補不完的，改在 token 這裡才是根治。 */
  --fs-small: .9375rem;
  --fs-caption: .75rem;   /* 只給全大寫的英文標籤用（DREAM MOTO GARAGE、IN STOCK），不裝中文內文 */

  --lh-display: 1.15;
  --lh-h1: 1.25;
  --lh-h2: 1.30;
  --lh-h3: 1.40;
  --lh-body: 1.75;
  --lh-small: 1.60;
  --lh-caption: 1.40;

  --ls-display: -.01em;
  --ls-eyebrow: .12em;
  --ls-body: .01em;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --sp-section: clamp(4rem, 2.7rem + 5.33vw, 7.5rem);
  --sp-gutter: clamp(1.25rem, .786rem + 1.9vw, 2.5rem);
  --sp-cardgap: clamp(1rem, .721rem + 1.14vw, 1.75rem);

  --w-container: 1280px;
  --w-measure: 34em;
  --w-herotext: 760px;   /* Harley 原值 480px 是拉丁文用的；中文 display 級要更寬才不會被切碎 */

  --btn-h: 48px;
  --r-xs: 2px;
  --r-sm: 4px;

  --t-fast: 250ms; --t-mid: 400ms; --t-slow: 600ms;
  --e-inout: cubic-bezier(.25, .1, .25, 1);
  --e-standard: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--c-canvas);
  color: var(--c-text);
  font-family: var(--ff);
  font-size: var(--fs-body);
  font-weight: var(--fw-normal);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; height: auto; }   /* 沒有這行，HTML 的 height 屬性會蓋掉 aspect-ratio */
a { color: inherit; }

h1, h2, h3 { margin: 0; font-weight: var(--fw-bold); text-wrap: balance; word-break: keep-all; }
.card__spec, .nav a, .badge, .btn, .card__id { word-break: keep-all; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
p { margin: 0; text-wrap: pretty; }

.nb { white-space: nowrap; }

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

.section { padding-block: var(--sp-section); }
.section__head { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.eyebrow {
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-3);
}
.lead { color: var(--c-text-2); max-width: var(--w-measure); text-wrap: balance; }
.note { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-text-3); }

/* ── 頁首 ───────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: rgba(14, 16, 19, .86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-line);
}
.site-head__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); min-height: 60px;
}
/* 窄螢幕塞不下就上下排，絕不讓「在店車輛」被折成兩行 */
@media (max-width: 400px) {
  .site-head__inner { flex-direction: column; align-items: flex-start; gap: var(--sp-1); padding-block: var(--sp-2); }
  .nav { width: 100%; gap: var(--sp-3); }
}
.brand { font-weight: var(--fw-bold); text-decoration: none; letter-spacing: .04em; white-space: nowrap; }
.brand small {
  display: block; font-size: var(--fs-caption); font-weight: var(--fw-normal);
  letter-spacing: var(--ls-eyebrow); color: var(--c-text-4); text-transform: uppercase;
  white-space: nowrap;
}
.nav { display: flex; gap: var(--sp-4); font-size: var(--fs-small); }
.nav a { color: var(--c-text-2); text-decoration: none; white-space: nowrap;
          display: inline-flex; align-items: center; min-height: 44px;
          transition: color var(--t-fast) var(--e-standard); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--c-text); }

/* ── Hero ───────────────────────────────────────── */
.hero { position: relative; height: 520px; overflow: hidden; background: var(--c-surface); }
.hero--noimg { height: 400px; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media--empty {
  background:
    radial-gradient(120% 90% at 70% 15%, #22262e 0%, transparent 60%),
    linear-gradient(160deg, #14171c 0%, #0e1013 100%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* 兩道漸層：由下往上是原本的；左側再壓一道，因為標題壓在左下角，
     而 hero 現在是「店裡某一台真車」的照片——每台車的亮度與構圖都不一樣，
     不能假設那個角落剛好是暗的。壓左側等於不管換哪台車，白字都讀得到。 */
  background:
    linear-gradient(to right,
      rgba(14, 16, 19, .82) 0%, rgba(14, 16, 19, .45) 34%, rgba(14, 16, 19, 0) 62%),
    linear-gradient(to top,
      rgba(14, 16, 19, .78) 0%, rgba(14, 16, 19, .55) 38%, rgba(14, 16, 19, 0) 72%);
}
.hero__copy {
  position: absolute; left: 0; bottom: var(--sp-6); z-index: 2;
  width: 100%; max-width: 600px;
  padding-inline: var(--sp-gutter);
  display: grid; gap: var(--sp-3);
  animation: rise var(--t-slow) var(--e-inout) 120ms both;
}
.hero__title {
  font-size: var(--fs-display); line-height: var(--lh-display);
  letter-spacing: var(--ls-display); font-weight: var(--fw-bold);
}
.hero__sub { color: var(--c-text-2); }

@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (min-width: 768px) {
  .hero { height: 620px; }
  .hero--noimg { height: 460px; }
  .hero::after {
    background: linear-gradient(to right,
      rgba(14, 16, 19, .72) 0%, rgba(14, 16, 19, .50) 40%, rgba(14, 16, 19, 0) 70%);
  }
  .hero__copy { gap: var(--sp-4); }
}
@media (min-width: 1200px) {
  .hero { height: 660px; }
  .hero--noimg { height: 480px; }
  .hero__copy {
    top: 50%; bottom: auto; transform: translateY(-50%);
    max-width: var(--w-herotext); gap: var(--sp-5);
  }
}

/* ── 找車工具（搜尋＋廠牌＋牌照＋排序）─────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.finder { margin-bottom: var(--sp-5); display: grid; gap: var(--sp-3); }

.finder__search { position: relative; max-width: 520px; }
.finder__search input {
  font: inherit; font-size: var(--fs-small); color: var(--c-text);
  width: 100%; min-height: 48px; padding-inline: var(--sp-4) var(--sp-7);
  background: var(--c-surface-raised); border: 1px solid var(--c-line);
  border-radius: var(--r-xs); appearance: none;
  transition: border-color var(--t-fast) var(--e-standard);
}
.finder__search input::placeholder { color: var(--c-text-4); }
.finder__search input:focus-visible { outline: none; border-color: var(--c-accent); }
/* 用自己的清除鈕，Safari 原生那顆在深色底上幾乎看不見 */
.finder__search input::-webkit-search-cancel-button { display: none; }
.finder__clear {
  position: absolute; inset-block: 0; right: 0; width: 48px;
  font: inherit; color: var(--c-text-3); background: transparent; border: 0; cursor: pointer;
}
.finder__clear:hover { color: var(--c-text); }

.finder__row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.finder__label {
  font-size: var(--fs-caption); letter-spacing: var(--ls-eyebrow);
  color: var(--c-text-4); text-transform: uppercase; margin-right: var(--sp-1);
  white-space: nowrap;   /* 不焊死的話「廠牌」會被擠成直排＝句中硬斷＋孤兒字 */
}
.finder__label--sort { margin-left: var(--sp-3); }

.finder button:not(.finder__clear) {
  font: inherit; font-size: var(--fs-small); color: var(--c-text-2);
  background: transparent; border: 1px solid var(--c-line); border-radius: var(--r-xs);
  min-height: 44px; padding-inline: var(--sp-4); cursor: pointer; white-space: nowrap;
  transition: border-color var(--t-fast) var(--e-standard), color var(--t-fast) var(--e-standard);
}
.finder button:not(.finder__clear):hover { border-color: var(--c-line-strong); color: var(--c-text); }
.finder button[aria-pressed="true"] { border-color: var(--c-accent); color: var(--c-accent); }
.finder .count { font-size: var(--fs-small); color: var(--c-text-3); margin: 0; }
@media (min-width: 600px) { .finder .count { text-align: right; } }

.car-grid__empty { color: var(--c-text-3); padding-block: var(--sp-6); }
.linkish {
  font: inherit; color: var(--c-accent); background: transparent;
  border: 0; padding: 0; cursor: pointer; text-decoration: underline;
}

@media (max-width: 599px) {
  /* 手機上 7 個廠牌會擠成三排、光篩選列就吃掉大半個畫面，第一台車要滑很久才看得到。
     改成「一組一行、可左右滑」——手機逛街本來就習慣橫向滑動。 */
  .finder__row {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    /* 讓最後一顆按鈕不要貼死在螢幕邊，看得出來「還有東西可以滑」 */
    padding-right: var(--sp-4); scroll-padding-left: var(--sp-4);
  }
  .finder__row::-webkit-scrollbar { display: none; }
  /* 標籤釘在左邊、按鈕從它底下滑過去。底色要跟頁面一致（--c-canvas），
     用 --c-surface 會在標籤後面留一塊看得出來的淺色方塊。 */
  .finder__label {
    position: sticky; left: 0; z-index: 1;
    background: var(--c-canvas); padding-right: var(--sp-2);
  }
  .finder__label--sort { margin-left: var(--sp-2); }
}

/* ── 車輛卡片 ───────────────────────────────────── */
.car-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-cardgap);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: border-color var(--t-fast) var(--e-standard);
}
.card > a { display: block; text-decoration: none; color: inherit; }
.card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--c-surface-raised); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-mid) var(--e-inout); }
.card__media--empty { display: grid; place-items: center; color: var(--c-text-4); font-size: var(--fs-caption); }
.card__body { display: grid; gap: var(--sp-2); padding: var(--sp-4); }
.card__body h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__id { font-size: var(--fs-small); letter-spacing: var(--ls-eyebrow); color: var(--c-text-4); }
.card__spec { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-text-3); }
.card__price { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); }
.card__cond {
  font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-text-2);
  text-wrap: balance;
  padding-top: var(--sp-3); border-top: 1px solid var(--c-line);
}
@media (hover: hover) {
  .card:hover { border-color: var(--c-line-strong); }
  .card:hover .card__media img { transform: scale(1.03); }
}

/* 手機改兩欄。實測依據：整頁 20.4 屏，其中 37 張卡片就佔 91.6%（15,734/17,184px）——
   hero、篩選列、頁尾加起來才 6.7%，所以唯一有效的槓桿是卡片本身，砍別的地方都是白費力氣。
   客人是「先掃過全部、再挑一台細看」，掃的時候要的是輪廓與價格，不是細節。
   ⚠️ 這段一定要放在 .card 基礎樣式「之後」——同權重下後寫的才會贏。 */
/* ⚠️ 斷點必須到 767px：`minmax(300px,1fr)` 在 600–767px 只塞得下一欄，
   量出來是 25.9 屏（比手機的 20 屏還糟）——平板直放與小筆電正好落在這一段。 */
@media (max-width: 767px) {
  .car-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .card__body { padding: var(--sp-3); gap: var(--sp-1); }
  /* 兩欄之後卡片只剩 169px 寬，2 行裝不下哈雷的長車名——
     實測 24/37 台被截斷（桌機 0 台），而 23 台哈雷開頭都一樣、截斷就分不出誰是誰。
     手機放到 3 行；桌機維持 2 行（那裡本來就不會截）。 */
  .card__body h3 { font-size: var(--fs-small); line-height: var(--lh-small); -webkit-line-clamp: 3; }
  .card__price { font-size: var(--fs-body); line-height: var(--lh-body); }
  .card__spec { font-size: var(--fs-small); }
}

.badge {
  display: inline-block; font-size: var(--fs-caption); line-height: 1;
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-xs); letter-spacing: .06em;
}
.badge--new { background: var(--c-accent); color: var(--c-accent-ink); font-weight: var(--fw-bold); }
.badge--hold { border: 1px solid var(--c-line-strong); color: var(--c-text-2); background: rgba(14, 16, 19, .72); }
.badge--sold { border: 1px solid var(--c-line); color: var(--c-sold); background: rgba(14, 16, 19, .72); }
.card__flags { position: absolute; top: var(--sp-3); left: var(--sp-3); display: flex; gap: var(--sp-2); z-index: 1; }
.card--sold .card__media img { filter: grayscale(.7) opacity(.6); }

/* ── 車輛詳情 ───────────────────────────────────── */
.car-head { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); }

/* 規格快覽：價格底下、相簿上面的三個關鍵數字，客人不用滑到最底才看得到 */
.spec-quick {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  margin: var(--sp-2) 0 0; padding: var(--sp-4) 0;
  border-block: 1px solid var(--c-line);
}
.spec-quick dt {
  font-size: var(--fs-caption); letter-spacing: var(--ls-eyebrow);
  color: var(--c-text-4); text-transform: uppercase; white-space: nowrap;
}
.spec-quick dd {
  margin: var(--sp-1) 0 0; font-size: var(--fs-body); color: var(--c-text);
  white-space: nowrap;   /* 「2021 年 10 月」「1868cc · 紅牌」不准從中間斷開 */
}

/* 資料新鮮度：客人第一個疑問是「這是現在還有的車嗎」，所以擺在車輛清單開頭、不是頁尾 */
/* 用 flex 排會把「車輛清單今天剛更新」當成一個不能拆的欄位、擠成兩行還跟圓點錯開。
   改成一般段落、圓點用 inline-block 跟著文字流走，長短句都不會歪。 */
.freshness {
  margin: var(--sp-3) 0 0; font-size: var(--fs-small);
  color: var(--c-text-3); line-height: var(--lh-small);
}
.freshness__dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: var(--sp-2); vertical-align: middle;
  background: var(--c-accent);   /* 原本是綠點；案主明確不要綠色 */
}

/* 車款來歷：照片之後、規格表之前。這段是要被「讀」的，不是被掃的，
   所以給它比規格更寬鬆的行高與可讀寬度，並用左邊那條線跟前後的圖表分開。 */
.car-story {
  margin-block: var(--sp-7);
  padding-left: var(--sp-5);
  border-left: 2px solid var(--c-line-strong);
  max-width: var(--w-measure);
}
.car-story h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); margin: 0 0 var(--sp-3); }
.car-story p {
  margin: 0; color: var(--c-text-2);
  line-height: 1.9;   /* 中文長段落要比預設再鬆一點才讀得下去 */
  /* 不用 justify：這幾段是中英混排（Softail、Twin Cam…），
     兩端對齊會為了湊齊右邊在字距上撐出大空隙，比參差不齊還難看。 */
}

/* 老闆寫的賣點：原本用 .note（小灰字）＝看起來像免責聲明，實際上是他最想被看到的話 */
.car-highlight { margin-top: var(--sp-2); max-width: var(--w-measure); }
.car-highlight p:last-child {
  margin: var(--sp-1) 0 0; color: var(--c-text-2); line-height: var(--lh-body);
}
.car-price { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-bold); }
.gallery { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.gallery img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-sm); width: 100%; }
.gallery--empty {
  border: 1px dashed var(--c-line-strong); border-radius: var(--r-sm);
  padding: var(--sp-8) var(--sp-4); text-align: center; color: var(--c-text-3);
}
.spec-table { width: 100%; border-collapse: collapse; margin-block: var(--sp-6); }
.spec-table th, .spec-table td {
  text-align: left; padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-small); line-height: var(--lh-small);
}
.spec-table th { color: var(--c-text-3); font-weight: var(--fw-normal); width: 8em; }
.chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip-list li {
  font-size: var(--fs-small); color: var(--c-text-2);
  border: 1px solid var(--c-line); border-radius: var(--r-xs); padding: var(--sp-1) var(--sp-3);
}

/* ── 按鈕與聯絡 ─────────────────────────────────── */
.btn {
  height: var(--btn-h); padding-inline: var(--sp-5);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-size: var(--fs-body); font-weight: var(--fw-bold); letter-spacing: .02em;
  border-radius: var(--r-xs); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--t-fast) var(--e-standard),
              border-color var(--t-fast) var(--e-standard),
              color var(--t-fast) var(--e-standard);
}
.btn--primary { background: var(--c-accent); color: var(--c-accent-ink); }
.btn--primary:hover { background: var(--c-accent-hover); }
.btn--secondary { background: transparent; color: var(--c-text); border-color: rgba(255, 255, 255, .35); }
.btn--secondary:hover { border-color: var(--c-text); }
.btn--line { background: var(--c-line-green); color: #fff; }
.btn--line:hover { background: #05b34c; }

.cta-bar {
  position: sticky; bottom: 0; z-index: 15;
  display: flex; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-gutter) calc(var(--sp-2) + env(safe-area-inset-bottom));
  background: rgba(14, 16, 19, .92);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--c-line);
}
.cta-bar .btn { padding-inline: var(--sp-3); }
.cta-bar .btn--line { flex: 65; }
.cta-bar .btn--secondary { flex: 35; }

.desk-contact {
  margin-top: var(--sp-5); padding: var(--sp-4);
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
  background: var(--c-surface);
  font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-text-2);
  display: grid; gap: var(--sp-2);
}
.desk-contact strong { color: var(--c-text); }
/* 這段開頭就寫「用電腦看的話…」——手機看到它只會困惑。
   底下那條固定的 LINE 按鈕本來就是手機專用的動線，兩個同時出現是互相打架。 */
@media (max-width: 767px) { .desk-contact { display: none; } }

.site-foot__fresh { color: var(--c-text-4); }

/* ── 內文區塊 ───────────────────────────────────── */
.prose { max-width: var(--w-measure); display: grid; gap: var(--sp-4); }
.prose h2 { margin-top: var(--sp-6); }
.prose ul { margin: 0; padding-left: 1.25em; display: grid; gap: var(--sp-2); color: var(--c-text-2); }

.callout {
  border: 1px solid var(--c-line-strong); border-left: 3px solid var(--c-accent);
  border-radius: var(--r-xs); background: var(--c-surface);
  padding: var(--sp-5); display: grid; gap: var(--sp-3);
}
.callout h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); margin-top: 0; }
.callout p { color: var(--c-text-2); text-wrap: balance; }

/* ── 頁尾 ───────────────────────────────────────── */
main { flex: 1 0 auto; }

.site-foot {
  margin-top: auto;
  border-top: 1px solid var(--c-line); padding-block: var(--sp-7);
  color: var(--c-text-4);
  /* 15px 是 TypoGate 的字級地板（再小老花看不清）。
     店名、地址、電話是最需要被看清楚的資訊，不該是全站最小的字。 */
  font-size: 15px; line-height: var(--lh-small);
}
.site-foot .container { display: grid; gap: var(--sp-3); }
.site-foot a { color: var(--c-text-3); text-decoration: none; display: inline-block; padding-block: 12px; }
.site-foot a:hover { color: var(--c-text); }

/* ── 管理視圖（只有我們跟老闆看得到）───────────── */
.manage-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.manage-table th, .manage-table td {
  text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--c-line);
}
.manage-table th { color: var(--c-text-3); font-weight: var(--fw-normal); }
.days--fresh { color: #7bbf8a; }
.days--warn { color: var(--c-accent); }
.days--old { color: #c98b7a; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* 頁尾行動區：整站唯一「沒找到想要的車」也接得住的出口 */
.foot-cta {
  padding-bottom: var(--sp-5); margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-line); display: grid; gap: var(--sp-2);
  color: var(--c-text-2);
}
.foot-cta strong { color: var(--c-text); }
.foot-cta .btn { justify-self: start; margin-top: var(--sp-2); }

/* CTA 之前那句「現場才準」：要看得見但不能搶過按鈕 */
.see-in-person {
  margin-top: var(--sp-6); color: var(--c-text-2);
  padding-left: var(--sp-4); border-left: 2px solid var(--c-accent);
}

.freshness__hint { color: var(--c-text-3); }