@charset "UTF-8";
/*
 * 商品詳細検索（/products/search）の画面の CSS。
 * 2026-10-02 に Product/search.twig の <style> から、このファイルへ移した（R2。中身は同じ）。
 * ⚠ 読み込むのは Product/search.twig の stylesheet ブロックだけ（検索ページ専用）。default_frame.twig の custom.css の後に読まれる。
 * ⚠ css/product_search.css を直接編集しない。このファイルを直してコンパイルする（scss と css は必ず一緒に上げる）：
 *     cd store-dev/html/template/bigboss && sass --no-source-map scss/product_search.scss css/product_search.css
 * ⚠ 変えたら ProductSearch::ASSET_VERSION を上げる（ブラウザに古いファイルが残らないように）。
 * 条件の欄（search_side.twig）・結果（search_main.twig）の見た目もここ。
 */
/* ══════════════════════════════════════════════════════════════
   絞り込み検索
   モバイルファースト。メディアクエリはクラス内にネストする（プロジェクト規約）。
   最小フォントサイズは12px。
   ══════════════════════════════════════════════════════════════ */
.bsc {
  --bsc-surface: #1a1a1a; /* パネル・カードの面 */
  --bsc-surface-2: #222; /* 入力欄・チップの面（サイトで多用されている色）*/
  --bsc-surface-3: #2c2c2c; /* ホバー面 */
  --bsc-line: rgba(255, 255, 255, .10);
  --bsc-line-2: rgba(255, 255, 255, .20);
  --bsc-text: #eceff1;
  --bsc-mute: #9aa0a6;
  /* ══ 配色の規則（1色1役） ══
     サイト既存CSS（html/template/bigboss/css/style.css）の実データに合わせている:
       .btn-default          面 #053769 / 文字 #fefefe   ← 主ボタン
       ul.shop_list li a     面 #053769                  ← リスト項目
       a:hover               色 #4179a9
       .flowline li.active   色 #4179a9
       .item_price           色 #bf052b                  ← 一覧の価格
       .item_name            色 #fefefe                  ← 商品名
     ⚠ #e6c800 は style.css に1箇所も無い（近い #f1cf00 がヘッダーCTAの hover 面のみ）。→ 2026-10-01 に #f1cf00 へそろえた。
       ヘッダーCTAの hover が「黄の面 + 紺の文字」なので、その組をこの画面の hover に踏襲する。
     ⚠ 価格は #de5d50（.special_price）ではなく **#bf052b（.item_price）** に合わせる。
       この画面は特価表示ではなく商品一覧だから。

     ══ この画面の規則（色＝意味）══
     黄 rgb(241, 207, 0) … **hover（触れている）**。文字は紺 #053769（2026-10-01 に #e6c800 から変更）
     紺 #053769 … **選択・現在位置（決まっている）**。文字は白 #fefefe。縁は #4179a9
     黄の outline … フォーカス（面は変えない）
     #bf052b    … 価格
     #fefefe    … 商品名／紺の面に載る文字
     ⚠ 状態は「触れている＝黄」「決まっている＝紺」の2つだけ。
       hover と選択の色を要素ごとに変えない。
     ⚠ 実際の指定は下の「状態の基本ルール」に集約してある。
       個別のコンポーネントCSSに hover / 選択の色を書かない。 */
  --bsc-navy: #053769;
  --bsc-navy-soft: #0d386b; /* サイトで26箇所使われている濃紺。見出し帯に使う */
  --bsc-navy-line: #4179a9; /* 紺の面の縁だけに使う（hover/focus には使わない）*/
  --bsc-gold: rgb(241, 207, 0); /* 2026-10-01 指示：入口ボタンと同じ黄（＝ヘッダーCTAの hover の #f1cf00）。旧 #e6c800 */
  --bsc-on-navy: #fefefe; /* .btn-default の文字色 */
  /* 状態のトークン。役割で持つ（下の「状態の基本ルール」以外では使わない）*/
  --bsc-hover-bg: var(--bsc-gold); /* hover の面 */
  --bsc-on-hover: var(--bsc-navy); /* hover の面に載る文字 */
  --bsc-active-bg: var(--bsc-navy); /* 選択・現在位置の面 */
  --bsc-on-active: var(--bsc-on-navy); /* 選択の面に載る文字 */
  --bsc-price: #bf052b; /* .item_price と同色 */
  --bsc-site-text: #fefefe; /* サイト本文の文字色（商品一覧の .pagination の文字色） */
  color: var(--bsc-text);
  font-size: 14px;
  line-height: 1.7;
}

