/* ========== product-single.css（single-product専用 / パンくず含む） ========== */

:root {
  --tuf-accent: var(--color_main, #0f6c6a);
  --tuf-text: #2b2f33;
  --tuf-subtext: #5a6672;
  --tuf-border: #e6ebf1;
  --tuf-bg-soft: #f5f7fa;
  --tuf-card-bg: #fff;
}

/* --------------------------------
 * 単体（single-product）
 * -------------------------------- */
.single-product .post_content .p-entry__body{
  background:var(--tuf-card-bg);
  border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,.06);
  padding:2.2em;
  margin-top:1.2em;
  color:var(--tuf-text);
}
.single-product .p-entry__thumb{display:flex;justify-content:center;align-items:center;text-align:center;margin:0 auto;}
.single-product .p-entry__thumb .tuf-mainImg{
  width: clamp(240px, 60vw, 520px);
  height: auto; display:block; margin:0 auto;
  background:#f4f6f8; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.08);
  object-fit:cover; object-position:center;
}
/* 本文側 NoImage（taxonomyと同トーン） */
.single-product .p-entry__thumb .tuf-thumbNoimg{
  display:grid; place-items:center;
  width: clamp(240px, 60vw, 520px); aspect-ratio:1/1;
  border-radius:8px; background:#f4f6f8; border:1px dashed #dfe6ee;
  color:#8aa; font-size:11px; font-weight:600; box-shadow:0 2px 8px rgba(0,0,0,.08);
}

