にする。
押しても何も起きないリンクを置かない（押せそうで押せない状態を作らない）ため。
見た目は同じだが、リンクではないのでホバー効果もカーソル変化も出ない。 */
article.card .card-link.is-pending { color: inherit; display: flex; flex-direction: column; height: 100%; cursor: default; }
.badge.pending { background: var(--c-paper-2); border-color: var(--c-line); color: var(--color-text-sub); font-weight: var(--fw-normal); }
/* --- サムネイル：1:1 正方形・contain（箱や付属品をトリミングしない） --- */
article.card .card-thumb {
position: relative;
aspect-ratio: 1 / 1;
display: block;
padding: 0;
border: 0;
border-radius: 0;
overflow: hidden;
background: var(--color-bg-sub);
}
article.card .card-thumb img {
width: 100%; height: 100%;
object-fit: contain; /* cover 禁止：状態・付属品の情報が欠落するため */
display: block;
}
/* ホバー効果は「リンクであるカード」だけに出す。
a.card-link にスコープしないと、リンクでない .is-pending なカードまで
反応して「押せる」と誤解させる */
article.card a.card-link:hover .card-thumb { opacity: .85; } /* hover は影ではなく透明度で表現 */
/* 希少性バッジのみ画像上にオーバーレイ（保証/中古バッジは廃止） */
article.card .card-flag {
position: absolute; left: 0; top: 0;
font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1;
padding: 5px 8px;
background: var(--color-brand); color: var(--color-accent);
}
/* --- 本文：左右パディング0で画像と左端を揃える --- */
article.card .card-body { padding: 8px 0 0; display: flex; flex-direction: column; gap: 4px; flex: 1; }
article.card .card-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; justify-content: flex-start; margin-top: 0; }
article.card .price { font-family: inherit; font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--color-text); }
article.card .price small { font-size: var(--fs-xs); font-weight: var(--fw-normal); color: var(--color-text-sub); }
article.card .card-name {
font-weight: var(--fw-normal); font-size: var(--fs-base); line-height: var(--lh-card); margin: 0; color: var(--color-text);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
article.card a.card-link:hover .card-name { color: var(--color-text); text-decoration: underline; }
/* ★状態ランク（.grade）のCSSは 2026-09-15 に削除した。
絶対ルール18 で一覧カードから「状態」の表示を外したため（表示は商品ページだけ）。
CSSが残っていると「カードに状態を出してよい」と誤解させる。
カードの状態は項目51 が止める。戻すなら絶対ルール18 を先に改訂すること。 */
/* --- 価格・在庫（カード外でも使用するため .card スコープ外に残す） --- */
.price { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--color-text); }
.price small { font-size: var(--fs-xs); font-weight: var(--fw-normal); color: var(--color-text-sub); }
.stock { font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.stock.in { color: var(--color-state-in); } /* 使うのは商品ページの在庫欄。カードには出さない（絶対ルール18） */
.stock.low { color: var(--color-state-low); }
.stock.out { color: var(--color-state-out); }
/* ★一覧カードの在庫なしバッジ（article.card .stock.out）のCSSは 2026-09-15 に削除した。
絶対ルール18 で**カードから在庫のバッジごと外した**ため。
カードが見せてよいのは画像・価格・商品名まで。在庫の事実は商品ページの中で示す
（在庫サマリとコンディション別の在庫欄）。一覧の在庫は check.sh 項目36 が
リンク先の商品ページで数える。カードにバッジを戻すと項目51 が止める。 */
/* ★レビュー・評価用のCSS（.rating / .review / .rating-summary ほか）は
2026-08-31 に削除した。絶対ルール6 は「実際に取得していないレビュー・評価を
書かない」と定めており（景表法・ステマ規制・Google の構造化データポリシー）、
当店はレビューを1件も持っていない（HTML・JS での使用は実測0件だった）。
★CSSが残っていると「レビュー欄を作ってよい」と誤解させる。
規約を守る手段ではなく、破る手段になるので置かない。
レビューを実際に集める運用を始めるときに、あらためて作ること。 */
article.card .card-cat { display: none; }
/* 商品詳細ページのメイン画像・サムネ（.main-img / .thumbs）は今回のP3対象外。
カード側の t-* は廃止したが、詳細ページ用に地色定義のみ残す */
.main-img.t-sw, .main-img.t-ps, .main-img.t-retro, .main-img.t-gb, .main-img.t-soft { background: var(--color-bg-sub); color: var(--color-text); }
.main-img.t-premium { background: var(--color-brand); color: var(--color-accent); }
/* =========================== パンくず =========================== */
/* リンクに縦 padding 12px を持たせた分（+24px）、帯自身の padding を 14px → 4px に
詰めて、パンくず全体の高さを従来（51.8px）とほぼ同じ 55.8px に保つ */
.breadcrumb { padding: var(--space-1) 0; font-size: var(--fs-sm); }
/* align-items は既定の stretch のままだと、リンクを含む li（47.8px）に合わせて
テキストのみの li（「トップ」や現在地）まで引き伸ばされ、文字が上端に取り残される。
baseline 揃えにして、リンクと素のテキストの行を一致させる */
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0; padding: 0; }
.breadcrumb li::after { content: "›"; margin-left: 6px; color: var(--c-gray); }
.breadcrumb li:last-child::after { content: ""; }
/* 23.8px しかなくタップ領域 44px 未達。inline のままでは縦 padding が行送りに
反映されず上下の要素と重なるため、inline-block にして 47.8px を確保する */
/* 横paddingが0だと「種別」「RPG」等の短いリンクが 23〜28px 幅にしかならず、
高さだけ44pxを満たしても当たり判定が細長い棒になる。左右にも余白を取る */
.breadcrumb a { color: var(--c-purple-d); text-decoration: none; font-weight: var(--fw-normal); display: inline-block; padding: var(--space-3) var(--space-2); }
/* =========================== 本文 / 記事 =========================== */
.page-head { padding: 28px 0 8px; }
.page-head h1 { font-family: var(--font-display); font-weight: var(--fw-bold); line-height: var(--lh-heading); font-size: clamp(22px, 4vw, 28px); margin: 0 0 10px; color: var(--c-purple); }
.page-head .lead { font-size: var(--fs-base); max-width: 72ch; color: #3a3f47; }
.prose { max-width: 760px; }
.prose h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-xl); margin: 38px 0 14px; padding: 0 0 6px 0; background: transparent; border: none; border-bottom: var(--border); display: block; }
.prose h3 { font-weight: var(--fw-bold); font-size: var(--fs-lg); margin: 26px 0 10px; padding-left: 12px; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 1.4em; }
.prose li { margin-bottom: 6px; }
.prose a { font-weight: var(--fw-bold); }
/* 情報ボックス */
.callout { border: var(--border); border-left: var(--border); border-radius: var(--radius-md); padding: 16px 20px; background: var(--c-paper-2); margin: 22px 0; }
.callout.tip { background: var(--c-paper-2); border-left-color: var(--c-instock); }
.callout.warn { background: var(--c-paper-2); border-left-color: var(--c-low); }
.callout strong { display: block; font-size: var(--fs-base); margin-bottom: 5px; }
/* テーブル */
.table-wrap { overflow-x: auto; margin: 20px 0; }
table.data { width: 100%; border-collapse: collapse; background: #fff; border: var(--border); border-radius: var(--radius-md); overflow: hidden; }
table.data th, table.data td { padding: 11px 14px; text-align: left; border-bottom: var(--border); }
table.data thead th { background: var(--c-purple); color: #fff; font-weight: var(--fw-bold); }
table.data tbody tr:nth-child(even) { background: var(--c-paper-2); }
table.data tr:last-child td { border-bottom: none; }
/* =========================== 商品詳細 =========================== */
.product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; padding-top: 20px; }
/* 商品詳細のメイン画像（2026-09-02）。
★以前はここが ![]()
ではなく、商品名の文字を並べた
だった。
画像ファイル自体は最初から存在し、一覧カードと JSON-LD では使っていたのに、
詳細ページだけが表示していなかった。一覧では絵が出て、押して開いた先で
消えるので壊れて見える。中古の購買判断は写真が主なので、詳細で出す。
★地色（.main-img.t-*）は透過部分のために残している。 */
.gallery .main-img { display: block; width: 100%; height: auto; aspect-ratio: 1/1; object-fit: contain; border: var(--border); border-radius: var(--radius-md); background: var(--c-paper-2); }
/* .thumbs は現在参照0件。実写を複数枚載せられるようになったら戻す。
★戻すまでマークアップを置かないこと。中身の無いサムネを並べると
「写真1・写真2」という押せない箱になる（絶対ルール14）。実際そうなっていた。
.thumbs { display: flex; gap: 10px; margin-top: 12px; }
.thumbs span { width: 70px; height: 70px; border: var(--border); border-radius: var(--radius-sm); display: grid; place-items: center; font-size: var(--fs-xs); font-weight: var(--fw-normal); cursor: pointer; color: var(--c-gray); background: var(--c-paper-2); }
*/
.product-info h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(22px, 4vw, 28px); margin: 8px 0 12px; line-height: var(--lh-heading); color: var(--c-purple); }
/* コンディション別在庫 */
.offers { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
/* --- 商品ページの販売価格（1商品1価格）------------------------------------
2026-08-12：コンディション別の価格を廃止し、商品ごとに一律の販売価格へ変更した。
価格は商品情報エリアで1回だけ出す。.offer 側には価格を置かない
（2箇所に出すと、片方だけ直したときに可視テキストとJSON-LDがずれる＝絶対ルール5違反）。 */
.product-price { display: grid; gap: 4px; margin: 14px 0 4px; }
.product-price .price { font-size: var(--fs-2xl); }
.price-note { font-size: var(--fs-sm); color: var(--color-text-sub); margin: 0; }
/* 在庫の要約（2026-08-31）。**価格のすぐ下＝最初の画面**に置く。
それまで在庫はコンディション別の一覧の中にしかなく、
4つのコンディションを1つずつ読まないと「買えるのか」が分からなかった。
数字は下の .offer の合計と必ず一致させる（可視どうしの食い違いを作らない）。 */
.stock-summary { font-size: var(--fs-sm); margin: 2px 0 0; line-height: 1.7; }
/* ★--fs-md というトークンは存在しない（2026-08-31 のレビューで発覚）。
未定義の var() は宣言ごと無効になるため、親の 14px のままだった。
在庫の有無は購入判断の起点なので、1段階大きくして視線を止める。 */
.stock-summary b { font-size: var(--fs-base); }
.stock-summary.in b { color: var(--color-state-in); }
.stock-summary.out b { color: var(--color-state-out); }
/* 入荷通知（CV）の主導線（2026-08-31）。在庫0のページで、価格のすぐ下に置く。
それまでボタンは在庫コンディションの中にしかなく、
価格→注記→サマリ→見出し→状態→説明文と辿らないと着けなかった。
開店時は全商品が在庫0なので、ここがサイトで最も押されるボタンになる。 */
.stock-cta { margin: 10px 0 0; }
.stock-cta .btn { width: 100%; max-width: 420px; }
/* ★ほしいものリストは商品ページに1つだけ（絶対ルール19）。在庫の有無で消えないよう
.stock-cta とは別の行に置く（.stock-cta は在庫のあるページには出ない）。 */
.wish-cta { margin: 8px 0 0; }
.wish-cta .btn { width: 100%; max-width: 420px; }
/* ★モバイルでは、これでもまだ最初の画面に入っていなかった（2026-09-08）。
上のコメントは「価格のすぐ下＝最初の画面」と書いているが、375x812 での実測は
ボタンの上端 1,052px。画面の外である。内訳は
ヘッダー112 + パンくず56 + 正方形の画像335 + 余白36 + バッジ・見出し 約150
+ 商品説明136 + 価格ブロックの内側194。**画像と説明文だけで471px**使っていた。
開店時は全商品が在庫0で、この登録がCV（絶対ルール16）。着地して最初に見える面に
「いくらで、買えるのか、どうすればいいか」が無いのは、そのまま離脱になる。
さらに、画面の下56pxは固定のタブバーが覆っている（下の .tabbar と
body の padding-bottom）ので、**実際に使えるのは 812 - 56 = 756px**。
ボタンは「上端が見えている」だけでは押せない。下端で判定すること。
直し方は3つで、いずれもHTMLは触らない（絶対ルール1）。
① 画像の上限を 200px にする（正方形なので、そのまま縦の短縮になる）
② 商品説明を価格ブロックの下へ回す（何かは h1 が言っている。
価格と在庫のほうが先に要る）
③ 価格の注記（.price-note）をボタンの下へ回す
（「先着順」は .stock-summary がボタンの前に述べているので、
注記を下げても先着順の告知はボタンより前に残る＝絶対ルール16 を満たす）
実測（3ds-albw ＝ h1 が3行の最長ケース）：ボタン下端 1,112px → 741px。
h1 の高さは全204ページで最大92px（3行）であることを実測済みなので、
これがワーストケース。**残り15px** が下端とタブバーの間隔。
★対象を :has(.stock-cta) で在庫0のページに限る。
- 在庫のあるページは主導線が .offers の購入ボタンで、ここではない。
画像を小さくする理由が無い。
- 在庫0のページのバッジは「中古」1つだけ（絶対ルール16 が
.badge.warranty を禁じ、項目28 が機械で見ている）。
1つしか無いと確定しているから、grid にしてもバッジが縦に割れない。
在庫のあるページは「中古」＋「動作確認済」の2つが横に並ぶので、
同じことをすると2段になる。**この違いが :has で分ける理由。**
- :has() を解さない古い環境では、この宣言ごと無視されて現状の見た目に戻る。
壊れる方向には倒れない。 */
@media (max-width: 568px) {
.product-layout:has(.stock-cta) { gap: 16px; }
.product-layout:has(.stock-cta) .gallery { max-width: 200px; }
/* 並べ替えのためだけに grid にする。1カラムなので見た目は block と同じ。
★grid にすると隣接マージンの相殺が止まる分だけ縦に伸びる。上の実測値は
それを含んだ後の値なので、ここだけ見て「効いていない」と判断しないこと。 */
.product-info:has(.stock-cta) { display: grid; }
.product-info:has(.stock-cta) > * { order: 2; }
.product-info:has(.stock-cta) > .badge,
.product-info:has(.stock-cta) > h1,
.product-info:has(.stock-cta) > .product-price { order: 1; }
/* .badge は inline-block だが、grid の子になると幅いっぱいに伸びる。
ここだけ内容幅に戻す（他の子は伸びたままでよい）。 */
.product-info:has(.stock-cta) > .badge { justify-self: start; }
.product-price:has(.stock-cta) > * { order: 1; }
.product-price:has(.stock-cta) > .price-note { order: 2; }
}
/* 返品特約の一文（絶対ルール11）。商品ページの callout の下に置く小さな注記。
.price-note と見た目は同じだが、価格の補足とは役割が違うので別名にしている。 */
.legal-note { font-size: var(--fs-sm); color: var(--color-text-sub); margin: 10px 0 0; }
/* 入荷通知ボタンの手前に置く一文（2026-08-28／2026-08-31 に予約から改称）。
在庫切れのコンディションでは「押すと何が起きるのか」が分からないまま
コミットを求める形になっていたため、支払いが発生しないことをその場で示す。
★条件の正本は update/stock-alert/ と update/legal/。ここは結論の一文＋リンクだけにする。 */
.notify-note { font-size: var(--fs-sm); color: var(--color-text-sub); margin: 0 0 10px; line-height: 1.7; }
.notify-note a { font-weight: var(--fw-bold); }
/* 一覧の絞り込み結果の件数。main.js が生成して role="status" を付ける。
絞り込みが効いているときだけ出す（既定は hidden）。 */
.facet-status { font-size: var(--fs-sm); color: var(--color-text-sub); margin: 0 0 12px; }
.offer { border: var(--border); border-radius: var(--radius-md); padding: 16px; background: #fff; display: grid; gap: 6px; }
.offer.best { background: #fff; border-color: var(--c-yellow); border-width: 2px; }
.offer-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cond { font-weight: var(--fw-bold); font-size: var(--fs-base); border: var(--border); border-radius: var(--radius-sm); padding: 2px 12px; background: var(--c-paper-2); color: var(--c-ink); }
/* コンディションの段階（2026-08-27に4段階→6段階）。クラスは序数で持つ。
1 新品、未使用 ／ 2 未使用に近い ／ 3 目立った傷や汚れなし
4 やや傷や汚れあり ／ 5 傷や汚れあり ／ 6 全体的に状態が悪い
★語彙の正本は check.sh 項目35 の CONDS_ALLOWED。ここには対応表だけを書き、
語そのものを増やさない（同じ表を2箇所に持つと必ず片方が腐る）。
★6色に塗り分けない（配色の方針：アクセントは1色だけ）。
実務で要る区別は「注記が要る段（5・6）かどうか」の1本だけなので、そこだけ枠を強める。
★以前あった .cond.good は --border と --c-line が同値のため **完全な no-op** だった
（110箇所のHTMLに書かれていて見た目は変わっていなかった）。
.cond.fair は文字色を --c-gray に落としていたが、地に対して約4.5:1 と
他段（約15:1）より薄く、最も注意が要る段が最も読みにくいという逆転だった。両方やめた。 */
.cond--1, .cond--2, .cond--3, .cond--4 { background: var(--c-paper-2); border-color: var(--c-line); color: var(--c-ink); }
.cond--5, .cond--6 { background: var(--c-paper-2); border-color: var(--color-text); border-width: 2px; color: var(--c-ink); }
.offer-meta { font-size: var(--fs-sm); color: #3a3f47; }
/* コンディション名が長くなったため（最長「目立った傷や汚れなし」）、
幅375pxでは .cond と .stock が1行に収まらない。flex-wrap に任せると
折り返し位置が中途半端になるので、明示的に2段へ切り替える。 */
@media (max-width: 568px) {
.offer-top { flex-direction: column; align-items: flex-start; gap: 6px; }
}
.offer-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
/* 売切表示：親に opacity をかけると子孫の実効コントラストが 1.82:1 まで落ち、
「買えない在庫」を読み取れなくなる。地色と文字色で表現する */
.offer.soldout { background: var(--c-paper-2); }
.offer.soldout .cond { background: #fff; border-color: var(--color-text-sub); color: var(--color-text); }
/* ── 在庫コンディションの切り替え（2026-09-04 追加） ──────────────────
コンディションごとに .offer を縦に並べていた。段階が4つあると縦に長く、
スマートフォンでは「どのコンディションに在庫があるか」を見るだけで
何度もスクロールすることになっていた。畳んでタブで切り替える。
★畳んでも俯瞰は失わない。タブの並びそのものが一覧になっていて、
全コンディションと在庫の有無・点数が**同時に見える**。
上の .stock-summary（合計と内訳）と合わせて二重に俯瞰できる。
★タブに価格を出さない。価格は商品に1つで、可視側は .product-price の
1箇所だけ（絶対ルール3）。ここに出した瞬間に2箇所になる。
コンディションで価格が変わらないことは .price-note が述べている。
★色だけで在庫の有無を伝えない。「在庫3点」「在庫なし」という
文字そのものをタブに載せる（色は補助）。
★JSが無い環境では .is-tabbed が付かず、従来どおり全部が縦に並ぶ。
機能が減るだけで、読めなくなる情報は無い。 */
.cond-tabs-label { font-size: var(--fs-sm); color: var(--color-text-sub); margin: 14px 0 6px; }
.cond-tabs-label b { font-size: var(--fs-base); color: var(--color-text); }
/* タイルは等幅で並べる。flex-wrap だと最後の1枚だけ横に伸びて不揃いになる */
.cond-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 0 0 12px; }
.cond-tab {
flex: 1 1 148px; min-width: 132px; text-align: left; font: inherit; cursor: pointer;
background: #fff; border: 2px solid var(--color-border); border-radius: var(--radius-md);
padding: 9px 12px; display: grid; gap: 2px;
}
.cond-tab-name { font-weight: var(--fw-bold); font-size: var(--fs-sm); line-height: 1.35; }
.cond-tab-stock { font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.cond-tab.is-in .cond-tab-stock { color: var(--color-state-in); }
.cond-tab.is-out .cond-tab-stock { color: var(--color-state-out); }
/* 在庫なしも押せる（状態と入荷通知の導線を見せるため）。地色で区別する */
.cond-tab.is-out { background: var(--c-paper-2); }
.cond-tab:hover { border-color: var(--color-text-sub); }
/* 選択中。枠線の太さは変えない（変えると押すたびに幅がずれる） */
.cond-tab[aria-selected="true"],
.cond-tab[aria-selected="true"]:hover { border-color: var(--c-yellow); background: var(--c-paper-2); }
.cond-tab:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.offers.is-tabbed { margin-top: 0; }
.offers.is-tabbed .offer[hidden] { display: none; }
/* タブに出している名前と在庫を、開いたパネルでもう一度出さない。
同じ語が2行続くと、畳んだ意味が薄れる。
★情報は失わない：名前と在庫はタブに出ており、パネルは
aria-labelledby でそのタブを参照しているので読み上げでも辿れる。 */
.offers.is-tabbed .offer-top { display: none; }
.spec-table th { width: 34%; background: var(--c-paper-2); }
/* FAQ アコーディオン */
.faq-item { border: var(--border); border-radius: var(--radius-md); margin-bottom: 10px; background: #fff; overflow: hidden; }
.faq-item summary { cursor: pointer; padding: 15px 18px; font-weight: var(--fw-bold); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "＋"; font-weight: var(--fw-bold); color: var(--c-gold-t); }
.faq-item[open] summary::after { content: "－"; }
.faq-item summary:hover { background: var(--c-paper-2); }
.faq-item .faq-body { padding: 0 18px 15px; }
/* =========================== 一覧ページ =========================== */
.listing { display: grid; grid-template-columns: 240px 1fr; gap: 30px; align-items: start; padding-top: 8px; }
/* sticky で固定される以上、ビューポートより高いと下端（在庫・評価の絞り込み）に
永久に到達できない。カテゴリツリーを内包するため実際に約2000pxある。
自身をスクロール可能にして、高さに関係なく全項目へ到達できるようにする */
.facets { border: var(--border); border-radius: var(--radius-md); padding: 18px; background: #fff; position: sticky; top: 120px; max-height: calc(100vh - 140px); overflow-y: auto; }
.facets h2 { font-size: var(--fs-base); margin: 0 0 12px; }
.facet-group { margin-bottom: 16px; }
.facet-group h2, .facet-group h3 { font-size: var(--fs-sm); margin: 0 0 8px; color: var(--c-gray); }
/* 23.8px ＋ 隙間 5px。label はチェックボックスの当たり判定そのものなので、
margin（押しても反応しない隙間）を 0 にして縦 padding 12px へ振り替え、47.8px にする。
絞り込みパネルは項目数ぶん縦に伸びるが、960px 未満では position:static なので
スクロールが詰まることはない */
.facet-group label { display: flex; gap: 8px; align-items: center; font-size: var(--fs-sm); margin-bottom: 0; padding: var(--space-3) 0; cursor: pointer; }
.facet-group input { accent-color: var(--c-yellow); }
.listing-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: var(--border); }
.listing-head .count { font-weight: var(--fw-bold); }
.sort select { border: var(--border); border-radius: var(--radius-sm); padding: 8px 14px; font-weight: var(--fw-normal); background: #fff; }
/* ★現在どのページでも使っていない（実測0件）。それでも残している理由：
/products/ は208件を1ページに展開しており（198KB・タグ2,847）、
将来ページ分割するときにこの見た目が要る。
min-width の44pxは、指で押せる大きさ（WCAG 2.5.8）を確保するためのもので、
作り直すと同じ検討をやり直すことになる。**消すなら理由ごと消すこと。** */
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 32px; }
/* 高さは 16px×1.7＋padding16＋border1.6 ＝ 44.8px で足りているが、
1桁ページ（「1」「2」）では幅が約39pxしかない。min-width で 44px を確保し、
2桁以上のときだけ padding ぶん広がるようにする（text-align は中央寄せ） */
.pagination a, .pagination span { border: var(--border); border-radius: var(--radius-sm); padding: 8px 14px; min-width: 44px; text-align: center; text-decoration: none; font-weight: var(--fw-bold); color: var(--c-purple-d); background: #fff; }
.pagination .current { background: var(--c-yellow); color: #2B1A00; border-color: var(--c-gold-d); }
/* =========================== バナー / 特集（白カードに統一） =========================== */
.banner-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 16px; }
.banner { border: var(--border); border-radius: var(--radius-md); padding: 22px; color: var(--c-ink); background: #fff; text-decoration: none; display: block; transition: box-shadow .15s ease; }
.banner:hover { }
/* 未実装のバナー。 ではなく