/* 下のタイムセールバナーとの間を、商品一覧（.pagination の margin-bottom 16px）と同じにする（2026-10-01 指示：list.twig を踏襲） */
.bsc {
  margin-bottom: 16px;
}

.bsc *, .bsc *::before, .bsc *::after {
  box-sizing: border-box;
}

.bsc a {
  text-decoration: none;
}

/* 操作の状態はすべて黄。キーボード操作でも同じ見た目にする */
.bsc a:focus-visible,
.bsc button:focus-visible,
.bsc summary:focus-visible {
  outline: 2px solid var(--bsc-gold);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════
   状態の基本ルール（この画面の操作要素すべてに共通・ここが唯一の定義）
   ══════════════════════════════════════════════════════════════
   通常   … 面 --bsc-surface-2 ／ 文字 --bsc-text
   hover  … 面 黄 --bsc-hover-bg  ／ 文字 紺 --bsc-on-hover
   選択   … 面 紺 --bsc-active-bg ／ 文字 白 --bsc-on-active
            （チップの選択・タブの現在位置・並び替えの選択中・ページ送りの現在位置）
   focus  … 黄の outline のみ。面は変えない

   ⚠ 文字色は親だけでなく**子要素にも明示する**。
     .bsc-side label / span / summary / h2 が色を直接指定しているため、
     親に色を置いても継承では勝てず、黄の面に白文字が残る（実際に発生）。
   ⚠ 選択中に hover したときは hover（黄）を優先する。
     クリックすれば解除できることを面の色で示すため。
   ⚠ 個別のコンポーネントCSSに hover / 選択の色を書かない。増やすときはここへ足す。 */
.bsc .bsc-tabs a:hover,
.bsc .bsc-active__chip:hover,
.bsc .bsc-sorts a:hover,
.bsc .bsc-submit button:hover,
.bsc .bsc-chip:hover,
.bsc .bsc-opt:hover {
  background: var(--bsc-hover-bg);
  border-color: var(--bsc-hover-bg);
  color: var(--bsc-on-hover);
}

.bsc .bsc-chip:hover > span,
.bsc .bsc-chip:hover .bsc-c,
.bsc .bsc-opt:hover .bsc-l,
.bsc .bsc-opt:hover .bsc-c {
  color: var(--bsc-on-hover);
}

.bsc .bsc-tabs a.is-current,
.bsc .bsc-sorts a.is-current,
.bsc .bsc-chip.is-on,
.bsc .bsc-chip:has(input:checked),
.bsc .bsc-opt:has(input:checked),
.bsc .bsc-select.is-on .bsc-field {
  background: var(--bsc-active-bg);
  border-color: var(--bsc-navy-line);
  color: var(--bsc-on-active);
  font-weight: bold;
}

.bsc .bsc-chip.is-on > span,
.bsc .bsc-chip.is-on .bsc-c,
.bsc .bsc-chip:has(input:checked) > span,
.bsc .bsc-chip:has(input:checked) .bsc-c,
.bsc .bsc-opt:has(input:checked) .bsc-l,
.bsc .bsc-opt:has(input:checked) .bsc-c {
  color: var(--bsc-on-active);
}

/* 選択中に hover したとき。
   ⚠ :has(input:checked) は :hover より詳細度が高いので、
     組み合わせを明示しないと選択が hover に勝ってしまい、面が紺のまま動かない。 */
/* 大カテゴリタブは hover でも現在位置と同じ太字にする（2026-10-01 指摘：hover だけ細く見えた）。
   太字の幅は .bsc-tabs a::after で先に確保してあるので、隣のタブはずれない */
.bsc .bsc-tabs a:hover {
  font-weight: bold;
}

.bsc .bsc-tabs a.is-current:hover,
.bsc .bsc-sorts a.is-current:hover,
.bsc .bsc-chip.is-on:hover,
.bsc .bsc-chip:has(input:checked):hover,
.bsc .bsc-opt:has(input:checked):hover {
  background: var(--bsc-hover-bg);
  border-color: var(--bsc-hover-bg);
  color: var(--bsc-on-hover);
}

.bsc .bsc-chip.is-on:hover > span,
.bsc .bsc-chip.is-on:hover .bsc-c,
.bsc .bsc-chip:has(input:checked):hover > span,
.bsc .bsc-chip:has(input:checked):hover .bsc-c,
.bsc .bsc-opt:has(input:checked):hover .bsc-l,
.bsc .bsc-opt:has(input:checked):hover .bsc-c {
  color: var(--bsc-on-hover);
}

.bsc .bsc-opt:has(input:checked):hover {
  --bsc-box-line: var(--bsc-on-hover);
  --bsc-box-fill: var(--bsc-on-hover);
  --bsc-box-mark: var(--bsc-hover-bg);
}

/* ── 管理者向けの注意書き ── */
.bsc-note {
  margin: 0 0 20px;
  padding: 10px 14px;
  background: var(--bsc-navy);
  border: 1px solid var(--bsc-navy-line);
  border-radius: 4px;
  color: #cfe0f0;
  font-size: 12px;
}

.bsc-note b {
  color: #fff;
}

/* ── ページ見出し ── */
.bsc-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0 0 14px;
}