/* ACFテーブル */
.single-product .tuf-acfTable{display:grid;grid-template-columns:160px 1fr;gap:8px 16px;margin-top:2em;font-size:15px;color:var(--tuf-text)}
.single-product .tuf-acfTable .c-row{display:contents}
.single-product .tuf-acfTable .c-th{font-weight:700;color:#3b4550;border-bottom:1px solid #eef2f6;padding:.6em 0}
.single-product .tuf-acfTable .c-td{border-bottom:1px solid #eef2f6;padding:.6em 0;color:#28323b}
.single-product .p-entry__section h2{font-size:1.12em;margin-top:2.2em;border-left:4px solid var(--tuf-accent);padding-left:.6em;color:#2a3138}
.single-product .p-entry__section{line-height:1.8;font-size:15px;color:#3a4550;background:#fafafa;border-radius:8px;padding:1.4em;margin-top:1em}

/* メタ要素の非表示 */
.single-product .postMeta,
.single-product .p-postMeta,
.single-product time[datetime],
.single-product .c-postTags,
.single-product .p-postTags{display:none!important}

/* 本文カード幅（PC） */
@media (min-width:1025px){
  .single-product .post_content .p-entry__body{max-width:800px;margin-left:auto;margin-right:auto;}
}
@media (max-width:768px){
  .single-product .post_content .p-entry__body{padding:1.4em}
  .single-product .tuf-acfTable{grid-template-columns:1fr}
  .single-product .tuf-acfTable .c-th{border:none;color:#7a8896;font-weight:600;padding-top:.6em}
  .single-product .tuf-acfTable .c-td{padding-bottom:.8em;border-bottom:1px solid #eef2f6}
}

/* --------------------------------
 * 関連商品（常に横並び：左=画像 / 右=テキスト+価格）
 * -------------------------------- */

/* 見出し（白文字の帯） */
.single-product .tuf-related{margin-top:40px}
.single-product .tuf-related__title{
  font-size:1.2em;font-weight:700;line-height:1.4;margin:0 0 14px;
  color:#fff;background:var(--tuf-accent);padding:8px 14px;border-radius:6px;
}

/* 一覧の列数（PC=2列, SP=1列） */
@media (min-width:1025px){
  .single-product .tuf-related .tuf-grid{
    display:grid!important; grid-template-columns:repeat(2, minmax(0,1fr))!important; gap:24px!important; margin:0!important;
  }
}
@media (max-width:1024.98px){
  .single-product .tuf-related .tuf-grid{display:block!important}
}

/* カードの骨格：内側は常に 画像カラム + 情報カラム の横並び */
.single-product .tuf-related .tuf-card{
  background:var(--tuf-card-bg); border:1px solid var(--tuf-border); border-radius:12px; overflow:hidden;
  text-decoration:none; box-shadow:0 1px 4px rgba(0,0,0,.04);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  display:grid !important; align-items:center;
  grid-template-columns: 112px 1fr; /* SP既定：画像112px + 情報 */
  gap:16px; padding:14px; box-sizing:border-box;
}
.single-product .tuf-related .tuf-card:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.10);border-color:#d8e2ee;}
@media (min-width:640px){ /* タブレット～ */
  .single-product .tuf-related .tuf-card{grid-template-columns: 120px 1fr; padding:16px;}
}
@media (min-width:1025px){ /* PCで画像少し大きく */
  .single-product .tuf-related .tuf-card{grid-template-columns: 140px 1fr; padding:18px;}
}

/* 画像カラム：中央配置・1:1枠固定 */
.single-product .tuf-related .tuf-thumb{
  width:100%; aspect-ratio:1/1; border-radius:10px; background:#f4f6f8; border:1px solid #e9edf3;
  display:flex; justify-content:center; align-items:center; overflow:hidden; margin:0;
  box-sizing:border-box;
}
.single-product .tuf-related .tuf-thumbImg{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; object-position:center center; display:block;
}
/* NoImage（taxonomyと同トーン／中央・小さめ文字） */
.single-product .tuf-related .tuf-thumbNoimg{
  display:flex; justify-content:center; align-items:center; width:100%; height:100%;
  border:1px dashed #dfe6ee; border-radius:10px; background:#f4f6f8; color:#8aa; font-size:11px; font-weight:600;
}

/* 情報カラム */
.single-product .tuf-related .tuf-meta{min-width:0;display:flex;flex-direction:column;gap:6px;}
.single-product .tuf-related .tuf-artist{
  font-size:14px;line-height:1.35;font-weight:800;color:#1f2933;margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.single-product .tuf-related .tuf-title{
  font-size:13px;line-height:1.5;color:#3a4350;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.9em; /* 2行分確保で段差解消 */
}

/* 価格行（右寄りにしすぎず、行頭揃え） */
.single-product .tuf-related .tuf-price{
  margin-top:6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border-top:1px solid #eef2f6; padding-top:8px;
}
.single-product .tuf-related .tuf-priceLabel{
  font-size:11px;line-height:1;color:#285;background:#e7fbf3;border:1px solid #bff0de;border-radius:4px;padding:4px 6px
}
.single-product .tuf-related .tuf-priceValue{
  font-size:14px;font-weight:900;line-height:1;color:#fff;background:var(--tuf-accent);
  padding:6px 10px;border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.06)
}

/* --------------------------------
 * パンくず（上に寄せる）
 * -------------------------------- */
.tuf-bc-custom .p-breadcrumb:not(.tuf-breadcrumb){display:none!important}
.tuf-bc-custom .tuf-breadcrumb{
  position: static !important; text-align:left;
  margin-top:4px !important;   /* ←上に詰める */
  margin-bottom:8px !important;
  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-top:0 !important; padding-bottom:0 !important;
  padding-left:var(--swl-container-gutter,16px); padding-right:var(--swl-container-gutter,16px);
}
.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{color:#2c3e3f;text-decoration:none;transition:color .2s ease}
.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;}
}

/* --------------------------------
 * コンテナ幅（SP少し広く）
 * -------------------------------- */
@media (min-width:1025px){
  body.single-product #content.l-content.l-container{
    max-width:1089px !important;margin:0 auto !important;padding:0 16px !important;box-sizing:border-box !important;
  }
  body.single-product #content.l-content.l-container > .l-contents{
    display:grid !important; grid-template-columns:minmax(0,1fr) 320px !important; column-gap:32px !important; align-items:start !important;
  }
  body.single-product #content.l-content.l-container > .l-contents .l-main,
  body.single-product #content.l-content.l-container > .l-contents .l-sidebar{float:none !important; clear:none !important; display:block !important;}
}
@media (max-width:1024.98px){
  body.single-product #content.l-content.l-container{
    width:100% !important;margin:0 auto !important;padding-left:12px !important;padding-right:12px !important;box-sizing:border-box !important;
  }
  body.single-product #content.l-content.l-container > .l-contents{display:block !important}
  body.single-product #content.l-content.l-container .l-sidebar{display:block !important;margin-top:24px !important;}
  .single-product img, .single-product video{max-width:100%!important;height:auto!important}
  .single-product table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .single-product .p-entry__body{overflow-wrap:anywhere;word-break:break-word}
}

