/* ========================================================= 
   SGIaltar - 2-level Category Toolbar Styles
   PC: セレクト2つ + Apply + Sort
   SP: 親チップ → 子チップ（2行まで + もっと見る）
   ========================================================= */

/* ---- tokens ---- */
:root{
  --sgi-gap: 16px;
  --sgi-gap-sm: 10px;
  --sgi-bd: 1px solid #ddd;
  --sgi-radius: 6px;
  --sgi-text: #222;
  --sgi-muted: #666;
  --sgi-bg: #fff;
}

/* ---- base ---- */
.sgi-toolbar{
  position: relative;
  z-index: 100;
  margin: 10px 0 14px;
  color: var(--sgi-text);
}
.sgi-label{ font-size: 12px; color: var(--sgi-muted); }

/* PC/モバイル切替 */
@media (max-width:1023px){
  .is-desktop{ display:none !important; }
  .is-mobile{ display:block; }
}
@media (min-width:1024px){
  .is-desktop{ display:flex; }
  .is-mobile{ display:none !important; }
}

/* ===== PC: レイアウト ===== */
.sgi-toolbar__pc{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: var(--sgi-gap);
  flex-wrap: wrap;
}
.sgi-toolbar__left{
  display:flex;
  align-items:flex-end;
  gap: var(--sgi-gap-sm) var(--sgi-gap);
  flex-wrap: wrap;
}
.sgi-field{ display:flex; flex-direction:column; gap:4px; }
.sgi-select{
  min-width: 220px;
  height: 44px;
  padding: 6px 8px;
  border: var(--sgi-bd);
  border-radius: var(--sgi-radius);
  background: var(--sgi-bg);
  color: var(--sgi-text);
}
.sgi-apply{
  height: 44px;
  padding: 0 14px;
  border: var(--sgi-bd);
  border-radius: var(--sgi-radius);
  background: #f7f7f7;
  cursor: pointer;
}

/* カテゴリページで親を隠す（デフォルト） */
.sgi-toolbar[data-hide-parent="1"] .sgi-field--parent{ display:none; }
.sgi-toolbar[data-hide-parent="1"] .sgi-field--toggle-parent{ display:block; }
.sgi-toolbar[data-hide-parent="0"] .sgi-field--toggle-parent{ display:none; }

/* 「カテゴリを変更」リンク */
.sgi-link{
  display:inline-flex; align-items:center; gap:6px;
  height: 28px; padding: 0 8px;
  font-size: 12px; color:#0070f3; background:transparent; border:none; cursor:pointer;
}

/* ===== Sort by（TCD / nice-select）前面化＆クリッピング防止 ===== */
.sgi-toolbar__right,
.p-archive03-sort-filter,
.p-archive03-sort-filter-item,
.p-archive03-sort-filter-item-title,
.p-archive03-sort-filter-item-dropdown,
.sgi-toolbar__right .woocommerce-ordering,
.sgi-toolbar__right .woocommerce-ordering .nice-select,
.sgi-toolbar__right .woocommerce-ordering .nice-select .list{
  position: relative !important;
  z-index: 99999 !important;
  overflow: visible !important;
}

/* 祖先 overflow:hidden 緩和 */
.woocommerce-products-header,
.woocommerce-products-header__title,
.page_header,
.bnr_area,
.section{
  overflow: visible !important;
}