.bsc-head h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.02em;
}
@media screen and (min-width: 768px) {
  .bsc-head h1 {
    font-size: 24px;
  }
}

/* ワンポイント（2026-10-01 指示）：入口タブと同じアイコン・同じ黄 */
.bsc-head__mark {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: var(--bsc-gold);
  color: var(--bsc-navy);
  font-size: 16px;
}
@media screen and (min-width: 768px) {
  .bsc-head__mark {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
}

/* ── 大カテゴリタブ ── */
.bsc-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 20px;
  padding-bottom: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.bsc-tabs::-webkit-scrollbar {
  height: 4px;
}

.bsc-tabs::-webkit-scrollbar-thumb {
  background: var(--bsc-line-2);
  border-radius: 2px;
}

.bsc .bsc-tabs a {
  display: inline-grid; /* 文字と ::after を縦に重ね、幅は太字のほうに合わせる */
  justify-items: center;
  flex: 0 0 auto;
  padding: 8px 15px;
  background: var(--bsc-surface-2);
  border: 1px solid var(--bsc-line);
  border-radius: 999px;
  color: var(--bsc-mute);
  font-size: 12px;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
@media screen and (min-width: 768px) {
  .bsc .bsc-tabs a {
    font-size: 13px;
  }
}

/* 太字にしたときの幅を先に確保する（見えない・高さ0）。hover で太字になってもタブの幅が変わらない */
.bsc .bsc-tabs a::after {
  content: attr(data-label);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: bold;
}

/* ── レイアウト ── */
.bsc-layout {
  display: block;
}
@media screen and (min-width: 1024px) {
  .bsc-layout {
    display: grid;
    grid-template-columns: 264px 1fr;
    gap: 28px;
    align-items: start;
  }
}
@media screen and (min-width: 1280px) {
  .bsc-layout {
    grid-template-columns: 280px 1fr;
  }
}

/* ══ 条件パネル ══
   ⚠ PCでは sticky にして自前スクロールさせる。軸が11本あり、指定しないと
     パネルだけ縦に2,000px近くなって結果一覧との対応が取れない。 */
.bsc-side {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  background: #141414;
  color: var(--bsc-text);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media screen and (min-width: 1024px) {
  .bsc-side {
    position: sticky;
    top: 16px;
    inset: auto;
    z-index: auto;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px);
    background: var(--bsc-surface);
    border: 1px solid var(--bsc-line);
    border-radius: 8px;
    overflow: hidden;
  }
}

.bsc-side.is-open {
  display: block;
}

.bsc-side label,
.bsc-side span,
.bsc-side summary,
.bsc-side h2 {
  color: var(--bsc-text);
}

.bsc-side-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--bsc-navy);
  border-bottom: 1px solid var(--bsc-navy-line);
  font-size: 13px;
}
@media screen and (min-width: 1024px) {
  .bsc-side-head {
    display: none;
  }
}

.bsc-side-head b {
  display: inline-flex; /* アイコン（.bsc-mark）と文字を横に並べる。高さは閉じるボタンで決まるので変わらない */
  align-items: center;
  gap: 8px;
  color: #fff;
}

.bsc-side-head button {
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--bsc-navy-line);
  border-radius: 4px;
  color: #cfe0f0;
  font-size: 12px;
  cursor: pointer;
}

