/* 比較網站專用版面；品牌變數在 brand.css，App Bar／Tab Bar／首屏／區塊沿用 landing.css。不用 inline style（CSP） */

/* ============ 版心：平板以上全站滿版 ============ */
/* 不設寬度上限，任何螢幕都貼滿，只留 gutter 與安全區；揭露列、App Bar、內容、頁尾共用同一條左右緣。
   文字段落另有 40–44rem 易讀寬（.lead／.md／.doc p），不跟著拉寬。手機（≤639px）沿用 landing.css 的 App 版面 */
@media (min-width: 640px) {
  .wrap {
    max-width: none;
    padding-left: max(clamp(var(--s6), 3vw, var(--s12)), env(safe-area-inset-left));
    padding-right: max(clamp(var(--s6), 3vw, var(--s12)), env(safe-area-inset-right));
  }
}

/* ============ 首頁 #demo／#topics 寬螢幕限寬 ============ */
/* 只限這兩段的版心（含 gutter 共 85rem＝1360px）並置中：標題、導語、群組標題與卡片同在 .wrap 內，左緣自然對齊。
   色帶背景在 section 上，仍滿版；hero 與全域 .wrap 不動。放在 ≥640px，手機的橫向滑動卡片不受影響 */
@media (min-width: 640px) {
  #demo .wrap,
  #topics .wrap,
  #faq .wrap {
    max-width: 85rem;
  }

  /* #faq 清單取消 landing.css 的 44rem 上限，填滿版心 */
  #faq .faq {
    max-width: none;
  }
}

/* ≥960px 兩欄；align-items:start 讓展開的 details 不撐高同列另一格。gap 沿用 .faq 原本的 --s3 */
@media (min-width: 960px) {
  #faq .faq {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* ============ App Bar 桌機導覽（手機改用底部 Tab Bar） ============ */
.top-nav {
  display: flex;
  gap: var(--s2);
}

.top-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s2);
  font-weight: 700;
  text-decoration: none;
}

.top-nav a:hover,
.top-nav a[aria-current] {
  text-decoration: underline;
  text-decoration-color: var(--brand-orange);
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s6);
}

@media (max-width: 639px) {
  .top-nav {
    display: none;
  }
}

/* 底部 Tab Bar 已改用 aria-current="page"，沿用 landing 的高亮樣式 */

.btn-sm {
  min-height: 44px;
  margin-top: 0;
  padding: 0 var(--s3);
  font-size: 0.9375rem;
  white-space: nowrap;
}

.empty {
  margin-top: var(--s4);
  color: var(--text-muted);
}

/* 首頁段落裡的延伸連結（比較頁空狀態 → #topics、關於 → /about）：點擊區至少 44px 高 */
.more-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--s2);
  font-weight: 700;
}

.stock {
  display: inline-block;
  margin-top: var(--s1);
  padding: 0 var(--s2);
  border: 1.5px solid var(--price-up);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1.7;
}

/* ============ 首頁：比較頁卡片 ============ */
.cmp-cards {
  display: grid;
  gap: var(--s3);
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
}

