/* ふるさとコスパ — デザイン案 2a(バー比較型)の実装
   トークンは design comp の HANDOFF NOTES — 2a に準拠:
   面 #f4f5f7 / カード #ffffff / 罫 #e3e6ea / 文字 #171a1f・#6b7280
   値のアクセント oklch(0.62 0.13 155) / 操作系アクセント oklch(0.52 0.12 250)
   角丸 8-12px / 書体 Noto Sans JP + IBM Plex Mono(数値) */

:root {
  --surface: #f4f5f7;
  --card: #ffffff;
  --border: #e3e6ea;
  --border-strong: #dcdfe4;
  --text: #171a1f;
  --muted: #6b7280;
  --faint: #9aa3ad;
  --value-accent: oklch(0.62 0.13 155);
  --value-accent-bg: oklch(0.96 0.03 155);
  --value-accent-fg: oklch(0.42 0.11 155);
  --action-accent: oklch(0.52 0.12 250);
  --action-accent-hover: oklch(0.42 0.14 250);
  --flag-bg: #f7efe2;
  --flag-fg: #8a5a2a;
  --dark: #171a1f;
  --radius-s: 8px;
  --radius-m: 12px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: "Noto Sans JP", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 画面上は見せず、スクリーンリーダー・検索エンジンのテキスト抽出には
   残す標準的な手法(SEO対応。visual branding自体はbuttonなのでh1にできない
   ため、別に隠しh1を用意する)。 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mono {
  font-family: "IBM Plex Mono", monospace;
}

a {
  color: var(--action-accent);
}
a:hover {
  color: var(--action-accent-hover);
}

button {
  font-family: inherit;
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 2px solid var(--action-accent);
  outline-offset: 2px;
}

.app {
  max-width: 1120px;
  margin: 0 auto;
  padding-bottom: 96px; /* 下部固定バーの分の余白(モバイル) */
}

/* ── ヘッダー ─────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.01em;
  white-space: nowrap;
  /* buttonタグにしたことで乗ってくるデフォルトスタイルを打ち消す
     (ロゴ/サイト名を押すとフィルター解除して初期表示に戻る、ユーザー指示)。 */
  border: none;
  background: none;
  padding: 0;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}
.brand:hover {
  opacity: 0.8;
}
.brand-logo {
  border-radius: 6px;
  flex: none;
}

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 520px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  padding: 12px 16px;
  background: #fbfbfc;
}

.search-icon {
  font-size: 15px;
  color: var(--faint);
}

.search input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 16px;
  width: 100%;
  color: var(--text);
}
.search input::placeholder {
  color: var(--faint);
}

.search-clear {
  flex: none;
  border: none;
  background: var(--border);
  color: var(--muted);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
.search-clear:hover {
  background: var(--border-strong);
  color: var(--text);
}
.search-clear.hidden {
  display: none;
}

.spacer {
  flex: 1;
}

.updated {
  font-size: 11px;
  color: var(--faint);
  white-space: nowrap;
}

/* カテゴリー選択・検索のたびにSupabaseへ追加のデータを取りに行っている間の
   簡易インジケーター(遅延ロード対応、2026年8月7日追加)。常時表示のupdated
   ラベルの隣に置き、読み込み中だけ出す。 */
.loading-indicator {
  font-size: 12px;
  font-weight: 600;
  color: var(--action-accent);
  white-space: nowrap;
}
.loading-indicator.hidden {
  display: none;
}

.ext-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--action-accent);
  background: #ffffff;
  border: 1.5px solid var(--action-accent);
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 999px;
}
.ext-link:hover {
  background: var(--action-accent);
  color: #ffffff;
}

/* ── ツールバー(カテゴリ・並べ替え) ───────────── */
.toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.cats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tab {
  border: 1px solid var(--border-strong);
  background: #ffffff;
  color: #4b5563;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: var(--radius-s);
  white-space: nowrap;
}
.tab.active {
  border-color: var(--action-accent);
  background: var(--action-accent);
  color: #ffffff;
}

