/* 裏物 LIWU — 家具比一比：樣式
   延用官網安靜、留白的語彙（style.css 的設計變數），不引入任何套件。
   涵蓋：加入比較按鈕／浮動比較列／bottom sheet／分類切換對話框／
        比較頁表格（桌機三欄、手機橫滑 scroll-snap）。 */

/* ── 螢幕閱讀器專用 ── */
.sr-only-cmp {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 商品卡／詳情的「加入比較」按鈕 ── */
.cmp-add {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 16px; margin-top: 10px;
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.06em;
  color: var(--text-charcoal); background: var(--white);
  border: 1px solid var(--grey-3); border-radius: 999px;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.cmp-add:hover { border-color: var(--text-charcoal); }
.cmp-add:focus-visible { outline: 2px solid var(--text-charcoal); outline-offset: 2px; }
.cmp-add.added {
  background: var(--text-charcoal); color: var(--white); border-color: var(--text-charcoal);
}

/* ── 浮動比較列 ── */
.cmp-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--white); border-top: 1px solid var(--line);
  box-shadow: 0 -8px 30px rgba(0,0,0,0.08);
  transform: translateY(110%); transition: transform .25s ease;
  padding-bottom: env(safe-area-inset-bottom);
}
.cmp-bar.open { transform: translateY(0); }
body.cmp-bar-visible { scroll-padding-bottom: 120px; }
body.cmp-bar-visible main, body.cmp-bar-visible .site-footer { padding-bottom: 96px; }
.cmp-bar-inner {
  max-width: 1120px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 16px;
}
.cmp-bar-count {
  font-family: var(--wide); font-size: 12px; letter-spacing: 0.12em;
  color: var(--text-mid); background: none; border: 0; cursor: pointer;
  min-height: 44px; white-space: nowrap;
}
.cmp-slots { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; overflow: hidden; }
.cmp-slot {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 12px; padding: 5px 8px;
  max-width: 220px; min-width: 0; background: var(--offwhite);
  flex: none;   /* 不許壓扁：塞不下就被 overflow 裁掉，不能疊在一起 */
}
.cmp-slot img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; flex: none; }
.cmp-slot-noimg { width: 40px; height: 40px; border-radius: 8px; background: var(--grey-1); flex: none; }
.cmp-slot-name {
  font-size: 12.5px; color: var(--text-charcoal);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmp-slot-x {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  border: 0; background: none; color: var(--text-mid); cursor: pointer; font-size: 13px;
}
.cmp-slot-x:hover { color: var(--text-charcoal); background: var(--grey-1); }
.cmp-slot-x:focus-visible { outline: 2px solid var(--text-charcoal); }
.cmp-slot-empty {
  color: var(--text-mid); font-size: 12px; justify-content: center;
  border-style: dashed; min-width: 96px; min-height: 52px; background: none;
}
.cmp-bar-actions { display: flex; align-items: center; gap: 10px; flex: none; }

/* 按鈕（沿官網語彙的輕量版） */
.cmp-btn-dark {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px; border-radius: 999px; border: 0;
  background: var(--text-charcoal); color: var(--white);
  font-family: var(--sans); font-size: 13.5px; letter-spacing: 0.08em;
  text-decoration: none; cursor: pointer;
}
.cmp-btn-dark:hover { background: var(--brand-grey-dark); }
.cmp-btn-dark.disabled { background: var(--grey-3); cursor: not-allowed; }
.cmp-btn-dark:focus-visible, .cmp-btn-ghost:focus-visible { outline: 2px solid var(--text-charcoal); outline-offset: 2px; }
.cmp-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: none; border: 1px solid var(--grey-3);
  color: var(--brand-grey-dark); font-size: 13px; cursor: pointer; text-decoration: none;
}
.cmp-btn-ghost:hover { border-color: var(--text-charcoal); color: var(--text-charcoal); }

/* ── bottom sheet（手機查看已選）── */
.cmp-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 59;
  background: var(--white); border-top-left-radius: 20px; border-top-right-radius: 20px;
  box-shadow: 0 -12px 40px rgba(0,0,0,0.14);
  transform: translateY(110%); transition: transform .25s ease;
  padding: 14px 20px calc(96px + env(safe-area-inset-bottom));
}
.cmp-sheet.open { transform: translateY(0); }
.cmp-sheet-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--wide); font-size: 12px; letter-spacing: 0.12em; color: var(--text-mid);
  margin-bottom: 8px;
}
.cmp-sheet-close { border: 0; background: none; color: var(--text-mid); min-height: 44px; cursor: pointer; }
.cmp-sheet-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--line);
}
.cmp-sheet-row img { width: 48px; height: 48px; object-fit: cover; border-radius: 10px; }
.cmp-sheet-row span { flex: 1; font-size: 14px; color: var(--text-charcoal); }

