/* ===========================================================
   商品一覧（template-parts/products-list.php）固有。元は products.html の <style>
   すべての商品・カテゴリー・利用シーン・検索で共用。パンくず・ページ送り・カード・見出し帯は style.css
   =========================================================== */

/* 1カラム。トップと同じ5列グリッド */
.gm-plist{padding-top:22px;padding-bottom:80px}

/* ページ見出し＋カテゴリー説明文（タームの説明。SEOの本体） */
.gm-phead h1{font-size:2rem;font-weight:700;letter-spacing:.06em;line-height:1.35;width:fit-content}
.gm-phead h1::after{content:"";display:block;width:100%;height:4px;background:var(--gm-green);margin:10px 0 0;border-radius:2px}
.gm-phead .lead{font-size:1rem;color:#444;line-height:1.9;margin-top:20px;max-width:62em}
.gm-phead .lead p+p{margin-top:10px}
.gm-phead .lead a{color:var(--gm-green-dark);text-decoration:underline;text-underline-offset:3px}

/* 並び替え・件数バー */
.gm-toolbar{display:flex;align-items:center;gap:16px;margin-top:26px;padding:13px 0;border-top:1px solid var(--gm-line);border-bottom:1px solid var(--gm-line)}
.gm-toolbar .cnt{font-size:.92rem;color:var(--gm-sub)}
.gm-toolbar .cnt b{color:var(--gm-ink);font-weight:700}
.gm-toolbar .sort{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:.9rem;color:var(--gm-sub)}
.gm-toolbar select{font:inherit;font-size:.92rem;color:var(--gm-ink);padding:8px 12px;border:1px solid #cfd3c6;border-radius:6px;background:#fff;cursor:pointer}
.gm-toolbar button{font:inherit;font-size:.9rem;padding:8px 14px;border:1px solid var(--gm-green);border-radius:6px;background:#fff;color:var(--gm-green-dark);cursor:pointer}

/* 商品グリッド（一覧は行の間隔を広めに） */
.gm-plist .gm-grid5{gap:34px 18px;margin-top:28px}
.gm-plist .gm-none{margin-top:28px;color:var(--gm-sub)}

/* 見積り誘導（相談枠の見た目は style.css の .gm-ask。STEP20 でオレンジのボタンをやめて全体と同じに。一覧は上の余白だけ違う） */
.gm-plist .gm-ask{margin-top:52px}

/* 下部の回遊ブロック（見出しは緑の帯 .gm-h2） */
.gm-rel{border-top:1px solid var(--gm-line);margin-top:60px;padding-top:44px}
.gm-rel+.gm-rel{margin-top:48px}
.gm-rel .gm-guides{grid-template-columns:repeat(3,1fr)}

@media (max-width:960px){
  .gm-plist{padding-bottom:56px}
  .gm-plist .gm-grid5{gap:28px 24px}
  .gm-rel .gm-guides{grid-template-columns:repeat(2,1fr)}
  .gm-phead h1{font-size:1.7rem}
}
@media (max-width:640px){
  .gm-phead h1{font-size:1.45rem}
  .gm-phead .lead{font-size:.95rem;margin-top:16px}
  .gm-toolbar{flex-wrap:wrap;gap:10px 14px}
  .gm-toolbar .sort{margin-left:0;width:100%}
  .gm-toolbar select{flex:1}
  .gm-plist .gm-grid5{gap:26px}
  .gm-rel .gm-guides{grid-template-columns:1fr}
}