/* =========================================================================
   BRIDAL COLLECTION — /gallerys/ 刷新（プレビュー実装）
   出典: docs/ui-design/design-tokens.css / docs/mockups/
   ※検索絞り込みは Phase 2。フォームは見た目のみ。
   ========================================================================= */

:root {
  --bc-paper:#FAF9FB; --bc-surface:#FFFFFF; --bc-ink:#1F1A24; --bc-mute:#6E6875;
  --bc-accent:#4D41B5; --bc-accent-soft:#A161BF; --bc-accent-deep:#3A07B8; --bc-accent-wash:#F1EEF8;
  --bc-rule:#DED8E4; --bc-rule-strong:#8F84A0;
  --bc-alert:#C0392B; --bc-focus:#4D41B5;

  --bc-metal-pt:#C8C9CB; --bc-metal-yg:#D9B44A; --bc-metal-pg:#E0A08C; --bc-metal-cg:#E2D3A6;
  --bc-metal-pt-yg:linear-gradient(135deg,var(--bc-metal-pt) 50%,var(--bc-metal-yg) 50%);
  --bc-metal-pt-pg:linear-gradient(135deg,var(--bc-metal-pt) 50%,var(--bc-metal-pg) 50%);
  --bc-metal-yg-pg:linear-gradient(135deg,var(--bc-metal-yg) 50%,var(--bc-metal-pg) 50%);
  --bc-metal-pt-cg:linear-gradient(135deg,var(--bc-metal-pt) 50%,var(--bc-metal-cg) 50%);
  --bc-metal-yg-cg:linear-gradient(135deg,var(--bc-metal-yg) 50%,var(--bc-metal-cg) 50%);
  --bc-metal-pg-cg:linear-gradient(135deg,var(--bc-metal-pg) 50%,var(--bc-metal-cg) 50%);

  --bc-font-base:"游ゴシック体","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --bc-font-label:"Montserrat",var(--bc-font-base);
  --bc-font-mono:"IBM Plex Mono",Consolas,Menlo,monospace;

  --bc-fs-xs:11px; --bc-fs-sm:12px; --bc-fs-base:14px; --bc-fs-md:16px;
  --bc-fs-lg:20px; --bc-fs-xl:26px; --bc-fs-2xl:34px;
  --bc-lh-tight:1.35; --bc-lh-base:1.75;
  --bc-ls-label:0.18em; --bc-ls-wide:0.30em;

  --bc-sp-1:4px; --bc-sp-2:8px; --bc-sp-3:12px; --bc-sp-4:16px; --bc-sp-5:24px;
  --bc-sp-6:32px; --bc-sp-7:48px; --bc-sp-8:64px; --bc-sp-9:96px;

  --bc-container:1090px; --bc-rail:248px; --bc-tap:44px;
  --bc-radius:2px; --bc-radius-pill:999px;
  --bc-mm:8px; --bc-ease:cubic-bezier(.22,.61,.36,1); --bc-dur:.25s;
}

/* --- テーマのサイドバー・幅制約を打ち消してフル幅にする --- */
.bc-fullwidth #secondary,
.bc-fullwidth .widget-area { display:none !important; }
.bc-fullwidth .main-content-inner {
  width:100% !important; max-width:none !important; float:none !important;
  margin:0 !important; padding:0 !important;
}
.bc-fullwidth .main-content-area { padding:0 !important; }

/* --- スコープ土台 --- */
.bc-scope { background:var(--bc-paper); color:var(--bc-ink);
  font-family:var(--bc-font-base); font-size:var(--bc-fs-base); line-height:var(--bc-lh-base); }