/* 中分類チップ: 大分類タブより一段控えめな見た目にして階層を区別する */
.mids {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.mid-chip {
  border: 1px solid transparent;
  background: var(--surface);
  color: var(--muted);
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.mid-chip.active {
  background: var(--value-accent-bg);
  color: var(--value-accent-fg);
  font-weight: 600;
}

/* サブサブカテゴリー(具体的カテゴリー)チップ: 中分類より小さく・枠線のみで
   さらに一段控えめにし、スクロールせずに直接ジャンプできるようにする */
.leaves {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  padding-top: 2px;
}
.leaves.hidden {
  display: none;
}

.leaf-chip {
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--muted);
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.leaf-chip.active {
  border-color: var(--action-accent);
  color: var(--action-accent);
  font-weight: 600;
}
/* カテゴリー数を絞るのではなく折りたたむための「もっと見る」チップ。
   通常のleaf-chipと区別できるよう破線にする(.show-moreと同じ考え方)。 */
.leaf-chip--more {
  border-style: dashed;
  color: var(--action-accent);
  font-weight: 600;
}

/* 単位(円/kg・円/個等)フィルター。同じカテゴリーでも単位が違う商品が
   多いため、混同を避けて絞り込めるようにする。数値らしさを出すため
   IBM Plex Monoにする */
.units {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  padding-top: 2px;
}
.units.hidden {
  display: none;
}

.unit-chip {
  font-family: "IBM Plex Mono", monospace;
  border: 1px solid var(--border-strong);
  background: #fffbea;
  color: #8a6d00;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.unit-chip.active {
  border-color: #8a6d00;
  background: #8a6d00;
  color: #ffffff;
  font-weight: 600;
}

/* 還元ランク(A〜E・―)での絞り込み。単位フィルターと違い、絞り込み対象が
   無いカテゴリーでも「還元ランクという概念がある」ことが分かるよう常に表示する。 */
.ranks {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  padding-top: 2px;
}

.rank-chip {
  font-family: "IBM Plex Mono", monospace;
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--muted);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.rank-chip.active {
  border-color: var(--action-accent);
  background: var(--action-accent);
  color: #ffffff;
  font-weight: 600;
}

/* カテゴリー内で単位ごとに区切る小見出し(具体的カテゴリー見出しより1段小さい) */
.unit-heading {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 10px 20px 4px;
  margin: 0;
}

/* カテゴリー別の小見出し(1画面に複数の具体的カテゴリーが並ぶとき) */
.category-section {
  margin-bottom: 8px;
}

.category-heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  padding: 14px 20px 4px;
  margin: 0;
}

.show-more {
  display: block;
  margin: 4px 20px 16px;
  padding: 10px;
  width: calc(100% - 40px);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--action-accent);
  font-size: 12.5px;
  font-weight: 600;
}
.show-more:hover {
  background: var(--surface);
}

.sortbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sortbar-label {
  font-size: 12px;
  color: var(--muted);
}

.sorts {
  display: flex;
  gap: 6px;
}

.sort-btn {
  border: 1px solid var(--border-strong);
  background: #ffffff;
  color: #4b5563;
  font-size: 12.5px;
  padding: 7px 13px;
  border-radius: var(--radius-s);
  white-space: nowrap;
}
.sort-btn.active {
  border-color: #171a1f;
  background: #171a1f;
  color: #ffffff;
}

.unknown-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  padding: 0;
  margin-left: 4px;
}

.checkbox {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  background: #ffffff;
  color: #ffffff;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.unknown-toggle.on .checkbox {
  border-color: var(--action-accent);
  background: var(--action-accent);
}

.unknown-toggle span:last-child {
  font-size: 12.5px;
  color: #4b5563;
  white-space: nowrap;
}

/* カード表示⇔一覧表示の切り替え */
.view-toggle {
  display: flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  overflow: hidden;
  margin-left: 4px;
}
.view-toggle-btn {
  border: none;
  background: var(--card);
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
}
.view-toggle-btn + .view-toggle-btn {
  border-left: 1px solid var(--border-strong);
}
.view-toggle-btn.active {
  background: #171a1f;
  color: #ffffff;
}

.filter-reset {
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-s);
  white-space: nowrap;
  margin-left: 4px;
}
.filter-reset:hover {
  background: var(--surface);
  color: var(--text);
}

.count {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}

/* ── カード一覧 ───────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 20px;
}

.card {
  display: flex;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 18px;
}
.card.unknown {
  opacity: 0.62;
}
/* 拡張機能で発見した商品(DB未登録)を示す控えめな印。一般の閲覧者向けの
   説明は無く、右上に小さいドットが出るだけ(ホバーでtitle表示)。 */
.card.card--ext {
  position: relative;
}
.card.card--ext::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.5;
}

