@charset "UTF-8";
/*
 * 商品詳細検索（/products/search）への入口の CSS（左端タブ .bsc-tab・一覧見出しのリンク .bsc-cat-link）。
 * 2026-10-02 に custom.scss から移した（中身は同じ）。custom.css は版の番号なしで読まれるので、ブラウザに古い版が残ると、
 * クラス名を変えたあとにスマホで入口が崩れた。このファイルは版の番号（ProductSearch::ASSET_VERSION）付きで読む。
 * ⚠ 読み込むのは Block/search_product.twig（左端タブの直前）と Product/list.twig（見出しのリンクの直前）。どちらも管理者のみ。
 * ⚠ css/bsc_entry.css を直接編集しない。このファイルを直してコンパイルする（scss と css は一緒に上げる）：
 *     cd store-dev/html/template/bigboss && sass --no-source-map scss/bsc_entry.scss css/bsc_entry.css
 * ⚠ 変えたら ProductSearch::ASSET_VERSION を上げる。
 */
/* ─────────────────────────────────────────────
   商品詳細検索（/products/search）への入口（2026-10-01 指示）
   ① .bsc-tab      … 画面の左端に固定するタブ（Block/search_product.twig）。上下ドラッグは js/bsc_tab.js
   ② .bsc-cat-link … 商品一覧の見出しの右のリンク（Product/list.twig の .bb-cat-head）
   ⚠ どちらも一般公開までは管理者にだけ出す（判定は twig 側。ProductSearchController::PUBLIC_RELEASE）。
   ⚠ 2026-10-02（R4）：以前は1つのクラス .bsc-entry の上に ① が打ち消しを重ねていたので、2つのクラスに分けた。
     画面に出る値は変えていない（計算済みスタイルを分ける前と比べて確認する）。
   ───────────────────────────────────────────── */
/* ① 左端のタブ（2026-10-01 指示）。
   トップページ右端の MENU タブ（style.scss の .drawr_btn：top 50%・幅40px・余白 1rem .5rem・14px・アイコン24px・角なし・z-index 999999）と
   左右対称に置く。背景は rgb(241, 207, 0)（指示）、文字とアイコンは紺。 */
.search .bsc-tab {
  --bsc-tab-bg: rgb(241, 207, 0); /* 2026-10-01 指示 */
  --bsc-tab-ink: #053769; /* 紺 */
  --bsc-tab-hover: rgba(255, 255, 255, .2); /* hover は無彩色を重ねる */
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 999999;
  display: inline-flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 4px; /* アイコンと文字の間（MENU タブの詰まり方に合わせる） */
  width: 40px;
  height: auto;
  margin: 0;
  padding: 1rem 0.5rem;
  border: 0;
  border-radius: 0;
  background: var(--bsc-tab-bg);
  color: var(--bsc-tab-ink);
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  /* 上下にドラッグで動かせる */
  cursor: grab;
  touch-action: none; /* タブの上で指を動かしてもページがスクロールしない */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.search .bsc-tab:hover, .search .bsc-tab:focus {
  background: var(--bsc-tab-bg);
  color: var(--bsc-tab-ink);
  text-decoration: none;
  box-shadow: inset 0 0 0 200px var(--bsc-tab-hover);
}
.search .bsc-tab.is-dragging {
  cursor: grabbing;
}

.search .bsc-tab__icon {
  flex: none;
  font-size: 24px;
}

.search .bsc-tab__label {
  writing-mode: vertical-rl;
  font-size: 13px; /* 2026-10-01 指示 */
  font-weight: bold;
  line-height: 1;
  /* letter-spacing: .1em; */ /* 2026-10-01 指示で外した */
}

/* ② 一覧の見出しのリンク：右側（X 共有アイコンの左）へ寄せる。
   入らない幅では見出しを1行目に残し、リンクと X を次の行へ送る（見出しの文字を途中で折らない）。
   ⚠ リンクがあるときだけ折り返す。リンクの無い一覧（一般の閲覧者）の並びは変えない。 */
.bb-cat-head:has(.bsc-cat-link) {
  flex-wrap: wrap;
}

.bb-cat-head .bsc-cat-link {
  --bsc-cat-link-ink: #fefefe; /* 商品詳細検索の文字色と同じ */
  --bsc-cat-link-line: rgba(255, 255, 255, .4); /* .bb-xshare の縁と同じ */
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 34px;
  margin-left: auto;
  padding: 0 14px;
  border: 1px solid var(--bsc-cat-link-line);
  border-radius: 17px;
  background: transparent;
  color: var(--bsc-cat-link-ink);
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  /* hover で面の色は変えない（分ける前も、面を透明にする指定が hover の色より後にあり、色は変わっていなかった） */
}
.bb-cat-head .bsc-cat-link:hover, .bb-cat-head .bsc-cat-link:focus {
  color: var(--bsc-cat-link-ink);
  text-decoration: none;
}