.bc-scope *,.bc-scope *::before,.bc-scope *::after { box-sizing:border-box; }
.bc-scope img { max-width:100%; height:auto; display:block; }
.bc-scope ul { list-style:none; margin:0; padding:0; }
.bc-scope button { font-family:inherit; cursor:pointer; }
.bc-scope :focus-visible { outline:2px solid var(--bc-focus); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  .bc-scope *,.bc-scope *::before,.bc-scope *::after{
    animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

.bc-container { max-width:var(--bc-container); margin-inline:auto; padding-inline:var(--bc-sp-4); }
@media (min-width:768px){ .bc-container{ padding-inline:var(--bc-sp-5); } }

/* --- プレビュー注記 --- */
.bc-preview-note { background:#FFFBE6; border-bottom:1px solid #E8D98A;
  padding:var(--bc-sp-2) var(--bc-sp-4); font-size:var(--bc-fs-xs); color:#6B5D1F;
  text-align:center; line-height:1.6; }

/* --- タイトル帯 --- */
.bc-pagehead { border-bottom:1px solid var(--bc-rule); padding-block:var(--bc-sp-6) var(--bc-sp-4); }
.bc-pagehead__title { font-family:var(--bc-font-label); font-size:var(--bc-fs-xl); font-weight:400;
  letter-spacing:var(--bc-ls-wide); margin:0; line-height:1.2; }
.bc-pagehead__lead { font-size:var(--bc-fs-sm); color:var(--bc-mute);
  margin-top:var(--bc-sp-2); max-width:44em; }
.bc-pagehead__count { font-family:var(--bc-font-mono); font-size:var(--bc-fs-sm);
  color:var(--bc-mute); margin-top:var(--bc-sp-2); white-space:nowrap; }
@media (min-width:1024px){
  .bc-pagehead__row { display:flex; align-items:baseline; justify-content:space-between; gap:var(--bc-sp-5); }
  .bc-pagehead__lead-wrap { flex:1 1 auto; min-width:0; }
  .bc-pagehead__title { font-size:var(--bc-fs-2xl); }
  .bc-pagehead__count { margin-top:0; flex:0 0 auto; }
}

/* --- パンくず --- */
.bc-crumbs { display:flex; flex-wrap:wrap; gap:var(--bc-sp-2); align-items:center;
  padding-top:var(--bc-sp-4); font-size:var(--bc-fs-xs); color:var(--bc-mute); }
.bc-crumbs a { color:var(--bc-mute); text-decoration:none; }
.bc-crumbs a:hover { color:var(--bc-accent); text-decoration:underline; }

/* --- 人気コレクション --- */
.bc-popular { padding-block:var(--bc-sp-6); border-bottom:1px solid var(--bc-rule); }
.bc-popular__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--bc-sp-4); }
.bc-sec-title { font-family:var(--bc-font-label); font-size:var(--bc-fs-xs);
  letter-spacing:var(--bc-ls-wide); text-transform:uppercase; color:var(--bc-mute); font-weight:400; margin:0; }
.bc-popular__nav { display:flex; gap:var(--bc-sp-2); }
.bc-arrow { width:var(--bc-tap); height:var(--bc-tap); border:1px solid var(--bc-rule-strong);
  background:var(--bc-surface); border-radius:var(--bc-radius-pill); color:var(--bc-ink);
  display:grid; place-items:center; font-size:var(--bc-fs-sm); }
.bc-arrow:hover { border-color:var(--bc-accent); color:var(--bc-accent); }
.bc-popular__track { display:grid; grid-auto-flow:column; grid-auto-columns:44%; gap:var(--bc-sp-3);
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:var(--bc-sp-2); }
.bc-popular__track::-webkit-scrollbar { display:none; }
.bc-popular__track > * { scroll-snap-align:start; }
@media (min-width:768px){ .bc-popular__track{ grid-auto-columns:31%; } }
@media (min-width:1024px){ .bc-popular__track{ grid-auto-columns:23%; } }

/* --- 本体レイアウト（絞り込みバーを上部に置く単一カラム） --- */
.bc-main { padding-block:var(--bc-sp-5) var(--bc-sp-9); }

/* --- 絞り込みバー（上部・PC/SP 共通のプルダウン） --- */
.bc-filterbar { background:var(--bc-surface); border:1px solid var(--bc-rule);
  padding:var(--bc-sp-4); margin-bottom:var(--bc-sp-5); }
