/* =====================================================
   Shop/Search 専用サイドバー（整形・Design Tokens 準拠）
   Scope: .shop-sidebar / 外枠なし
   ===================================================== */

.shop-sidebar{
  /* map to design tokens */
  --sb-text:  var(--c-fg);
  --sb-muted: var(--c-fg-muted);
  --sb-hover: var(--c-fg);
  --row-gap:  var(--space-3);              /* 12px */
  --row-pad-y: calc(var(--space-2) - 2px); /* 6px 相当 */
  --chev-size: var(--fs-xs);               /* 12px */
  --indent:   var(--space-4);              /* 16px */

  color: var(--sb-text);
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  background: transparent;
  padding: 0;
}

/* 見出し */
.shop-sidebar-title{
  margin: 0 0 var(--space-3);
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
  letter-spacing: .02em;
}

/* リスト基礎 */
.shop-sidebar-list,
.shop-sidebar-children{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 親アイテム（区切り線なし、間隔のみ） */
.shop-sidebar-item + .shop-sidebar-item{
  margin-top: var(--row-gap);
}

/* 親行（リンク＋トグル） */
.shop-sidebar-parent{
  display: flex;
  align-items: center;
  gap: var(--space-2);          /* 8px */
  padding: var(--row-pad-y) 0;  /* 上下 */
}

/* 親リンク */
.shop-sidebar-parent-link{
  flex: 1 1 auto;
  min-width: 0;
  font-weight: var(--fw-regular);
  color: var(--sb-text);
  text-decoration: none;
  line-height: var(--lh-tight);
  padding-right: 4px;
}
.shop-sidebar-parent-link:hover{
  color: var(--sb-hover);
  text-decoration: underline;
}

/* トグル（矢印）右端揃え */
.shop-sidebar-toggle{
  appearance: none; -webkit-appearance: none;
  border: 0; background: transparent;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  margin-left: auto;
  border-radius: var(--radius-sm);
  cursor: pointer; line-height: 0;
}
.shop-sidebar-toggle i{
  font-size: var(--chev-size);
  color: #9aa0a6;
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.shop-sidebar-toggle:hover i{ color: #39434d; }
.shop-sidebar-toggle:focus-visible{ outline: 2px solid var(--c-fg); outline-offset: 2px; }
.shop-sidebar-toggle[aria-expanded="true"] i{ transform: rotate(180deg); }

/* 子リスト（折りたたみ） */
.shop-sidebar-children{
  margin-top: var(--space-2);       /* 8px */
  padding-left: var(--indent);      /* 16px */
  transition: opacity var(--dur) var(--ease);
  opacity: 1;
}
.shop-sidebar-children[hidden]{
  display: block !important;  /* レイアウトのガタつき防止 */
  opacity: 0; height: 0; overflow: hidden;
  margin-top: 0; padding-left: var(--indent);
}

/* 子アイテム */
.shop-sidebar-child + .shop-sidebar-child{
  margin-top: calc(var(--space-2) - 2px); /* 6px 相当 */
}

/* 子リンク */
.shop-sidebar-child-link{
  display: inline-block;
  color: var(--sb-muted);
  text-decoration: none;
  font-size: var(--fs-sm);  /* 13px */
}
.shop-sidebar-child-link:hover{
  color: var(--sb-hover);
  text-decoration: underline;
}

/* 視覚的非表示 */
.shop-sidebar .visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* 最初の親は上マージンなし */
.shop-sidebar-list > .shop-sidebar-item:first-child{ margin-top: 0; }

/* 固定表示オプション */
.shop-sidebar.is-sticky{ position: sticky; top: calc(var(--hdr-h, 96px) + var(--space-4)); }

/* モバイル微調整 */
@media (max-width: 767.98px){
  .shop-sidebar{ font-size: var(--fs-sm); }
  .shop-sidebar-title{ font-size: var(--fs-15); margin-bottom: var(--space-2); }
  .shop-sidebar-child-link{ font-size: var(--fs-xs); }
}

/* ===== アーカイブ上部の余白微調整（カテゴリ／ショップ／検索） ===== */
.tax-product_cat .plp-breadcrumbs,
.post-type-archive-product .plp-breadcrumbs,
.search.search-results.woocommerce .plp-breadcrumbs{
  margin-bottom: var(--space-2);  /* 8px */
}
.tax-product_cat .plp-header,
.post-type-archive-product .plp-header,
.search.search-results.woocommerce .plp-header{
  margin: 6px 0 10px;            /* トークンに無い 6/10 はそのまま */
}
.tax-product_cat .before-shop-loop,
.post-type-archive-product .before-shop-loop,
.search.search-results.woocommerce .before-shop-loop{
  margin: var(--space-2) 0 var(--space-4); /* 8px 0 16px */
}

/* ===== サイドバー：親カテゴリー行をタイトに（戻し要件） ===== */
.shop-sidebar{ --row-gap: calc(var(--space-2) - 2px); }  /* 6px 相当 */
.shop-sidebar-parent{ padding: 2px 0; }                  /* 2px 固定 */
.shop-sidebar-children{ margin-top: calc(var(--space-2) - 2px); } /* 6px */
.shop-sidebar-child + .shop-sidebar-child{ margin-top: 5px; }     /* 5px 固定 */


/* =====================================================
   Price filter (radio + pills) — sidebar style
   依存: variables.css（色/半径/フォント）
   使い所: .shop-sidebar 配下
   ===================================================== */

/* ▼ 価格セクションの上に区切り線＋下余白 */
.shop-price-bands{
  margin-top: var(--space-3, .75rem);
  padding-top: var(--space-3, .75rem);
  border-top: 1px solid var(--c-border, #e5e7eb);
  margin-bottom: var(--space-6, 1.5rem);   /* ← 価格の“下”に余白を追加 */
}

/* セクション見出し */
.shop-sidebar .shop-sidebar-title {
  font-size: var(--fs-15, 0.9375rem);
  font-weight: var(--fw-semibold, 600);
  margin: 0 0 var(--space-3, 0.8rem);
  color: var(--c-fg);
}

/* 価格帯ラジオ（チェック風の四角） */
.price-bands-list{ list-style:none; margin:0; padding:0; }
.price-bands-item + .price-bands-item{ margin-top: .35rem; }

.price-bands-radio{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  line-height: 1.6;
  cursor: pointer;
  user-select: none;
}

/* 視覚的に隠したラジオ（アクセシブル維持） */
.price-bands-radio input[type="radio"]{
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

/* ==== PLP準拠の配色（checkbox風） ==== */
.price-bands-mark{
  inline-size: 16px;
  block-size: 16px;
  border: 2px solid #cbd5e1;      /* デフォ枠 */
  border-radius: 4px;
  background: #fff;
  display: inline-grid;
  place-content: center;
  position: relative;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.price-bands-radio:hover .price-bands-mark{ border-color: #9aa6b2; }

/* フォーカスリング（キーボード操作時） */
.price-bands-radio input[type="radio"]:focus-visible + .price-bands-mark{
  box-shadow: 0 0 0 3px rgba(0,0,0,.10);
  border-color: #6b7280;
}

/* チェック時：枠濃く＋中央に小さな四角（#4a4a4a） */
.price-bands-radio input[type="radio"]:checked + .price-bands-mark{
  border-color: #6b7280;
}
.price-bands-radio input[type="radio"]:checked + .price-bands-mark::before{
  content: "";
  width: 8px; height: 8px;
  background: #4a4a4a;
  border-radius: 2px;
}

/* ラベル文字 */
.price-bands-label{
  color: var(--c-fg);
  font-size: var(--fs-14, .875rem);
}
.price-bands-label:has(> span){ display: inline-flex; gap: .35rem; }
.price-bands-label small,
.price-bands-label .tax-note{ color: var(--c-fg-muted); font-weight: 400; }

/* --- 手入力ピル（¥プレフィックス入り） --- */
/* 「価格を指定」ブロックの上下余白を確保 */
.shop-price-filter{
  margin-top: var(--space-4, 1rem);
  margin-bottom: var(--space-6, 1.5rem);   /* ← 価格を指定の“下”に余白を追加 */
}

.spf-row{ display:flex; gap:.5rem; align-items:center; }

.spf-input{
  position: relative;
  display: inline-flex;
  align-items: center;
}
.spf-input input[type="number"]{
  width: 112px;
  height: 40px;
  padding: 0 12px 0 36px;           /* ¥分のインデント */
  border: 1px solid var(--c-border);
  border-radius: var(--radius-full, 9999px);
  background: #fff;
  font-size: var(--fs-14, .875rem);
  color: var(--c-fg);
  outline: none;
  transition: border-color var(--dur,200ms) var(--ease),
              box-shadow var(--dur,200ms) var(--ease);
}
.spf-input input[type="number"]:focus{
  border-color: color-mix(in oklab, var(--c-brand-blue), #fff 30%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-brand-blue) 20%, transparent);
}
.spf-prefix{
  position: absolute;
  left: 12px;
  color: var(--c-fg-muted);
  font-family: var(--font-latin, system-ui);
  font-size: var(--fs-14, .875rem);
}

/* 適用 / リセット（適用はリンク風に） */
.spf-apply{
  appearance: none;
  border: 0;
  background: none;
  color: var(--c-brand-blue);
  height: auto;
  padding: 0;
  border-radius: 0;
  font-weight: var(--fw-medium, 500);
  cursor: pointer;
  line-height: 1.6;
}
.spf-apply:hover{ text-decoration: underline; }

.spf-reset{
  display: inline-flex;
  align-items: center;
  height: auto;
  padding: 0 0 0 .75rem; /* 適用と少し離す */
  color: var(--c-fg-muted);
  text-decoration: none;
  border-radius: 0;
  line-height: 1.6;
}
.spf-reset:hover{ color: var(--c-fg); text-decoration: underline; }

/* レスポンシブ微調整（狭い幅） */
@media (max-width: 767.98px){
  .spf-input input[type="number"]{ width: 108px; height: 38px; }
}