.bsc-side-body {
  padding: 4px 16px 112px;
}
@media screen and (min-width: 1024px) {
  .bsc-side-body {
    flex: 1;
    padding: 4px 16px 16px;
    /* ⚠ スクロールバーは常に表示する（2026-10-01 指示）。auto だと macOS などで操作するまで見えず、
         下にまだ条件があることに気づけない。 */
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: var(--bsc-line-2) var(--bsc-surface-3);
  }
}

.bsc-side-body::-webkit-scrollbar {
  width: 8px;
}

.bsc-side-body::-webkit-scrollbar-track {
  background: var(--bsc-surface-3);
}

.bsc-side-body::-webkit-scrollbar-thumb {
  background: var(--bsc-line-2);
  border-radius: 4px;
}

/* ── 条件のグループ ── */
.bsc-g {
  padding: 16px 0;
  border-bottom: 1px solid var(--bsc-line);
  /* ⚠ サイトの流儀に合わせて字間を詰める。
     style.css は .heading01 / .category-nav a などが -1px、
     .item_name / .product_tag_list が -0.5px。日本語ラベルは詰めたほうが締まる。
     ここで指定するとラベル・件数・チップにも継承される。 */
  letter-spacing: -0.5px;
}

.bsc-g:last-of-type {
  border-bottom: none;
}

.bsc-g > h2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: -0.5px;
}

.bsc-g > h2 .bsc-hint {
  flex: 0 0 auto;
  color: var(--bsc-mute);
  font-size: 12px;
  font-weight: normal;
}

/* ── チェックボックス（自前描画）── */
/* ⚠ 件数はラベルの**直後**に置く。以前はラベルを flex:1 で伸ばして件数を右端に寄せていたが、
   チップ（価格帯・ボディタイプ）は「ラベル 件数」と隣接しているため見え方が食い違い、
   視線がラベルと数字の間を往復して読みにくかった（指摘を受けて修正）。
   gap ではなく個別の margin で制御する。gap だと件数だけ詰められない。 */
.bsc-opt {
  display: flex;
  align-items: center;
  min-width: 0; /* grid/flex の子として縮めるため。省くとラベルが親から溢れる */
  /* ⚠ hover と選択で面が付くので、左右に余白を取り、その分だけ外へ広げる。
     padding だけだとラベルの開始位置が他の軸とずれる。 */
  margin: 0 -7px;
  padding: 4px 7px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--bsc-text);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  /* チェックボックス本体の色。面の色に応じて状態ごとに差し替える */
  --bsc-box-line: var(--bsc-line-2);
  --bsc-box-fill: var(--bsc-gold);
  --bsc-box-mark: var(--bsc-navy);
}

.bsc .bsc-opt:hover {
  --bsc-box-line: var(--bsc-on-hover);
  --bsc-box-fill: var(--bsc-on-hover);
  --bsc-box-mark: var(--bsc-hover-bg);
}

.bsc .bsc-opt:has(input:checked) {
  --bsc-box-line: var(--bsc-gold);
}

.bsc-opt input {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 0 9px 0 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--bsc-box-line);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.bsc-opt input:focus-visible {
  border-color: var(--bsc-gold);
  outline: none;
  box-shadow: 0 0 0 2px rgba(230, 200, 0, 0.18);
}

.bsc-opt input:checked {
  background: var(--bsc-box-fill);
  border-color: var(--bsc-box-fill);
}

.bsc-opt input:checked::after {
  content: "";
  display: block;
  width: 4px;
  height: 8px;
  margin: 1px 0 0 4px;
  border-right: 2px solid var(--bsc-box-mark);
  border-bottom: 2px solid var(--bsc-box-mark);
  transform: rotate(40deg);
}