.bc-filterbar__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--bc-sp-3) var(--bc-sp-4); }
@media (min-width:640px){ .bc-filterbar__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1024px){ .bc-filterbar__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.bc-field { display:flex; flex-direction:column; gap:var(--bc-sp-1); min-width:0; }
.bc-field__label { font-family:var(--bc-font-label); font-size:var(--bc-fs-xs);
  letter-spacing:var(--bc-ls-label); text-transform:uppercase; color:var(--bc-mute); }
.bc-field__select { width:100%; max-width:100%; min-height:var(--bc-tap);
  padding:0 var(--bc-sp-6) 0 var(--bc-sp-3); border:1px solid var(--bc-rule-strong);
  border-radius:var(--bc-radius); background-color:var(--bc-surface); color:var(--bc-ink);
  font-family:inherit; font-size:var(--bc-fs-base); line-height:1.3;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236E6875' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--bc-sp-3) center; background-size:10px 6px;
  text-overflow:ellipsis; }
.bc-field__select:hover { border-color:var(--bc-accent); }

/* 「さらに絞り込む」開閉（<details>／JS 無しでも動作） */
.bc-filterbar__more { margin-top:var(--bc-sp-3); }
.bc-filterbar__more > summary { display:inline-flex; align-items:center; gap:var(--bc-sp-2);
  min-height:var(--bc-tap); padding-inline:var(--bc-sp-3); cursor:pointer; list-style:none;
  font-family:var(--bc-font-label); font-size:var(--bc-fs-xs); letter-spacing:var(--bc-ls-label);
  text-transform:uppercase; color:var(--bc-accent); }
.bc-filterbar__more > summary::-webkit-details-marker { display:none; }
.bc-filterbar__more > summary::after { content:"\25BE"; transition:transform var(--bc-dur) var(--bc-ease); }
.bc-filterbar__more[open] > summary::after { transform:rotate(180deg); }
.bc-filterbar__more > summary:hover { color:var(--bc-accent-deep); }
.bc-filterbar__grid--more { margin-top:var(--bc-sp-3); }

.bc-filterbar__actions { display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--bc-sp-3); margin-top:var(--bc-sp-4); }
.bc-filterbar__submit { min-height:var(--bc-tap); padding-inline:var(--bc-sp-6);
  background:var(--bc-accent); color:#fff; border:none; border-radius:var(--bc-radius);
  font-family:var(--bc-font-label); font-size:var(--bc-fs-xs); letter-spacing:var(--bc-ls-label);
  text-transform:uppercase; }
.bc-filterbar__submit:hover { background:var(--bc-accent-deep); }
.bc-filterbar__clear { display:inline-flex; align-items:center; min-height:var(--bc-tap);
  font-size:var(--bc-fs-xs); color:var(--bc-mute); text-decoration:underline; }
.bc-filterbar__clear:hover { color:var(--bc-accent); }

/* --- チップ --- */
.bc-chips { display:flex; flex-wrap:wrap; align-items:center; gap:var(--bc-sp-2); margin-bottom:var(--bc-sp-5); }
.bc-chip { display:inline-flex; align-items:center; gap:var(--bc-sp-2); min-height:var(--bc-tap);
  padding:0 var(--bc-sp-4); background:var(--bc-accent-wash); border:1px solid var(--bc-accent);
  border-radius:var(--bc-radius-pill); color:var(--bc-accent); font-size:var(--bc-fs-sm); text-decoration:none; }
.bc-chip:hover { background:var(--bc-surface); }
.bc-chip--static { background:var(--bc-surface); border-color:var(--bc-rule-strong);
  color:var(--bc-mute); cursor:default; }
.bc-chip__x { font-size:var(--bc-fs-md); line-height:1; }
.bc-chips__clear { display:inline-flex; align-items:center; min-height:var(--bc-tap);
  font-size:var(--bc-fs-xs); color:var(--bc-mute);
  text-decoration:underline; background:none; border:none; padding-inline:var(--bc-sp-3); }
.bc-chips__clear:hover { color:var(--bc-accent); }

/* --- 商品グリッド --- */
/* 列は必ず同じ幅にする（1fr だけだと、長い商品名の列が広がり画像の大きさがそろわない） */
.bc-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--bc-sp-5) var(--bc-sp-3); }
@media (min-width:768px){ .bc-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1024px){ .bc-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--bc-sp-6) var(--bc-sp-5); } }