/* ===== スマホ時：関連商品の画像カラムを小さく、右側を広く ===== */
@media (max-width: 768px){
  .single-product .tuf-related .tuf-card {
    grid-template-columns: 90px 1fr !important; /* ← 以前 112px → 90px に縮小 */
    gap: 12px !important;
    padding: 12px 14px !important;
  }
  .single-product .tuf-related .tuf-thumb {
    width: 100%;
    aspect-ratio: 1/1;
    max-width: 90px;
    height: auto;
  }
  .single-product .tuf-related .tuf-thumbImg {
    object-fit: contain;
    object-position: center center;
    width: 100%;
    height: 100%;
  }
  .single-product .tuf-related .tuf-thumbNoimg {
    font-size: 10px; /* ← 文字も少し小さく */
  }
  .single-product .tuf-related .tuf-meta {
    padding-right: 4px; /* 右側の詰まりを解消 */
  }
}

/* ===== 曲名が下線に被らないように下余白を確保 ===== */
.single-product .tuf-related .tuf-title {
  margin-bottom: 6px;            /* タイトルと下線の間にスペース追加 */
  padding-bottom: 2px;           /* 行高によるズレ対策 */
  line-height: 1.45;             /* 行送りを少し広めにして読みやすく */
  min-height: auto !important;   /* 高さ固定を解除して自然な高さに */
  -webkit-line-clamp: unset;     /* 行制限を無効化（折返し許可） */
  line-clamp: unset;
  display: block !important;     /* マルチラインを自然に表示 */
  overflow: visible !important;  /* テキスト切れ防止 */
  white-space: normal !important;
}

/* スマホ用微調整（行間を少し詰め） */
@media (max-width:768px){
  .single-product .tuf-related .tuf-title {
    margin-bottom: 4px;
    line-height: 1.4;
  }
}

/* ===== 関連商品カード：影をなくして枠だけに変更 ===== */
.single-product .tuf-related .tuf-card {
  box-shadow: none !important;           /* 影を完全除去 */
  border: 1px solid #dfe6ee !important;  /* 枠線のみ表示 */
  transition: border-color .15s ease;
}

/* hover時も動かさず、色変化のみ */
.single-product .tuf-related .tuf-card:hover {
  transform: none !important;            /* 浮かせない */
  box-shadow: none !important;           /* 影なし */
  border-color: #cfd7df !important;      /* hover時にわずかに濃く */
}

/* ===== 個別商品カード（本文部分）の影を削除・枠線のみに ===== */
.single-product .post_content .p-entry__body {
  box-shadow: none !important;           /* 影なし */
  border: 1px solid #dfe6ee !important;  /* 薄い枠線で囲む */
  background: #fff !important;
}

/* ===== 関連商品カード：hover時に背景色を変化（影なし） ===== */
.single-product .tuf-related .tuf-card {
  box-shadow: none !important;              /* 常に影なし */
  border: 1px solid #dfe6ee !important;
  background: #fff !important;
  transition: background-color .2s ease, border-color .2s ease;
}

/* hover時：淡いグリーン背景で反応させる */
.single-product .tuf-related .tuf-card:hover {
  background-color: #f1fbf9 !important;     /* TU-Field基調の淡い緑 */
  border-color: #c3e7dc !important;         /* やや濃い枠線 */
}