.bsc-opt .bsc-l {
  flex: 0 1 auto; /* 伸ばさない。伸ばすと件数が右端に飛ぶ */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bsc-opt .bsc-c {
  flex: 0 0 auto;
  margin-left: 6px; /* チップの gap:5px に合わせた詰め方 */
  color: var(--bsc-mute);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.bsc-opt.is-zero {
  color: #5f6469;
  cursor: default;
}

.bsc-opt.is-zero .bsc-c {
  color: #4f5458;
}

.bsc-opt.is-zero input {
  opacity: 0.35;
  cursor: default;
}

/* ── チップ（短いラベルの軸）── */
.bsc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bsc-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%; /* 長いラベルでもパネルから出さない */
  gap: 5px;
  padding: 6px 11px;
  background: var(--bsc-surface-2);
  border: 1px solid var(--bsc-line);
  border-radius: 999px;
  color: var(--bsc-mute);
  font-size: 12px;
  cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}

.bsc-chip:focus-within {
  border-color: var(--bsc-gold);
  box-shadow: 0 0 0 2px rgba(230, 200, 0, 0.18);
}

.bsc-chip input {
  display: none;
}

.bsc-chip > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.bsc-chip .bsc-c {
  color: inherit;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* ⚠ チップはチェックボックス本体を display:none で隠しているため、
   サーバーが付ける .is-on だけでは「検索」を押して再読み込みするまで選択が見えない。
   :has(input:checked) を並べてクリック即座に反応させる。色は「状態の基本ルール」が持つ。 */
.bsc-chip.is-zero {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.06);
  color: #5f6469;
  cursor: default;
}

/* ── 色の選択肢（見本付き）── */
/* 選択肢は横に詰めて折り返す（2026-10-01 指示。1行1項目の並べ方をやめた）。
   幅は各項目の文字に合わせるので、2列固定のグリッドで「サンバースト」が溢れた問題は起きない。
   .bsc-opt は面の分だけ左右に -7px はみ出すので、横の gap はそれより広く取って面同士を離す。 */
.bsc-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
}

.bsc-sw {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-right: 7px;
  border: 1px solid var(--bsc-line-2);
  border-radius: 50%;
}

/* 表現色なのでハードコードで固定してよい（テーマ切替の対象外） */
.bsc-sw--red {
  background: #c0392b;
}

.bsc-sw--blue {
  background: #2d6fb8;
}

.bsc-sw--green {
  background: #3f8f4f;
}

.bsc-sw--purple {
  background: #7d5ba6;
}

.bsc-sw--pink {
  background: #d977a6;
}

.bsc-sw--gold {
  background: #c8a24a;
}

.bsc-sw--white {
  background: #f0f0f0;
}

.bsc-sw--black {
  background: #1b1b1b;
}