.bc-card { position:relative; }
.bc-card-img-wrap { position:relative; }
.bc-card-link { display:block; text-decoration:none; color:inherit; }
.bc-card-img { aspect-ratio:1/1; object-fit:cover; width:100%; background:var(--bc-surface);
  border:1px solid var(--bc-rule); transition:transform var(--bc-dur) var(--bc-ease), box-shadow var(--bc-dur) var(--bc-ease); }
@media (min-width:1024px){
  .bc-card-link:hover .bc-card-img { transform:scale(1.03); box-shadow:0 10px 30px rgba(77,65,181,.12); }
}
.bc-card-name { font-size:var(--bc-fs-base); font-weight:400; line-height:var(--bc-lh-tight); overflow-wrap:anywhere;
  margin:var(--bc-sp-2) 0 var(--bc-sp-1); }
@media (min-width:1024px){ .bc-card-name{ font-size:var(--bc-fs-md); } }
.bc-card-price { font-family:var(--bc-font-mono); font-size:var(--bc-fs-sm); color:var(--bc-mute); margin:0; }

/* --- スウォッチ（20px。色だけに頼らず必ず枠線） --- */
.bc-swatches { display:flex; flex-wrap:wrap; align-items:center; gap:var(--bc-sp-2); margin-top:var(--bc-sp-2); }
.bc-swatch { width:20px; height:20px; border-radius:var(--bc-radius-pill);
  border:1px solid var(--bc-rule-strong); flex-shrink:0; }
.bc-swatch--pt { background:var(--bc-metal-pt); }
.bc-swatch--yg { background:var(--bc-metal-yg); }
.bc-swatch--pg { background:var(--bc-metal-pg); }
.bc-swatch--cg { background:var(--bc-metal-cg); }
.bc-swatch--pt-yg { background:var(--bc-metal-pt-yg); }
.bc-swatch--pt-pg { background:var(--bc-metal-pt-pg); }
.bc-swatch--yg-pg { background:var(--bc-metal-yg-pg); }
.bc-swatch--pt-cg { background:var(--bc-metal-pt-cg); }
.bc-swatch--yg-cg { background:var(--bc-metal-yg-cg); }
.bc-swatch--pg-cg { background:var(--bc-metal-pg-cg); }
.bc-swatch--none { background:transparent; }
.bc-swatch-name { font-size:var(--bc-fs-xs); color:var(--bc-mute); }

/* --- お気に入り☆（星アイコンのみ。背景・枠・影・フォーカス枠は一切出さない） ---
   星の周囲に紫の四角/丸が出ないよう、全状態で装飾を強制無効化（テーマ/グローバルの
   :focus-visible アウトラインや Bootstrap のフォーカス光彩に勝つため !important）。 */
.bc-fav-star,
.bc-fav-star:hover,
.bc-fav-star:focus,
.bc-fav-star:focus-visible,
.bc-fav-star:active {
  background:none !important;
  border:0 !important;
  outline:none !important;
  box-shadow:none !important;
}
.bc-fav-star { position:absolute; top:var(--bc-sp-2); right:var(--bc-sp-2);
  width:var(--bc-tap); height:var(--bc-tap); display:grid; place-items:center;
  padding:0; cursor:pointer; z-index:1;
  color:#fff; font-size:var(--bc-fs-lg); line-height:1;
  text-shadow:0 0 2px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.45);
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, color .12s ease; }
.bc-fav-star:hover,
.bc-fav-star:focus-visible { transform:scale(1.15); }
.bc-fav-star:active { transform:scale(.92); }
/* 活性化（押下＝お気に入り登録済み）: 塗り星＋アクセント色 */
.bc-fav-star[aria-pressed="true"] { color:var(--bc-accent-soft); text-shadow:0 0 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.35); }