/* ===== スマホ専用：個別商品カードを枠なし・全幅表示に ===== */
@media (max-width: 768px){
  .single-product .post_content .p-entry__body {
    border: none !important;        /* 枠を消す */
    box-shadow: none !important;    /* 影も完全に削除 */
    border-radius: 0 !important;    /* 角丸も削除して画面いっぱいに */
    margin-left: -12px !important;  /* コンテナpaddingぶん左へ拡張 */
    margin-right: -12px !important; /* 同右 */
    width: calc(100% + 24px) !important; /* コンテナpaddingを相殺して全幅化 */
    padding: 1.6em 1.4em !important;     /* 内側余白だけ保持 */
    background: #fff !important;
    box-sizing: border-box;
  }
}

/* ===== スマホ：関連商品カード間の余白を確保 ===== */
@media (max-width: 768px){
  .single-product .tuf-related .tuf-card {
    margin-bottom: 16px !important;  /* ← カード同士の間隔を確保 */
  }

  /* 最後のカードだけは余白を少し減らす */
  .single-product .tuf-related .tuf-card:last-child {
    margin-bottom: 8px !important;
  }

  /* 全体の下余白（関連商品ブロック下）も少し広げる */
  .single-product .tuf-related {
    margin-bottom: 24px !important;
  }
}

/* ===== PC時：パンくずを左寄せに強制 ===== */
@media (min-width: 1025px){
  .tuf-bc-custom .tuf-breadcrumb .l-container {
    text-align: left !important;
  }

  .tuf-bc-custom .tuf-breadcrumb .p-breadcrumb__list {
    justify-content: flex-start !important;  /* ← 左寄せを強制 */
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .tuf-bc-custom .tuf-breadcrumb {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

/* ===== パンくずの位置と余白調整 ===== */
.tuf-breadcrumb {
  margin-top: -8px !important;     /* ← 少し上へ（テーマヘッダーとの間を詰める） */
  margin-bottom: 32px !important;  /* ← 商品カードとの距離を広げる */
  padding-bottom: 4px !important;  /* 見た目の呼吸スペース */
}

/* スマホではもう少しゆったり */
@media (max-width: 768px){
  .tuf-breadcrumb {
    margin-top: -4px !important;
    margin-bottom: 24px !important;
  }
}

/* ===== パンくずの位置をさらに上へ（PC/SP共通） ===== */
.tuf-breadcrumb {
  margin-top: -32px !important;    /* ← 上に強く引き上げる */
  margin-bottom: 36px !important;  /* 商品カードとの距離をさらに確保 */
  padding-bottom: 4px !important;
  position: relative;
  z-index: 2;                      /* ヘッダーの下に潜り込まないように */
}

/* スマホでは少し控えめに */
@media (max-width: 768px){
  .tuf-breadcrumb {
    margin-top: -24px !important;
    margin-bottom: 28px !important;
  }
}

/* =========================================================
 * スマホ：single-product の関連商品を taxonomy-products と統一
 * ========================================================= */
@media (max-width: 768px) {
  .single-product .tuf-related .tuf-grid {
    display: block !important;
  }
  .single-product .tuf-related .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;
    width: 100%;
  }
  .single-product .tuf-related .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;
  }
  .single-product .tuf-related .tuf-thumbImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .single-product .tuf-related .tuf-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    min-width: 0;
  }
  .single-product .tuf-related .tuf-artist {
    font-size: 15px;
    font-weight: 700;
    color: #222;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .single-product .tuf-related .tuf-title {
    font-size: 13.5px;
    color: #444;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .single-product .tuf-related .tuf-price {
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
  }
  .single-product .tuf-related .tuf-priceLabel {
    font-size: 11px;
    color: #246;
    background: #eef6ff;
    border: 1px solid #e1ecff;
    border-radius: 4px;
    padding: 3px 5px;
  }
  .single-product .tuf-related .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);
  }

  /* 横幅をやや拡張（画面いっぱいに近づける） */
  .single-product .tuf-related {
    margin-left: -8px;
    margin-right: -8px;
  }
}

/* =========================================================
 * single-product：パンくずリスト位置調整（PC・SP共通）
 * ========================================================= */

/* 共通で少し上へ */
.single-product .tuf-breadcrumb {
  margin-top: -8px !important;      /* ← 少し上げる（位置調整） */
  margin-bottom: 24px !important;   /* 下との間隔を確保 */
  position: relative;
  z-index: 2;
}