.bsc-sw--sunburst {
  background: linear-gradient(135deg, #d9a13b 0%, #a8531f 55%, #4d2410 100%);
}

.bsc-sw--natural {
  background: #d9c39a;
}

.bsc-opt.is-zero .bsc-sw {
  opacity: 0.3;
}

/* ── 入力欄 ── */
/* ⚠⚠ 検索欄がはみ出す問題の本体。
   html/template/bigboss/css/bootstrap.custom.min.css に normalize.css v3.0.2 が含まれており、
     input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box }
   が入っている。この詳細度は **0,1,1** で、`.bsc-field`（0,1,0）に**勝つ**。
   そのため要素側に box-sizing を書いても効かず、width:100% に padding 22px と border 2px が
   加算されて親から溢れていた（同ファイル後半の `*{box-sizing:border-box}` は 0,0,0 なので負ける）。
   → 型セレクタを含めて詳細度 0,2,1 にして打ち消す。 */
.bsc input.bsc-field,
.bsc input[type=search].bsc-field,
.bsc input[type=text].bsc-field {
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

.bsc-field {
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 9px 11px;
  background: var(--bsc-surface-2);
  border: 1px solid var(--bsc-line);
  border-radius: 5px;
  color: var(--bsc-text);
  font-size: 13px;
  transition: border-color 0.12s;
}

.bsc-field::-webkit-search-cancel-button {
  filter: invert(1);
  opacity: 0.5;
}

.bsc-field:focus {
  border-color: var(--bsc-gold);
  outline: none;
  box-shadow: 0 0 0 2px rgba(230, 200, 0, 0.18);
}

.bsc-field::placeholder {
  color: #6f7479;
}

.bsc-range {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.bsc-range .bsc-field {
  flex: 1;
  min-width: 0;
  text-align: right;
}

.bsc-range span {
  flex: 0 0 auto;
  color: var(--bsc-mute);
  font-size: 12px;
}

/* ── ブランド：その他のブランドのプルダウン（まとめごとに4つ。2026-10-02 指示・エレキギターのみ）── */
.bsc-selects {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.bsc .bsc-selects__title {
  margin: 0;
  color: var(--bsc-mute);
  font-size: 12px;
}

/* 弦の本数・ゲージの「エレキギター」「エレキベース」の見出し（2026-10-02 指示・弦） */
.bsc .bsc-groups__title {
  margin: 0 0 6px;
  color: var(--bsc-mute);
  font-size: 12px;
}

.bsc .bsc-chips + .bsc-groups__title {
  margin-top: 12px;
}

/* 親にチェックを入れると、そのすぐ下（次の行）に出る中身のプルダウン（2026-10-02 指示：流れにそって絞り込む） */
.bsc-flow > .bsc-select--child {
  flex: 0 0 100%;
  margin: 4px 0 8px;
}

.bsc-select {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: normal;
}

.bsc .bsc-select__label {
  flex: 0 0 auto;
  min-width: 72px;
  color: var(--bsc-text);
  font-size: 12px;
}

.bsc-select .bsc-field {
  flex: 1;
  padding-right: 28px; /* 右の▼の分 */
  font-size: 14px;
  cursor: pointer;
}

/* 1つのブランドの中身のプルダウン（COLLABORATION GUITAR）。見出しが長いので上に置く（2026-10-02） */
.bsc-select--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.bsc-select--stack .bsc-field {
  flex: none;
  width: 100%;
}

/* ▼（.bsc-field は appearance: none で既定の矢印が消えるので描く） */
.bsc-select::after {
  content: "";
  position: absolute;
  top: auto;
  bottom: 20px; /* select（高さ 44px）の下端から。見出しが上に付く縦並びでも位置がずれない */
  right: 11px;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--bsc-mute);
  border-bottom: 2px solid var(--bsc-mute);
  transform: rotate(45deg);
  pointer-events: none;
}

/* ── スペック軸（開閉）── */
.bsc-acc {
  margin-top: 4px;
  background: #161616;
  border: 1px solid var(--bsc-line);
  border-radius: 6px;
}

.bsc-acc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 13px;
  background: var(--bsc-navy-soft);
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  list-style: none;
}

.bsc-acc > summary::-webkit-details-marker {
  display: none;
}

.bsc-acc > summary::after {
  content: "＋";
  color: #a8c3da;
  font-size: 12px;
  font-weight: normal;
}

.bsc-acc[open] > summary {
  border-bottom: 1px solid var(--bsc-navy-line);
}

.bsc-acc[open] > summary::after {
  content: "−";
}

.bsc-acc-body {
  padding: 0 13px 12px;
}

.bsc-blank {
  margin-top: 14px;
  padding: 10px 11px;
  background: var(--bsc-surface-2);
  border-radius: 5px;
  align-items: flex-start;
}

.bsc-blank .bsc-l {
  white-space: normal;
  overflow: visible;
  font-size: 12px;
}

.bsc-blank-note {
  display: block;
  margin-top: 3px;
  color: var(--bsc-mute);
  font-size: 12px;
  line-height: 1.5;
}

/* ── 送信 ── */
.bsc-submit {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 12px 16px;
  background: #161616;
  border-top: 1px solid var(--bsc-line);
}
@media screen and (min-width: 1024px) {
  .bsc-submit {
    position: static;
  }
}

.bsc-submit button {
  width: 100%;
  padding: 13px;
  background: var(--bsc-navy);
  border: 1px solid var(--bsc-navy-line);
  border-radius: 5px;
  color: var(--bsc-on-navy);
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.12s;
}

.bsc .bsc-reset {
  display: block;
  margin-top: 9px;
  color: var(--bsc-mute);
  font-size: 12px;
  text-align: center;
}

.bsc .bsc-reset:hover {
  color: var(--bsc-gold);
} /* 面を持たない文字リンクなので文字色で示す */
/* Ajax で絞り込み中は結果を薄くする（待っていることを示す） */
.bsc-main[aria-busy=true] {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.15s;
}

/* ── SP の「検索条件を設定」ボタン（2026-10-02 指示）──
   タブのすぐ下に置き（.bsc-fab-wrap）、スクロールしてボタンが画面の上へ出たら、画面の下に固定する（.is-fixed。切り替えは js/product_search.js）。 */
.bsc-fab-wrap {
  min-height: 52px; /* 固定に切り替わってもボタンの高さを残し、ページがずれないようにする */
  margin: -6px 0 12px; /* タブ（下の余白 20px）との間を詰める */
  text-align: center; /* ボタンを中央に置く（2026-10-02 指示） */
}
@media screen and (min-width: 1024px) {
  .bsc-fab-wrap {
    display: none;
  }
}

.bsc-fab {
  /* 2026-10-02 指示：中央寄せ・display:inline-block。画面いっぱいに広げず、中身の幅にする */
  display: inline-block;
  padding: 13px 14px; /* 高さ 52px（アイコン 24px＋上下 13px＋枠） */
  line-height: 24px; /* アイコン（24px）と文字を同じ行の高さにそろえる */
  white-space: nowrap;
  background: var(--bsc-navy);
  border: 1px solid var(--bsc-navy-line);
  border-radius: 999px;
  color: var(--bsc-on-navy);
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
}

.bsc-fab.is-fixed {
  position: fixed;
  /* 下部ボタン群（#bottom_nav 高さ50px）の上に、画面の中央に置く（2026-10-02 指示：画面いっぱいに広げない）。
     右下のページトップ（.back-to-top：右から15px・幅40px）とは、320px の画面でも重ならない */
  bottom: 62px; /* 下部ボタン群 50px ＋ 12px */
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); /* 中立効果 */
}

/* 「検索条件を設定」のアイコン（SP の固定ボタン・ボトムシートの見出し。2026-10-02 指示）。
   見出しの .bsc-head__mark と同じ（黄の四角に紺の fa-sliders）を、ボタンに合わせて小さくしたもの */
.bsc-fab .bsc-mark {
  margin-right: 8px; /* inline-block の中では gap が効かないので、文字との間をここでとる */
  vertical-align: top; /* 行の高さ（24px）にアイコンの上端をそろえる */
}

.bsc-mark {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: var(--bsc-gold);
  color: var(--bsc-navy);
  font-size: 13px;
}

/* ══ 結果 ══ */
/* ── 選んでいる大カテゴリの名前（.bsc-bar の上のタイトル。2026-10-02 指示）──
   サイトの CSS が h2 に文字の大きさを付け、Bootstrap が余白・太さ・行の高さを付けるので、ここで全部明示する。 */
.bsc .bsc-cat-title {
  margin: 10px 0; /* 2026-10-02 指示 */
  color: var(--bsc-site-text);
  font-size: 18px;
  font-weight: bold;
  line-height: 1.4;
  /* 2026-10-02 指示（旧 20px） */
}
@media screen and (min-width: 768px) {
  .bsc .bsc-cat-title {
    font-size: 24px;
  }
}

/* ── 絞り込んでいる条件（タイトルの下。× で外す。2026-10-02 指示）──
   選んでいる＝紺（状態の基本ルールの「選択」と同じ色）。hover は上の基本ルール（黄）。 */
.bsc-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0 0 12px;
}