/* --- ページネーション --- */
.bc-pagination { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--bc-sp-2); margin-top:var(--bc-sp-8); }
.bc-pagination a, .bc-pagination span { min-width:var(--bc-tap); min-height:var(--bc-tap);
  display:grid; place-items:center; padding-inline:var(--bc-sp-2);
  font-family:var(--bc-font-mono); font-size:var(--bc-fs-sm);
  border:1px solid var(--bc-rule); text-decoration:none; color:var(--bc-ink); background:var(--bc-surface); }
.bc-pagination .current { background:var(--bc-accent); color:#fff; border-color:var(--bc-accent); }

/* --- 空表示 --- */
.bc-empty { padding-block:var(--bc-sp-9); text-align:center; color:var(--bc-mute); }

/* --- 閉じるボタン（お気に入りパネル共通） --- */
.bc-x { width:var(--bc-tap); height:var(--bc-tap); background:none; border:none; font-size:22px; line-height:1; color:var(--bc-ink); }

/* --- お気に入り固定ボタン（PC/SP 共通） --- */
/* --bc-sm-bar は JS が測る下部固定バー(#sm_menu_hooter)の高さ。PC では 0px。
   SP でお気に入りボタン/パネルがバーと被らないよう、その分だけ持ち上げる。 */
.bc-fav-fixed { position:fixed; left:var(--bc-sp-4);
  bottom:calc(var(--bc-sp-4) + var(--bc-sm-bar, 0px)); z-index:900; display:flex;
  align-items:center; gap:var(--bc-sp-2); min-height:var(--bc-tap); padding-inline:var(--bc-sp-4);
  background:var(--bc-accent); color:#fff; border:none; border-radius:var(--bc-radius-pill);
  font-size:var(--bc-fs-sm); box-shadow:0 4px 16px rgba(77,65,181,.3); }
.bc-fav-badge { background:#fff; color:var(--bc-accent); border-radius:var(--bc-radius-pill);
  min-width:20px; height:20px; display:grid; place-items:center; font-family:var(--bc-font-mono); font-size:11px; }
.bc-fav-panel { position:fixed; left:var(--bc-sp-4);
  bottom:calc(var(--bc-tap) + var(--bc-sp-6) + var(--bc-sm-bar, 0px));
  width:320px; max-height:60vh; z-index:940; background:var(--bc-surface); border:1px solid var(--bc-rule);
  box-shadow:0 8px 32px rgba(31,26,36,.16); display:none; flex-direction:column; }
.bc-fav-panel[data-open="true"] { display:flex; }
.bc-fav-panel__head { display:flex; align-items:center; justify-content:space-between;
  padding:var(--bc-sp-3) var(--bc-sp-4); border-bottom:1px solid var(--bc-rule); }
.bc-fav-list { overflow-y:auto; }
.bc-fav-item { display:flex; align-items:center; gap:var(--bc-sp-3); padding:var(--bc-sp-3) var(--bc-sp-4);
  border-bottom:1px solid var(--bc-rule); }
.bc-fav-item__link { display:flex; align-items:center; gap:var(--bc-sp-3); flex:1; min-width:0;
  color:inherit; text-decoration:none; }
.bc-fav-item__link:hover .bc-fav-item__name { color:var(--bc-accent); text-decoration:underline; }
.bc-fav-item img { width:48px; height:48px; object-fit:cover; flex-shrink:0; border:1px solid var(--bc-rule); }
.bc-fav-item__body { min-width:0; flex:1; }
.bc-fav-item__name { font-size:var(--bc-fs-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0; }
.bc-fav-item__price { font-family:var(--bc-font-mono); font-size:var(--bc-fs-xs); color:var(--bc-mute); margin:0; }
.bc-fav-empty { padding:var(--bc-sp-7) var(--bc-sp-4); text-align:center; color:var(--bc-mute); font-size:var(--bc-fs-sm); }
.bc-fav-cta { padding:var(--bc-sp-4); border-top:1px solid var(--bc-rule); background:var(--bc-accent-wash); }
.bc-fav-cta p { font-size:var(--bc-fs-xs); color:var(--bc-mute); margin:0 0 var(--bc-sp-2); line-height:1.6; }
.bc-fav-cta a { display:flex; align-items:center; justify-content:center; min-height:var(--bc-tap);
  background:var(--bc-accent); color:#fff; text-decoration:none; border-radius:var(--bc-radius); font-size:var(--bc-fs-sm); }

/* =========================================================================
   詳細ページ
   ========================================================================= */
.bc-backlink { display:inline-flex; align-items:center; gap:var(--bc-sp-2); min-height:var(--bc-tap);
  font-family:var(--bc-font-label); font-size:var(--bc-fs-xs); letter-spacing:var(--bc-ls-label);
  text-transform:uppercase; color:var(--bc-accent); text-decoration:none; }
.bc-backlink:hover { text-decoration:underline; }

.bc-detail { padding-bottom:var(--bc-sp-9); }
@media (min-width:1024px){
  .bc-detail { display:grid; grid-template-columns:5fr 7fr; gap:var(--bc-sp-7); align-items:start; }
  .bc-detail__media { position:sticky; top:var(--bc-sp-4); }
}
.bc-hero-img { aspect-ratio:1/1; object-fit:cover; width:100%; background:var(--bc-surface); border:1px solid var(--bc-rule); }
.bc-angles-group { margin-top:var(--bc-sp-4); }
.bc-angles-label { font-family:var(--bc-font-label); font-size:var(--bc-fs-xs); letter-spacing:var(--bc-ls-label);
  text-transform:uppercase; color:var(--bc-mute); margin-bottom:var(--bc-sp-2); display:flex; align-items:center; gap:var(--bc-sp-2); }
.bc-angles { display:grid; grid-template-columns:repeat(5,1fr); gap:var(--bc-sp-2); }
.bc-angle-btn { aspect-ratio:1/1; padding:0; background:none; border:1px solid var(--bc-rule); overflow:hidden; }
.bc-angle-btn:hover { border-color:var(--bc-accent); }
.bc-angle-btn[aria-current="true"] { border-color:var(--bc-accent); border-width:2px; }
.bc-angle-btn img { width:100%; height:100%; object-fit:cover; }

.bc-detail__title { font-size:var(--bc-fs-lg); font-weight:400; line-height:var(--bc-lh-tight); margin:0; }
@media (min-width:768px){ .bc-detail__title{ font-size:var(--bc-fs-xl); } }
.bc-detail__subtitle { font-size:var(--bc-fs-base); color:var(--bc-mute); margin-top:var(--bc-sp-1); }
.bc-price { font-family:var(--bc-font-mono); font-size:var(--bc-fs-md); margin-top:var(--bc-sp-3); }
@media (min-width:1024px){ .bc-price{ font-size:var(--bc-fs-lg); } }

/* 素材×価格の複数組（type1〜3） */
.bc-prices { margin-top:var(--bc-sp-3); display:flex; flex-direction:column; gap:var(--bc-sp-2); }
.bc-price-row { display:flex; align-items:baseline; justify-content:space-between; gap:var(--bc-sp-3);
  padding-bottom:var(--bc-sp-2); border-bottom:1px dotted var(--bc-rule); }
.bc-price-row__material { font-size:var(--bc-fs-sm); color:var(--bc-ink); }
.bc-price-row__price { font-family:var(--bc-font-mono); font-size:var(--bc-fs-md); white-space:nowrap; }
/* 詳細ページのスウォッチ（色＋金属名を組ごとに） */
.bc-swatch-item { display:inline-flex; align-items:center; gap:var(--bc-sp-2); }
.bc-width-alert { display:block; }

.bc-spec { margin-top:var(--bc-sp-6); }
.bc-spec__head { font-family:var(--bc-font-label); font-size:var(--bc-fs-xs); letter-spacing:var(--bc-ls-wide);
  text-transform:uppercase; color:var(--bc-mute); padding-bottom:var(--bc-sp-2); border-bottom:1px solid var(--bc-rule); font-weight:400; margin:0; }
.bc-spec__list { margin:0; }
.bc-spec__row { display:grid; grid-template-columns:8em 1fr; gap:var(--bc-sp-3);
  padding-block:var(--bc-sp-3); border-bottom:1px solid var(--bc-rule); }
@media (min-width:768px){ .bc-spec__row{ grid-template-columns:10em 1fr; } }
.bc-spec__key { font-size:var(--bc-fs-xs); color:var(--bc-mute); line-height:var(--bc-lh-base); }
.bc-spec__val { margin:0; }
.bc-spec__val--num { font-family:var(--bc-font-mono); }
.bc-spec__note { display:block; font-size:var(--bc-fs-xs); color:var(--bc-mute); margin-top:var(--bc-sp-1); }
.bc-spec__alert { display:block; font-size:var(--bc-fs-xs); color:var(--bc-alert); margin-top:var(--bc-sp-2); }
.bc-pair-alert { margin:0; }
.bc-price-alert { margin:0 0 var(--bc-sp-4); }
/* 商品詳細の「さらに詳細を見る」開閉（絞り込みの bc-filterbar__more と同じ挙動） */
.bc-spec__more { margin-top:var(--bc-sp-2); }
.bc-spec__more > summary { display:inline-flex; align-items:center; gap:var(--bc-sp-2); cursor:pointer;
  list-style:none; min-height:var(--bc-tap); font-family:var(--bc-font-label); font-size:var(--bc-fs-xs);
  letter-spacing:var(--bc-ls-label); text-transform:uppercase; color:var(--bc-accent); }
.bc-spec__more > summary::-webkit-details-marker { display:none; }
.bc-spec__more > summary::after { content:"\25BE"; transition:transform var(--bc-dur) var(--bc-ease); }
.bc-spec__more[open] > summary::after { transform:rotate(180deg); }
.bc-spec__more > summary:hover { color:var(--bc-accent-deep); }
.bc-spec__list--more { margin-top:var(--bc-sp-2); }

.bc-caption { margin-top:var(--bc-sp-6); max-width:34em; line-height:var(--bc-lh-base); }
.bc-caption h2 { font-family:var(--bc-font-label); font-size:var(--bc-fs-xs); letter-spacing:var(--bc-ls-wide);
  text-transform:uppercase; color:var(--bc-mute); font-weight:400; margin-bottom:var(--bc-sp-2); }

.bc-postnav { display:flex; justify-content:space-between; gap:var(--bc-sp-4);
  margin-top:var(--bc-sp-8); padding-top:var(--bc-sp-4); border-top:1px solid var(--bc-rule); }
.bc-postnav a { display:inline-flex; align-items:center; min-height:var(--bc-tap);
  color:var(--bc-accent); text-decoration:none; font-size:var(--bc-fs-sm); }
.bc-postnav a:hover { text-decoration:underline; }

/* ---- 来店予約フォームへの誘導ボタン ------------------------------------- */
.bc-visit { text-align:center; }
.bc-visit-btn { display:inline-flex; align-items:center; justify-content:center; min-height:var(--bc-tap);
  padding-inline:var(--bc-sp-6); background:var(--bc-accent); color:#fff; border-radius:var(--bc-radius-pill);
  font-size:var(--bc-fs-sm); letter-spacing:.08em; text-decoration:none; }
.bc-visit-btn:hover, .bc-visit-btn:focus { background:var(--bc-accent-deep); color:#fff; }
.bc-visit--fav { padding:var(--bc-sp-3) var(--bc-sp-4); border-top:1px solid var(--bc-rule); }
.bc-visit--fav .bc-visit-btn { width:100%; }
.bc-visit--detail { margin-top:var(--bc-sp-7); padding-bottom:var(--bc-sp-7); }

/* ---- 一覧トップ画像（/bangle/ と同じ見せ方） ------------------------------- */
.bc-hero { position:relative; box-shadow:3px 7px 6px -6px #cccccc; }
.bc-hero__img { width:100%; }
.bc-hero__text { padding-block:var(--bc-sp-5) 0; }
.bc-hero__text .bc-pagehead__lead { max-width:460px; }
@media (min-width:768px){
  /* ヘッダー（約130px）と下部の指輪にかからない、画像左上の余白に重ねる */
  .bc-hero__text { position:absolute; top:max(150px, 12vw); left:0; right:0; padding-block:0; }
}