.card-image {
  width: 112px;
  height: 112px;
  flex: none;
  border-radius: 10px;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, #eceff3 0 8px, #e4e8ee 8px 16px);
  display: flex;
  align-items: flex-end;
  padding: 8px;
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.card-image .placeholder-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  color: var(--faint);
}

.card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.card-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.5;
}

.rank-badge {
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  color: #9aa3ad;
  background: #f1f3f5;
  padding: 3px 9px;
  border-radius: 999px;
}
/* 還元ランク(市場価値÷寄付額をA〜Eに丸めたもの)。色は意味順(良い→悪い)に
   緑→青緑→中立グレー→黄→赤で並べる。数値は出さず色と文字だけで粗く伝える。 */
.rank-badge.rank-A {
  color: oklch(0.4 0.13 155);
  background: oklch(0.94 0.05 155);
}
.rank-badge.rank-B {
  color: oklch(0.42 0.1 190);
  background: oklch(0.94 0.04 190);
}
.rank-badge.rank-C {
  color: #4b5563;
  background: #eef0f2;
}
.rank-badge.rank-D {
  color: oklch(0.5 0.13 70);
  background: oklch(0.94 0.06 80);
}
.rank-badge.rank-E {
  color: oklch(0.5 0.15 25);
  background: oklch(0.94 0.05 25);
}

.card-unit {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.unit-value {
  font-family: "IBM Plex Mono", monospace;
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.unit-suffix {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}

.card-bar {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.bar-track {
  height: 8px;
  border-radius: 999px;
  background: #eceff3;
  overflow: hidden;
}
.bar-fill {
  height: 8px;
  border-radius: 999px;
  background: var(--value-accent);
}
.card.unknown .bar-fill {
  background: #dfe3e8;
}

.diff-label {
  font-size: 11px;
  color: var(--muted);
}
.diff-label.is-min {
  color: var(--value-accent-fg);
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--muted);
}
.card-meta .sep {
  color: #c9ced6;
}

.flag {
  font-size: 10.5px;
  color: var(--flag-fg);
  background: var(--flag-bg);
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}

.card-actions {
  display: flex;
  gap: 8px;
  padding-top: 2px;
}

.fav-btn {
  border: 1px solid var(--border-strong);
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  padding: 7px 13px;
  border-radius: var(--radius-s);
  white-space: nowrap;
}
.fav-btn.on {
  border-color: oklch(0.72 0.09 155);
  background: var(--value-accent-bg);
  color: var(--value-accent-fg);
}

.rakuten-link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--action-accent);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  padding: 11px 16px;
  border-radius: var(--radius-s);
  white-space: nowrap;
  text-decoration: none;
  min-height: 44px; /* タップしやすい最小サイズ */
}
.rakuten-link:hover {
  background: var(--action-accent-hover);
}

/* 一覧表示(コンパクト行)。画像付きカードのDOM構造はそのままに、CSSだけで
   1行の横並びに変形する。バー・詳細メタ情報は場所を取りすぎるため非表示にし、
   商品名・単価・アクションだけ横一列に残す。詳細を見たい場合はカード表示に
   戻ってもらう想定。 */
.grid.list-view {
  grid-template-columns: 1fr;
  gap: 6px;
}
.grid.list-view .card {
  padding: 8px 14px;
  gap: 12px;
  /* .cardはgridアイテム(.grid.list-viewはdisplay:grid)。grid/flexアイテムは
     デフォルトmin-width:autoで中身の実サイズより縮まないため、これが無いと
     長いタイトルの分だけ.card自体が横に広がり、結果としてテーブル全体が
     はみ出す(ユーザー報告のバグ)。子要素側にmin-width:0を置いても、途中の
     階層のどれか1つでも指定漏れがあれば伝播が途切れるため、チェーン全部に
     必要。 */
  min-width: 0;
}
.grid.list-view .card-image {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  padding: 4px;
}
.grid.list-view .card-body {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.grid.list-view .card-top {
  flex: 1;
  min-width: 0;
}
.grid.list-view .card-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  min-width: 0;
}
.grid.list-view .card-unit {
  flex: none;
}
.grid.list-view .unit-value {
  font-size: 16px;
}
.grid.list-view .card-bar,
.grid.list-view .card-meta {
  display: none;
}
.grid.list-view .card-actions {
  flex: none;
  padding-top: 0;
}
.grid.list-view .rakuten-link {
  min-height: 32px;
  padding: 6px 12px;
}