.cmp-card {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-height: 44px;
  padding: var(--s4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: 6px solid var(--brand-orange);
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform 120ms var(--ease);
}

.cmp-cards li:nth-child(3n + 2) .cmp-card { border-top-color: var(--brand-blue); }
.cmp-cards li:nth-child(3n) .cmp-card { border-top-color: var(--brand-yellow); }

.cmp-card:active {
  transform: scale(0.98);
}

.cmp-card-title {
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.5;
  /* 標題最多 2 行，超出以省略號截斷（DOM 仍有完整文字，輔助科技讀得到） */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.cmp-card-meta {
  margin-top: auto; /* 更新日貼底，各卡對齊 */
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* 平板以上：卡片至少 17.5rem（扣掉 Windows 捲軸後 640px 仍排得下 2 欄），滿版後依寬度自動排欄
   （640→2、960→3、1280→4、1920→6）；手機維持 1 欄 */
@media (min-width: 640px) {
  .cmp-cards {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
    grid-auto-rows: 1fr; /* 不同列也同高 */
  }

  .cmp-cards li {
    display: flex;
  }

  .cmp-card {
    flex: 1; /* 撐滿 li 高度 */
  }

  /* 2 行 × line-height 1.5 × 1.0625rem：1 行標題也佔 2 行高 */
  .cmp-card-title {
    min-height: 3.1875rem;
  }
}

/* ============ 首頁：本週降價 ============ */
.drops {
  display: grid;
  gap: var(--s3);
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
}

.drop {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s2) var(--s4);
  align-items: center;
  padding: var(--s3) var(--s4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.drop-name {
  grid-column: 1 / -1;
  font-weight: 700;
  line-height: 1.5;
  /* 品名最多 2 行（完整文字仍在 DOM） */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.drop-price s {
  color: var(--text-muted);
}

.drop-pct {
  margin-left: var(--s2);
  padding: 0 var(--s2);
  border-radius: 6px;
  background: var(--price-down);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 800;
}

/* 平板以上：降價改格狀，每格至少 24rem（價格＋按鈕同一列放得下），不讓一條拉到整個螢幕寬。
   同一列的卡片等高：品名靠上、價格與按鈕對齊在底部 */
@media (min-width: 640px) {
  .drops {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  }

  .drop {
    grid-template-rows: 1fr auto;
  }

  .drops {
    grid-auto-rows: 1fr; /* 不同列也同高 */
  }

  .drop-name {
    align-self: start;
    min-height: 3rem; /* 2 行 × line-height 1.5 × 1rem */
  }
}

/* ============ 比較頁 ============ */
/* min-width:0：可橫向捲動的表格只在自己的容器內捲，不撐寬整頁（375px 不可整頁橫向捲動） */
.cmp-page,
.cmp-page .wrap,
.cmp-page .wrap > * {
  min-width: 0;
}

.cmp-page {
  padding: var(--s8) 0 var(--s12);
  overflow-wrap: anywhere; /* 長型號、長網址不撐寬 */
}

.cmp-page h1 {
  max-width: 44rem;
  font-size: 1.75rem;
  text-wrap: balance;
}

.lead {
  max-width: 44rem;
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--soft);
  border-left: 4px solid var(--brand-orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-weight: 700;
}

.cmp-h2 {
  margin-top: var(--s8);
  font-size: 1.375rem;
}

/* 規格表：容器可橫向捲動（可聚焦，鍵盤也能捲） */
.cmp-wrap {
  margin-top: var(--s4);
  position: relative; /* 讓表頭內 position:absolute 的 .sr-only 以此容器為基準並被 overflow 裁切，避免撐寬整頁 */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* 寬度 100%：桌機滿版時欄位隨寬度分配，不擠在左邊；min-width 保證窄螢幕時欄位不擠成直排 */
.cmp {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
}

.cmp th,
.cmp td {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

/* 表頭：比表身深一階＋底線加粗，和斑馬紋區隔 */
.cmp thead th {
  padding: var(--s1) var(--s4);
  background: var(--surface);
  border-bottom: 2px solid var(--border);
  font-size: 0.875rem;
  white-space: nowrap;
}

/* 排序中的欄位：表頭底線換品牌橘，一眼看出依哪一欄排 */
.cmp thead th[aria-sort="ascending"],
.cmp thead th[aria-sort="descending"] {
  border-bottom-color: var(--brand-orange);
}

/* 數值欄右對齊，位數對齊才好比大小；表頭圖示放在文字左邊，讓文字右緣和數字右緣切齊 */
.cmp .num {
  text-align: right;
}

.cmp th.num .sort-btn {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.cmp .price {
  font-weight: 800;
}

.cmp tbody tr:last-child > * {
  border-bottom: 0;
}

/* 商品名稱欄固定在左側，橫向捲動時仍看得到是哪個商品；右側分隔線讓捲過去的欄位有「滑到底下」的層次 */
.cmp tbody th,
.cmp thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 12rem;
  background: var(--bg);
  box-shadow: inset -1px 0 0 var(--border);
}

.cmp thead th:first-child {
  background: var(--surface);
}

.cmp tbody th {
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.cmp td {
  white-space: nowrap;
}

/* 斑馬紋：寬表格橫向看時不跳行；顏色介於 bg 與 surface 之間，比表頭淡 */
.cmp tbody tr:nth-child(even) > * {
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 60%, var(--bg));
}

/* 滑鼠移入整列高亮（含固定的商品欄），只在有 hover 的裝置 */
@media (hover: hover) {
  .cmp tbody tr:hover > * {
    background: var(--soft);
  }
}

/* 購買欄靠右，和整列的閱讀終點一致 */
.cmp td:last-child {
  text-align: right;
}

/* 寬螢幕上限：蝦皮商品名可能很長，限制區塊寬度讓表格自動換行，不讓商品欄吃掉整列 */
.cmp-name {
  display: block;
  max-width: 22rem;
}

/* 有排序按鈕的表頭：th 與按鈕各留一半內距，文字和表身同一條左（右）緣 */
.cmp thead th[aria-sort] {
  padding-left: var(--s2);
  padding-right: var(--s2);
}

.cmp-brand {
  display: block;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 400;
}

/* ============ 參考價區塊 ============ */
/* 卡片至少 20rem 寬（走勢圖才看得清）；滿版後寬螢幕自動排 3～5 欄，手機 1 欄。
   min(100%, …) 讓窄螢幕不被最小寬撐出整頁橫向捲動 */
.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--s4);
  margin-top: var(--s4);
}

.price-card {
  min-width: 0;
}

.price-card {
  display: flex;
  flex-direction: column;
  padding: var(--s4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.price-card h3 {
  font-size: 1.0625rem;
  line-height: 1.5;
}

.ref-price {
  margin-top: var(--s2);
}

.ref-price strong {
  font-size: 1.25rem;
}

.price-card .btn {
  align-self: flex-start;
  margin-top: auto;
}

.price-card > :nth-last-child(2) {
  margin-bottom: var(--s4);
}

.trend {
  margin: var(--s3) 0 0;
}

.trend svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.trend-line {
  fill: none;
  stroke: var(--brand-blue);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trend-avg {
  stroke: var(--text-muted);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
}

.trend-min {
  fill: var(--brand-orange);
}

.trend-cur {
  fill: var(--brand-navy);
  stroke: var(--brand-yellow);
  stroke-width: 2;
}

.trend-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s4);
  margin: var(--s2) 0 0;
  font-size: 0.9375rem;
}

.trend-stats div {
  display: flex;
  gap: var(--s1);
}

.trend-stats dt {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  color: var(--text-muted);
}

.trend-stats dd {
  margin: 0;
  font-weight: 800;
}

.key {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.key-min { background: var(--brand-orange); }
.key-cur { background: var(--brand-navy); border: 2px solid var(--brand-yellow); }
.key-avg { width: 14px; height: 0; border-radius: 0; border-top: 2px dashed var(--text-muted); }

/* ============ summary_md 內文 ============ */
.md {
  max-width: 44rem;
  margin-top: var(--s8);
}

.lead.md {
  margin-top: var(--s4);
}

.md h2 {
  margin-top: var(--s6);
  font-size: 1.25rem;
}

.md h3 {
  margin-top: var(--s4);
  font-size: 1.0625rem;
}

.md p,
.md ul {
  margin-top: var(--s2);
}

.md ul {
  padding-left: var(--s6);
}

.cmp-meta {
  margin-top: var(--s8);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.875rem;
}

.cmp-meta p + p {
  margin-top: var(--s1);
}

@media (max-width: 639px) {
  .cmp-page {
    padding: var(--s6) 0 var(--s12);
  }

  .cmp-page h1 {
    font-size: 1.5rem;
  }

  /* 手機：表格貼齊螢幕左右（App 清單的樣子），多出 32px 給規格欄；上下仍保留分隔線 */
  .cmp-wrap {
    margin-left: calc(-1 * max(var(--s4), env(safe-area-inset-left)));
    margin-right: calc(-1 * max(var(--s4), env(safe-area-inset-right)));
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  /* 貼邊後外框會跑出螢幕，改畫在內側 */
  .cmp-wrap:focus-visible {
    outline-offset: -3px;
  }

  .cmp {
    min-width: 34rem;
  }

  .cmp th,
  .cmp td {
    padding: var(--s2) var(--s3);
  }

  .cmp thead th {
    padding: var(--s1) var(--s3);
  }

  .cmp thead th[aria-sort] {
    padding-left: var(--s1);
    padding-right: var(--s1);
  }

  /* landing.css 手機版把 .sort-btn 內距縮成 4px；比較表要 8px，表頭文字才和表身切齊 */
  .cmp .sort-btn {
    padding: 0 var(--s2);
  }

  /* 固定的商品欄：左側避開瀏海安全區；右側加淡陰影，提示右邊還有欄位滑到它底下 */
  .cmp tbody th,
  .cmp thead th:first-child {
    min-width: 8.5rem;
    padding-left: max(var(--s3), env(safe-area-inset-left));
    box-shadow: inset -1px 0 0 var(--border), 6px 0 8px -6px rgb(11 37 69 / 0.25);
  }

  @media (prefers-color-scheme: dark) {
    .cmp tbody th,
    .cmp thead th:first-child {
      box-shadow: inset -1px 0 0 var(--border), 6px 0 8px -6px rgb(0 0 0 / 0.6);
    }
  }

  .cmp-name {
    max-width: 10rem;
  }

  .cmp td:last-child {
    padding-right: max(var(--s3), env(safe-area-inset-right));
  }

  .cmp-wrap + .swipe-hint {
    margin-top: var(--s2);
  }

  .drop {
    grid-template-columns: 1fr;
  }

  .drop .btn-sm {
    justify-self: start;
  }
}