/* nice-select のリストをスクロール可能に */
.woocommerce-ordering .nice-select .list{
  max-height: 60vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* ===== アクセシビリティ ===== */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.sgi-toolbar .woocommerce-ordering label{
  position:absolute !important;
  width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important;
  overflow:hidden !important; clip:rect(0,0,0,0) !important;
  white-space:nowrap !important; border:0 !important;
}

/* ====== TCDドロップダウン（UL）の体裁リセット＋開閉制御 ====== */
.p-archive03-sort-filter-item{ position: relative; }
.p-archive03-sort-filter-item > .p-archive03-sort-filter-item-dropdown{
  position: absolute !important; top: 100% !important; left: 0 !important;
  min-width: 220px !important; width: auto !important;
  max-height: 60vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important;
  margin-top: 6px !important; padding: 6px 0 !important;
  background: #fff !important; color:#222 !important;
  border: 1px solid #e5e5e5 !important; border-radius: 6px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
  z-index: 100000 !important;
  display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important;
  transition: none !important; animation: none !important;
}
.p-archive03-sort-filter-item.is-active > .p-archive03-sort-filter-item-dropdown{
  display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important;
}
.p-archive03-sort-filter-item-dropdown li{ list-style: none !important; margin:0 !important; padding:0 !important; }
.p-archive03-sort-filter-item-dropdown li a{
  display: block !important;
  padding: 10px 12px !important;
  color: #222 !important; text-decoration: none !important;
  font-size: 14px !important; line-height: 1.6 !important;
  white-space: nowrap !important; box-sizing: border-box !important;
}
.p-archive03-sort-filter-item-dropdown li a:hover{ background:#f5f5f5 !important; }
.p-archive03-sort-filter-item-dropdown li a.is-current{ font-weight:600 !important; }

/* =========================================================
   モバイル版: 親チップ＝2行まで表示＋もっと見る
   ========================================================= */
@media (max-width:1023px){
  /* PC用セレクトはSPで隠す */
  .sgi-toolbar__pc .sgi-field--parent,
  .sgi-toolbar__pc .sgi-field--child,
  .sgi-toolbar__pc .sgi-apply { display:none !important; }

  .sgi-toolbar__mobile{ padding: 8px 0; }

  /* 親チップ：初期は2行まで */
  .sgi-chips.sgi-chips--parents{
    display:flex; flex-wrap:wrap; gap:8px;
    max-height:96px;               /* 2行分 */
    overflow:hidden;
    position:relative;
    transition:max-height 0.3s ease;
    padding:4px 2px 6px;
  }
  .sgi-chips.sgi-chips--parents.is-expanded{
    max-height:none; overflow:visible;
  }

  /* フェード効果 */
  .sgi-chips--fade::after{
    content:"";
    position:absolute; bottom:0; left:0;
    width:100%; height:36px;
    background:linear-gradient(to bottom, rgba(255,255,255,0), #fff);
    pointer-events:none;
  }

  /* 子チップ：折り返し */
  .sgi-chips.sgi-chips--children{
    display:flex; flex-wrap:wrap; gap:8px;
    overflow:visible; margin-top:8px;
  }

  /* チップ pill */
  .sgi-chip{
    display:inline-flex; align-items:center;
    flex:0 0 auto;
    min-height:40px;
    max-width:calc(100vw - 32px);
    padding:8px 12px;
    border-radius:999px; border:var(--sgi-bd);
    background:var(--sgi-bg); color:var(--sgi-text);
    font-size:14px; line-height:1.2;
    text-decoration:none; cursor:pointer;
    white-space:normal; word-break:break-word;
    user-select:none;
  }
  .sgi-chip:hover{ background:#f3f3f3; }
  .sgi-chip.is-active{ background:#111; color:#fff; border-color:#111; }
  .sgi-chip--more{ font-weight:600; background:#f1f1f1; }

  /* “もっと見る”ボタン */
  .sgi-showmore{
    display:inline-block;
    margin-top:8px;
    padding:6px 12px;
    font-size:13px;
    color:#0070f3;
    background:#f8f8f8;
    border:1px solid #ddd;
    border-radius:20px;
    cursor:pointer;
  }

  /* 親要素のoverflow隠しを解除 */
  .sgi-toolbar__mobile,
  .woocommerce-products-header,
  .woocommerce-products-header__title,
  .page_header, .bnr_area, .section{
    overflow:visible !important;
  }
}
/* --- SP 親チップの切れ対策（高さ制限・隠し解除） --- */
@media (max-width:1023px){
  .sgi-chips.sgi-chips--parents{
    max-height: none !important;   /* ← 96px を無効化 */
    height: auto !important;
    overflow: visible !important;
    flex-wrap: wrap !important;    /* 折り返し表示を確実化 */
  }

  /* 念のため、親要素側の隠しも解除 */
  .sgi-toolbar__mobile{ overflow: visible !important; }
}