/* ========== product-archive.css（taxonomy-products専用 / 共通パンくず含む） ========== */

:root { --tuf-accent: var(--color_main, #0f6c6a); }

/* --------------------------------
 * taxonomy-products（一覧デザイン）
 * -------------------------------- */
.tax-products .tuf-archiveHead{margin:12px 0 16px}
.tax-products .tuf-archiveTitle{font-size:clamp(20px,2.2vw,26px);font-weight:700;margin:0 0 6px}
.tax-products .tuf-termIntro{
  font-size:13.5px;line-height:1.9;color:#555;background:#fafafa;
  border:1px solid #eee;border-radius:8px;padding:10px 12px
}

/* カードグリッド（PC=3カラム、SP=1カラム） */
.tax-products .tuf-grid{display:grid;gap:18px}
@media (min-width:1025px){ .tax-products .tuf-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:768px){ .tax-products .tuf-grid{grid-template-columns:1fr;gap:12px} }

/* カード本体 */
.tax-products .tuf-card{
  display:block;background:#fff;border:1px solid #eee;border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  overflow:hidden;text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tax-products .tuf-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.08);border-color:#e6e6e6}

/* サムネ */
.tax-products .tuf-thumb{aspect-ratio:1/1;background:#f4f6f8;display:grid;place-items:center;overflow:hidden;margin:0}
.tax-products .tuf-thumbImg{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.tax-products .tuf-thumbNoimg{
  width:100%;height:100%;display:grid;place-items:center;color:#8aa;font-size:12px;
  border:1px dashed #dfe6ee;background:linear-gradient(180deg,#f7f9fb 0%,#f0f4f8 100%);
}

/* テキスト */
.tax-products .tuf-meta{padding:10px 12px 12px}
.tax-products .tuf-artist{font-size:13px;color:#222;font-weight:700;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tax-products .tuf-title{
  font-size:15px;line-height:1.5;color:#222;margin:0 0 8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* 価格バッジ */
.tax-products .tuf-price{display:flex;gap:6px;align-items:center;margin-top:auto}
.tax-products .tuf-price .tuf-priceLabel{
  font-size:12px;line-height:1;background:#eef6ff;color:#246;
  padding:4px 6px;border-radius:4px;border:1px solid #e1ecff;
}
.tax-products .tuf-price .tuf-priceValue{
  font-weight:800;color:#fff;background:var(--tuf-accent);
  padding:6px 10px;border-radius:6px;line-height:1;box-shadow:0 1px 2px rgba(0,0,0,.06);
}

/* taxonomy はサイドバー非表示（テンプレ骨格は維持） */
.tax-products .l-sidebar,
.tax-products #sidebar,
.tax-products [class*="sidebar"]{display:none!important}
.tax-products .l-contents{display:block!important}

/* ページネーションは中央寄せのみ */
.tax-products .p-pagination,
.tax-products .wp-pagenavi,
.tax-products .nav-links{
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:40px;
}
.tax-products .p-pagination ul,
.tax-products .wp-pagenavi ul{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.tax-products .p-pagination li,
.tax-products .wp-pagenavi li{display:inline-flex;align-items:center;justify-content:center;margin:0}

/* スマホ：横並びカード */
@media (max-width:768px){
  .tax-products .tuf-grid{display:block!important}
  .tax-products .tuf-card{
    display:flex!important;align-items:center!important;gap:12px!important;
    border-radius:10px;border:1px solid #eee;box-shadow:0 1px 4px rgba(0,0,0,.05);
    padding:10px 14px;margin-bottom:10px;text-decoration:none;
  }
  .tax-products .tuf-thumb{flex:0 0 90px;width:90px;height:90px;border-radius:8px;overflow:hidden;display:flex!important;justify-content:center;align-items:center;background:#f4f6f8}
  .tax-products .tuf-thumbImg{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
  .tax-products .tuf-meta{flex:1;display:flex;flex-direction:column;gap:4px;overflow:hidden;min-width:0}
  .tax-products .tuf-artist{font-size:15px;font-weight:700;color:#222;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tax-products .tuf-title{font-size:13.5px;color:#444;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tax-products .tuf-price{margin-top:2px}
  .tax-products .tuf-priceLabel{font-size:11px}
  .tax-products .tuf-priceValue{font-weight:800;color:#fff;background:var(--tuf-accent,#0f6c6a);padding:5px 8px;border-radius:6px;line-height:1;box-shadow:0 1px 2px rgba(0,0,0,.06)}
}

/* --------------------------------
 * 幅・中央寄せ・サイドバー痕跡の除去（taxonomy専用）
 * 旧 product.css にあった保険指定を統合移行
 * -------------------------------- */
.tax-products {
  --swl-container-width: 1240px;     /* 必要なら 1200〜1320px で微調整 */
  --swl-container-gutter: 24px;
}
.tax-products .l-container{
  max-width: var(--swl-container-width) !important;
  margin-left:auto !important; margin-right:auto !important;
  padding-left: var(--swl-container-gutter) !important;
  padding-right: var(--swl-container-gutter) !important;
  box-sizing: border-box !important;
}
.tax-products .l-contents{
  width:100% !important; max-width:none !important; float:none !important;
  display:block !important; box-sizing:border-box !important; min-width:0;
}
.tax-products .tuf-product-archive{
  max-width: var(--swl-container-width);
  margin:0 auto; padding-left:var(--swl-container-gutter); padding-right:var(--swl-container-gutter);
  box-sizing:border-box;
}
@media (min-width:1025px){
  .tax-products .tuf-grid{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:24px !important; justify-items:stretch;
  }
}
.tax-products img{max-width:100%;height:auto;display:block}
.tax-products .tuf-card{min-width:0;box-sizing:border-box}

/* SPで左右余白を標準化（はみ出し防止） */
@media (max-width:767px){
  .tax-products{ --swl-container-gutter: 16px; }
  .tax-products .tuf-grid{display:block !important}
}

/* --------------------------------
 * パンくず（tuf-breadcrumb）← 旧 product.css から完全移行
 * -------------------------------- */
/* SWELL既定のパンくずは非表示（自作のみ表示） */
.tuf-bc-custom .p-breadcrumb:not(.tuf-breadcrumb){display:none!important}

/* 基本：左寄せ・通常フロー。持ち上げ禁止 */
.tuf-bc-custom .tuf-breadcrumb{
  position: static !important;
  text-align:left;
  margin:12px 0 12px;
  padding:0;
  max-width:var(--swl-container-width,1180px);
}
.tuf-bc-custom .tuf-breadcrumb .l-container{
  max-width:var(--swl-container-width,1180px);
  margin:0 auto;
  padding-left:var(--swl-container-gutter,16px);
  padding-right:var(--swl-container-gutter,16px);
}

/* 横並びを左寄せに固定（親の center 指定を無効化） */
.tuf-bc-custom .tuf-breadcrumb .p-breadcrumb__list{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start !important;margin:0;
  gap:.25em .5em;
}

/* テキストとリンクの見た目（リンク色・ホバー色を復元） */
.tuf-bc-custom .tuf-breadcrumb a,
.tuf-bc-custom .tuf-breadcrumb span{
  font-size:.95em;
}
.tuf-bc-custom .tuf-breadcrumb a{
  color:#2c3e3f;text-decoration:none;transition:color .2s ease;
  display:inline-flex;align-items:center;gap:.3em;
}
.tuf-bc-custom .tuf-breadcrumb a:hover{ color:#5e6c6d }

/* ホームアイコン */
.tuf-bc-custom .tuf-breadcrumb .icon-home{
  font-size:1em;line-height:1;display:inline-block;position:relative;top:-1.5px;vertical-align:middle;color:inherit;
}

/* スマホ末尾省略 */
@media (max-width:767px){
  .tuf-bc-custom .tuf-breadcrumb .p-breadcrumb__item.is-current span{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:80vw;vertical-align:bottom;
  }
}

/* =========================================================
 * スマホ最適化：横幅を広げ、パンくずを上に配置
 * ========================================================= */

/* --- スマホ横幅を広げる（左右余白を最小限に） --- */
@media (max-width: 768px){
  .tax-products .l-container,
  .tax-products .tuf-product-archive {
    padding-left: 8px !important;
    padding-right: 8px !important;
    max-width: none !important;
  }

  /* カード間の詰まりを少し緩める */
  .tax-products .tuf-card {
    margin-bottom: 14px !important;
  }
}

/* --- パンくずの位置をさらに上へ（共通調整） --- */
.tuf-bc-custom .tuf-breadcrumb {
  margin-top: -28px !important;   /* ← ヘッダー直下に近づける */
  margin-bottom: 28px !important; /* ← カードとの間隔を十分に */
  position: relative;
  z-index: 2;
}

/* スマホでは控えめに上げる（レイアウト崩れ防止） */
@media (max-width: 768px){
  .tuf-bc-custom .tuf-breadcrumb {
    margin-top: -20px !important;
    margin-bottom: 24px !important;
  }
}

/* ===== ジャンル説明ボックス（.tuf-termIntro）余白調整 ===== */
.tax-products .tuf-termIntro {
  padding: 16px 18px !important;  /* ← 上下・左右とも余裕を持たせる */
  line-height: 1.9;
  border-radius: 10px;
}

/* スマホではややゆったり */
@media (max-width: 768px){
  .tax-products .tuf-termIntro {
    padding: 18px 20px !important;
  }
}

/* =========================================================
 * PC向け：パンくずとコンテンツ全体をさらに上に引き上げる
 * ========================================================= */
@media (min-width: 1025px){
  /* パンくずの上余白を削減（よりヘッダー直下に） */
  .tuf-bc-custom .tuf-breadcrumb {
    margin-top: -36px !important;   /* ← 上へ引き上げる */
    margin-bottom: 36px !important; /* 下はしっかり余白を確保 */
  }

  /* アーカイブ全体（グリッド・本文）を上に詰める */
  .tax-products .tuf-product-archive {
    margin-top: -16px !important;   /* ← 全体を少し上へ */
  }

  /* 一部テーマでcontainerが余白を持つ場合の保険 */
  .tax-products .l-container {
    padding-top: 0 !important;
  }
}

/* =========================================================
 * コンテンツ全体の位置調整（パンくずはそのまま）
 * ========================================================= */

/* --- PC & スマホ共通でコンテンツ（カード一覧）を上に寄せる --- */
.tax-products .tuf-product-archive {
  margin-top: -12px !important;  /* ← 全体を少し上へ */
}

/* スマホではさらに上げる（見た目の詰まり防止） */
@media (max-width: 768px){
  .tax-products .tuf-product-archive {
    margin-top: -20px !important;  /* ← 少し強めに上げる */
  }
}

/* =========================================================
 * PCとスマホでの位置調整（パンくず・コンテンツ）
 * ========================================================= */

/* --- PC --- */
@media (min-width: 1025px){
  /* パンくず：やや下げて自然な位置に戻す */
  .tuf-bc-custom .tuf-breadcrumb {
    margin-top: 0 !important;         /* ← 元の位置に戻す */
    margin-bottom: 28px !important;   /* コンテンツとの間隔を確保 */
  }

  /* コンテンツ（カード一覧）：少し上へ */
  .tax-products .tuf-product-archive {
    margin-top: -10px !important;     /* ← 少しだけ上に詰める */
  }
}

/* --- スマホ --- */
@media (max-width: 768px){
  /* パンくずはそのまま */
  
  /* コンテンツをさらに上に詰める（体感で20〜30pxほど） */
  .tax-products .tuf-product-archive {
    margin-top: -36px !important;     /* ← より上に引き上げる */
  }
}

/* =========================================================
 * PCのパンくずを少し下げて自然な位置に調整
 * ========================================================= */
@media (min-width: 1025px){
  .tuf-bc-custom .tuf-breadcrumb {
    margin-top: 12px !important;       /* ← 少し下げる（±0→+12px） */
    margin-bottom: 28px !important;    /* コンテンツとの間隔をキープ */
  }

  /* コンテンツとの重なりを防ぎ、全体のバランスを維持 */
  .tax-products .tuf-product-archive {
    margin-top: -8px !important;
  }
}

/* =========================================================
 * ジャンル一覧ページ（taxonomy-products）カードの見た目調整
 * ========================================================= */

/* 通常状態：影を削除して枠線だけのフラットデザインに */
.tax-products .tuf-card {
  border: 1px solid #ddd !important;
  box-shadow: none !important;
  background: #fff !important;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* ホバー時：枠の色と背景を少しトーンアップ */
.tax-products .tuf-card:hover {
  border-color: var(--tuf-accent, #0f6c6a) !important;
  background: #f9fdfa !important;  /* ごく薄いアクセントトーン */
  transform: none !important;      /* 浮かせ効果はなしで静的に */
  box-shadow: none !important;
}

/* スマホ時も同様（軽い色変化だけ維持） */
@media (max-width: 768px){
  .tax-products .tuf-card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
  .tax-products .tuf-card:active,
  .tax-products .tuf-card:hover {
    border-color: var(--tuf-accent, #0f6c6a) !important;
    background: #f9fdfa !important;
  }
}

/* =========================================================
 * スマホ：ジャンル一覧ページ（taxonomy-products）の曲名折り返し調整
 * ========================================================= */
@media (max-width: 768px) {
  .tax-products .tuf-title {
    font-size: 14px;
    line-height: 1.5;
    color: #222;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;      /* ← 2行まで表示 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;        /* ← nowrapを解除 */
    text-overflow: ellipsis;    /* ← はみ出し防止 */
  }
}