/* PC時はもう少し上へ（headerとの一体感） */
@media (min-width: 1025px){
  .single-product .tuf-breadcrumb {
    margin-top: -20px !important;   /* ← PCではさらに上へ */
    margin-bottom: 32px !important; /* 見出しとのバランス */
  }
}

/* スマホでは軽く詰める（現状良いとのことなので微調整のみ） */
@media (max-width: 768px){
  .single-product .tuf-breadcrumb {
    margin-top: -6px !important;
    margin-bottom: 20px !important;
  }
}

/* =========================================================
 * single-product：パンくずリストをさらに上へ移動
 * ========================================================= */

/* --- 共通 --- */
.single-product .tuf-breadcrumb {
  position: relative;
  z-index: 3;
  margin-top: -40px !important;   /* ← ぐっと上に上げる */
  margin-bottom: 28px !important; /* 下との距離を確保 */
}

/* --- PC --- */
@media (min-width: 1025px) {
  .single-product .tuf-breadcrumb {
    margin-top: -56px !important;  /* ← ヘッダー直下まで引き上げ */
    margin-bottom: 36px !important;
  }
}

/* --- スマホ --- */
@media (max-width: 768px) {
  .single-product .tuf-breadcrumb {
    margin-top: -20px !important;  /* ← 少し控えめに上げる */
    margin-bottom: 24px !important;
  }
}

/* =========================================================
 * single-product：パンくず位置 & コンテンツ余白 微調整
 * ========================================================= */

/* --- 共通 --- */
.single-product .tuf-breadcrumb {
  margin-top: -28px !important;   /* ← 以前より少し下げる */
  margin-bottom: 28px !important; /* 下との距離を確保 */
  position: relative;
  z-index: 3;
}

/* --- PC --- */
@media (min-width: 1025px) {
  .single-product .tuf-breadcrumb {
    margin-top: -50px !important;  /* ← 少し下げる（前より上げすぎ防止） */
    margin-bottom: 36px !important;
  }
}

/* --- スマホ --- */
@media (max-width: 768px) {
  .single-product .tuf-breadcrumb {
    margin-top: -20px !important;  /* ← 少し下げる */
    margin-bottom: 16px !important; /* ← コンテンツとの余白を少し狭める */
  }

  /* スマホの本文全体を少し上に */
  .single-product .p-entry__body {
    margin-top: 10px !important;
  }
}

/* =========================================================
 * single-product：本文とサイドバーの間隔（余白）調整
 * ========================================================= */

/* PCのみ適用（スマホは縦積みなので不要） */
@media (min-width: 1025px){
  .single-product .l-contents {
    gap: 40px !important;  /* ← 以前より少し広め（既存は32px想定） */
  }

  /* 念のため子要素にも干渉しないようマージン補正 */
  .single-product .l-main {
    margin-right: 0 !important;
  }
  .single-product .l-sidebar {
    margin-left: 0 !important;
  }
}

/* =========================================================
 * single-product：本文とサイドバーの間隔をさらに広げる
 * ========================================================= */
@media (min-width: 1025px){
  .single-product .l-contents {
    gap: 56px !important;  /* ← 40px → 56px に拡大 */
  }

  /* 万一のレイアウト崩れ対策 */
  .single-product .l-main {
    margin-right: 0 !important;
  }
  .single-product .l-sidebar {
    margin-left: 0 !important;
  }
}

/* ===== スマホ：重複する親テーマ側のサイドバーを隠す ===== */
@media (max-width: 1024.98px){
  /* 子テーマの独自サイドバーは .tuf-side
     親テーマ側は .l-sidebar なので、スマホでは .l-sidebar を非表示に */
  .single-product .l-sidebar { 
    display: none !important;
  }
}

/* 念のための保険：同一ラッパ内に .l-sidebar が複数出た場合は2個目以降を非表示（PCでも効く） */
.single-product .l-contents .l-sidebar ~ .l-sidebar {
  display: none !important;
}