.bsc .bsc-active__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 10px;
  border: 1px solid var(--bsc-navy-line);
  border-radius: 999px;
  background: var(--bsc-active-bg);
  color: var(--bsc-on-active);
  font-size: 12px;
  line-height: 1.4;
}

.bsc .bsc-active__x {
  flex: none;
  font-size: 14px;
  line-height: 1;
}

.bsc .bsc-active__clear {
  color: var(--bsc-mute);
  font-size: 12px;
  text-decoration: underline;
}

.bsc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bsc-line);
}

.bsc-count {
  color: var(--bsc-mute);
  font-size: 12px;
}

.bsc-count b {
  margin-right: 3px;
  color: var(--bsc-on-navy);
  font-size: 20px; /* 2026-10-02 指示（旧 24px） */
  font-variant-numeric: tabular-nums;
}

/* 並び替えはセグメント式 */
.bsc-sorts {
  display: flex;
  padding: 3px;
  background: var(--bsc-surface-2);
  border: 1px solid var(--bsc-line);
  border-radius: 6px;
}

.bsc .bsc-sorts a {
  padding: 5px 11px;
  border-radius: 4px;
  color: var(--bsc-mute);
  font-size: 12px;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}

/* ── 商品カード ── */
.bsc-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px; /* どの幅でも 10px（2026-10-01 指示。商品一覧のカードの間隔と同じ） */
}
@media screen and (min-width: 640px) {
  .bsc-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 1280px) {
  .bsc-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

.bsc .bsc-card {
  position: relative; /* .js_pr（プライスダウン）を右上に置く基準。一覧の .product_item と同じ役割 */
  display: flex;
  flex-direction: column;
  background: var(--bsc-surface);
  border: 1px solid var(--bsc-line);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}

.bsc .bsc-card:hover {
  border-color: var(--bsc-line-2);
  transform: translateY(-2px);
}

.bsc-ph {
  position: relative; /* .icnNew（サイト共通・absolute）の基準 */
  aspect-ratio: 4/3; /* 商品画像は全点4:3で統一されている */
  background: #0e0e0e;
}

.bsc-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* タイムセールのバッジ（2026-10-02 指示）。位置と大きさは一覧の実際の表示に合わせる
   （サイトの .product_item .item_photo .bnr_logo：右下 6px・幅 76px。一覧のマークアップにある 60px の指定は効いていない。2026-10-02 実測）。
   画像は上の .bsc-ph img（高さ100%・切り抜き）を打ち消し、一覧と同じく比率どおりに出す */
.bsc-ph .bnr_logo {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 76px;
}

.bsc-ph .bnr_logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.bsc-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 10px 11px 12px;
}