.empty-state {
  grid-column: 1 / -1;
  padding: 48px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* ── 下部固定 比較バー ────────────────────── */
.compare-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: var(--dark);
  color: #ffffff;
  z-index: 20;
}
.compare-bar.hidden {
  display: none;
}

.compare-title {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.compare-chips {
  display: flex;
  gap: 10px;
  flex: 1;
  overflow: hidden;
}

.compare-chip {
  font-size: 11.5px;
  color: #c3c7cc;
  background: #24282e;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.compare-clear {
  border: 1px solid #3a3f47;
  background: transparent;
  color: #c3c7cc;
  font-size: 12px;
  padding: 7px 12px;
  border-radius: var(--radius-s);
  white-space: nowrap;
}

.compare-open {
  border: none;
  background: var(--value-accent);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-s);
  white-space: nowrap;
}

/* ── 比較モーダル ─────────────────────────── */
.modal.hidden {
  display: none;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(23, 26, 31, 0.5);
  z-index: 30;
}
.modal-panel {
  position: fixed;
  z-index: 31;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 64px));
  background: var(--card);
  border-radius: var(--radius-m);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 14px;
}
.modal-close {
  border: none;
  background: transparent;
  font-size: 16px;
  color: var(--muted);
  padding: 4px;
}
.modal-body {
  overflow-y: auto;
  padding: 8px 20px 20px;
}
.modal-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.modal-row:last-child {
  border-bottom: none;
}
.modal-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.modal-row-name {
  font-size: 13px;
  color: var(--text);
  flex: 1;
  min-width: 0;
}
.modal-row-unit {
  font-family: "IBM Plex Mono", monospace;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
.modal-row-meta {
  font-size: 11.5px;
  color: var(--muted);
}

/* ── 注記 ─────────────────────────────────── */
.disclaimer {
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--muted);
  padding: 16px 20px 32px;
}

/* アフィリエイトリンクの開示(景品表示法のステマ規制対応)。単なる免責事項の
   注記に埋もれて見落とされないよう、通常のdisclaimerより少し強調する。 */
.disclaimer--affiliate {
  padding-top: 0;
  color: var(--text);
  font-weight: 600;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px 28px;
  border-top: 1px solid var(--border);
}
.site-footer-links {
  display: flex;
  gap: 16px;
  font-size: 12px;
}
.site-footer-links a {
  color: var(--muted);
}
.site-footer-links a:hover {
  color: var(--action-accent);
}

/* ── レスポンシブ(スマホ) ─────────────────── */
@media (max-width: 720px) {
  .search {
    /* 検索窓自体は必要な操作のためSPでも表示する。brand行の直下に
       独立した行として折り返させるため flex-basis:100% にしている
       (spacerと同じ「次を強制改行する」テクニック)。 */
    order: 1;
    flex-basis: 100%;
    max-width: none;
    margin-top: 4px;
  }

  .topbar {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .spacer {
    /* flex-basis:100%の要素は自分自身は幅0のまま強制的に行送りするため、
       ここでbrandの次を新しい行に折り返すために使う(要素追加不要) */
    flex-basis: 100%;
    height: 0;
    order: 2;
  }

  .ext-link {
    order: 3;
    font-size: 12px;
    padding: 7px 12px;
  }

  .loading-indicator {
    order: 3;
  }

  .updated {
    order: 4;
    margin-left: auto;
  }

  .toolbar {
    padding: 10px 16px;
  }

  .cats {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

  .sortbar {
    display: none; /* 下部固定バーに移す */
  }

  .grid {
    grid-template-columns: 1fr;
    padding: 12px;
    gap: 10px;
  }

  .card {
    padding: 14px;
    gap: 12px;
  }

  .card-image {
    width: 72px;
    height: 72px;
  }

  .unit-value {
    font-size: 21px;
  }

  .fav-btn {
    min-height: 44px;
  }

  .mobile-sortbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    background: var(--card);
    border-top: 1px solid var(--border);
    z-index: 15;
  }
  .mobile-sortbar.hidden {
    display: none;
  }
  .mobile-sortbar .sort-btn {
    flex: 1;
    min-height: 44px;
    text-align: center;
  }

  .compare-bar {
    bottom: 60px; /* 下部ソートバーの上に重ねる */
  }
}

@media (min-width: 721px) {
  .mobile-sortbar {
    display: none;
  }
}