/* ============================================================
   サンセレクトジャパン 在庫検索 — カテゴリタブ
   現行サイトのピル型ボタンに合わせ、件数バッジを追加する。
   既存 .ssj-cat のピル形状・配色はそのまま活かし、
   name と件数の間隔／バッジ表現のみを補う。
   ============================================================ */

#ssj-cat-tabs .ssj-cat{
  display:inline-flex;
  align-items:center;
  gap:10px;            /* ← 名称と件数が密着する問題の解消 */
  white-space:nowrap;
}

/* 件数バッジ：未選択時は淡いブルー地に濃紺の数字 */
#ssj-cat-tabs .ssj-cat .ssj-cat-n{
  font-size:12px;
  font-weight:800;
  font-variant-numeric:tabular-nums;   /* 桁が変わっても幅が揺れない */
  line-height:1;
  background:#e2ebf5;
  color:#1671cf;
  border-radius:999px;
  padding:4px 9px;
  min-width:32px;
  text-align:center;
}

/* 選択中：白抜きバッジで反転させる */
#ssj-cat-tabs .ssj-cat.active .ssj-cat-n{
  background:rgba(255,255,255,.24);
  color:#fff;
}

#ssj-cat-tabs .ssj-cat-name{ line-height:1.3; }

/* キーボード操作時のフォーカスを明示 */
#ssj-cat-tabs .ssj-cat:focus-visible{
  outline:3px solid #1671cf;
  outline-offset:2px;
}

/* スマホ：4タブを横スクロールで収める */
@media (max-width:600px){
  #ssj-cat-tabs{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:6px;
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #ssj-cat-tabs::-webkit-scrollbar{ display:none; }
  #ssj-cat-tabs .ssj-cat{
    flex:0 0 auto;
    gap:7px;
  }
  #ssj-cat-tabs .ssj-cat .ssj-cat-n{
    font-size:11px;
    padding:3px 7px;
    min-width:28px;
  }
}