/* ── 分類切換對話框 ── */
.cmp-dialog-backdrop {
  position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.cmp-dialog {
  background: var(--white); border-radius: 20px; max-width: 420px; width: 100%;
  padding: 26px 26px 22px;
}
.cmp-dialog h3 { font-family: var(--serif); font-weight: 500; font-size: 19px; margin: 0 0 10px; color: var(--text-charcoal); }
.cmp-dialog p { font-size: 14px; line-height: 1.8; color: var(--brand-grey-dark); margin: 0 0 18px; }
.cmp-dialog-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ── 提示 ── */
.cmp-toast {
  position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(8px); z-index: 90;
  background: var(--text-charcoal); color: var(--white);
  font-size: 13.5px; padding: 10px 18px; border-radius: 999px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.cmp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── 手機：浮動列精簡 ── */
@media (max-width: 640px) {
  .cmp-bar-inner { padding: 10px 14px; gap: 10px; }
  .cmp-slot-name { display: none; }
  .cmp-slot { padding: 3px; border-radius: 10px; }
  .cmp-slot-empty { min-width: 52px; min-height: 46px; font-size: 11px; }
  .cmp-slot-x { width: 26px; height: 26px; }
  .cmp-btn-ghost[data-cmp-clear] { display: none; }  /* 手機：清除放在 bottom sheet 內操作 */
  .cmp-btn-dark { padding: 0 18px; }
}

/* ══════════ 比較頁 ══════════ */
.cmp-page { max-width: 1120px; margin: 0 auto; padding: 120px 20px 80px; }
.cmp-page-head { margin-bottom: 28px; }
.cmp-page-head .tag {
  font-family: var(--wide); font-size: 11px; letter-spacing: 0.18em; color: var(--text-mid);
}
.cmp-page-head h1 { font-family: var(--serif); font-weight: 500; font-size: 34px; margin: 10px 0 12px; color: var(--text-charcoal); }
.cmp-page-head p { font-size: 14.5px; line-height: 1.9; color: var(--brand-grey-dark); margin: 0 0 18px; }
.cmp-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.cmp-notice {
  border: 1px solid var(--line); background: var(--offwhite); border-radius: 14px;
  padding: 14px 18px; font-size: 13.5px; color: var(--brand-grey-dark); margin-bottom: 20px;
}

/* 比較區：規格名稱欄固定，商品欄可橫滑（手機） */
.cmp-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  border: 1px solid var(--line); border-radius: 18px; background: var(--white);
}
.cmp-grid { display: grid; min-width: 100%; }
/* 欄寬由 JS 依款數設定：--cmp-cols */
.cmp-grid {
  grid-template-columns: minmax(96px, 150px) repeat(var(--cmp-cols, 3), minmax(200px, 1fr));
}
.cmp-cell {
  padding: 12px 14px; font-size: 13.5px; line-height: 1.75; color: var(--text-charcoal);
  border-top: 1px solid var(--line); word-break: break-word; white-space: pre-line;
  scroll-snap-align: start;
}
.cmp-cell.label {
  position: sticky; left: 0; z-index: 2; background: var(--offwhite);
  font-size: 12.5px; color: var(--brand-grey-dark); font-weight: 500;
  border-right: 1px solid var(--line);
}
.cmp-row-alt .cmp-cell { background: #FCFCFB; }
.cmp-row-alt .cmp-cell.label { background: #F5F5F3; }

/* 商品標題區（sticky） */
.cmp-headrow .cmp-cell { border-top: 0; }
.cmp-prod-head { text-align: left; padding: 16px 14px 14px; }
.cmp-prod-head img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; background: var(--grey-1);
}
.cmp-prod-head .noimg { width: 100%; aspect-ratio: 4/3; border-radius: 12px; background: var(--grey-1); display: block; }
.cmp-prod-head h2 { font-family: var(--sans); font-weight: 500; font-size: 15.5px; margin: 10px 0 2px; }
.cmp-prod-head h2 a { color: var(--text-charcoal); text-decoration: none; }
.cmp-prod-head h2 a:hover { text-decoration: underline; }
.cmp-prod-head .cat { font-family: var(--wide); font-size: 10.5px; letter-spacing: 0.14em; color: var(--text-mid); }
.cmp-prod-head .price { display: block; font-size: 13.5px; color: var(--text-charcoal); margin: 6px 0 10px; }
.cmp-prod-head .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.cmp-prod-head .acts a, .cmp-prod-head .acts button {
  min-height: 44px; padding: 0 12px; font-size: 12px;
}

/* 區塊標題列 */
.cmp-section-title {
  grid-column: 1 / -1; padding: 22px 14px 8px;
  font-family: var(--wide); font-size: 11px; letter-spacing: 0.16em; color: var(--text-mid);
  border-top: 1px solid var(--line); background: var(--white);
}

/* 工具列 */
.cmp-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; }
.cmp-tools label { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--brand-grey-dark); cursor: pointer; min-height: 44px; }
.cmp-tools input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--text-charcoal); }
.cmp-swipe-hint { display: none; font-size: 12px; color: var(--text-mid); }

/* 底部 CTA */
.cmp-cta { margin-top: 34px; text-align: center; }
.cmp-cta .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 767px) {
  .cmp-page { padding: 92px 14px 60px; }
  .cmp-page-head h1 { font-size: 27px; }
  .cmp-swipe-hint { display: block; }
  .cmp-grid { grid-template-columns: minmax(84px, 96px) repeat(var(--cmp-cols, 3), minmax(188px, 220px)); }
  .cmp-cell { font-size: 13px; padding: 10px 10px; }
}
@media (min-width: 1024px) {
  .cmp-headrow .cmp-cell { position: sticky; top: 0; z-index: 3; background: var(--white); box-shadow: 0 1px 0 var(--line); }
  .cmp-headrow .cmp-cell.label { z-index: 4; background: var(--offwhite); }
}