.bsc-name {
  /* 商品名はどの幅でも全文出す（2026-10-02 指示：店舗名が切れて見えない。商品一覧のカードも全文）。
     それまでは2行で打ち切っていた（-webkit-line-clamp: 2） */
  display: block;
  color: var(--bsc-on-navy);
  font-size: 14px; /* どの幅でも 14px（2026-10-01 指示。商品一覧のカードと同じ） */
  line-height: 1.4; /* 2026-10-02 指示（旧 1.5）。商品一覧のカードの .item_name と同じ */
}

/* 商品タグ。色はサイト共通の .product_tag_box__product_tag--{id} に任せる */
.bsc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.bsc-tags .product_tag_list {
  font-size: 12px;
}

/* 定価（list.twig の .item_price_regular と同じ役割） */
.bsc-regular {
  margin-top: auto;
  padding-top: 9px;
  color: var(--bsc-mute);
  font-size: 12px;
}

.bsc-regular + .bsc-price {
  margin-top: 0;
  padding-top: 2px;
}

.bsc-price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: auto;
  padding-top: 9px;
  color: var(--bsc-price);
  font-size: 14px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.bsc-tax {
  color: var(--bsc-mute);
  font-size: 12px;
  font-weight: normal;
}

.bsc-sold {
  align-self: flex-start;
  margin-bottom: 4px;
  padding: 1px 6px;
  background: var(--bsc-surface-3);
  border-radius: 3px;
  color: var(--bsc-mute);
  font-size: 12px;
  font-weight: normal;
}

.bsc-empty {
  padding: 56px 20px;
  background: var(--bsc-surface);
  border: 1px solid var(--bsc-line);
  border-radius: 8px;
  color: var(--bsc-mute);
  font-size: 13px;
  text-align: center;
}

.bsc-empty b {
  display: block;
  margin-bottom: 6px;
  color: var(--bsc-text);
  font-size: 14px;
}

/* ── ページ送りがないとき（結果が1ページに収まるとき）の、カードの下の余白（2026-10-02 指示：詰まっている）──
   カードの並びが結果の最後の要素になる。下の .bsc の margin-bottom 16px と合わせて、
   カード下端 → タイムセールのバナーを 40px にする（ページ送りがあるときの「カード → ボタン」39px に近い値）。
   ⚠ margin だと SP（ブロック配置）では .bsc の margin と重なって 24px になり、PC（グリッド）と変わるので padding で取る。 */
.bsc-main > .bsc-cards:last-child {
  padding-bottom: 24px;
}

/* ── ページ送り ──
   2026-10-02 から商品一覧と同じ .pagination（search_main.twig）。ボタンの見た目はサイトの CSS（style.css の .pagination）。
   ⚠ この画面は .bsc で文字の大きさ・行の高さ・色を変えているので、ページ送りだけ一覧と同じ値（16px / 1.4 / #fefefe）に戻す。
     サイトの .pagination は文字の大きさを基準に余白を取るため、戻さないとボタンが小さくなる（高さ 35px。一覧は 39px）。
   余白は一覧の実測に合わせる：カード下端→ボタン 39px、ボタン下端→タイムセールのバナー 32px。
     一覧はカードの並びの下に 7px の余白があり、その下に .pagination（上下 16px）が来るので、上は 16＋7＝23px。
     下は .bsc の margin-bottom（16px）が受け持つので 0 にする（PC は結果がグリッドの中にあり、margin が重ならない）。 */
.bsc .pagination {
  margin: 23px 0 0;
  color: var(--bsc-site-text);
  font-size: 16px;
  line-height: 1.4;
}