/*
 * 猫サプリ（CPT supplement）専用の薄い上書きCSS。
 * 原則は food/treat の既存クラス（.bp-card / .search-card-h / .concern-* / .cross-cmp-* / .food-arc-*）に合わせ、
 * ここはサプリ固有で既存クラスに無い最小限のスタイルだけを置く（新規デザインは作らない）。
 * supplement.php が supplement 系ページでのみ enqueue する。
 */

/* ===== HERO stats: 2セル（該当商品/ブランド）を中央寄せ ===== */
/* 流用元は 1fr 1fr 1fr の3カラムgrid＝2セルだと左に寄るため、supplementページのみ2カラム中央寄せに上書き */
.supplement-lp .concern-craft .food-arc-stats-row {
  grid-template-columns: repeat(2, minmax(0, auto));
  justify-content: center;
  column-gap: 3rem;
}
/* 2セル時は外側の右罫線が浮くので消す（左罫線＝セパレータは残す） */
.supplement-lp .concern-craft .food-arc-stat-cell--divider {
  border-right: none;
}

/* ===== YMYL 注意文（冒頭・腎/肝/認知のみ表示）===== */
.supp-ymyl-alert {
  margin: 1rem auto;
  max-width: 900px;
  padding: 1rem 1.2rem;
  background: #fff8e1;
  border: 1px solid #ffe0a3;
  border-radius: 8px;
  font-size: .9rem;
  line-height: 1.8;
  color: #5d4a1f;
}

/* ===== YMYL 免責フッタ（全サプリページ）===== */
.supp-ymyl-footer {
  font-size: .82rem;
  color: #6b7280;
  line-height: 1.8;
  margin: 0;
}

/* ===== 評価基準の確認3点（番号付き）。.concern-selection-checklist は list-style:none のため上書き ===== */
.concern-craft .concern-criteria-points {
  list-style: decimal;
  padding-left: 1.6em;
  margin: .6em 0 1em;
}
.concern-craft .concern-criteria-points li {
  list-style: decimal;
  margin: .25em 0;
  padding-left: .2em;
}

/* ===== 比較表: 商品列（label列以外）の横幅を広げて窮屈さを解消（supplementページのみ） ===== */
.supplement-lp .cross-cmp-table th:not(.cross-cmp-label-col),
.supplement-lp .cross-cmp-table td:not(.cross-cmp-label-col) {
  min-width: 150px;
}
/* 主成分セルは切り詰めず折返して全表示 */
.cross-cmp-table td.supp-cmp-ing {
  white-space: normal;
  line-height: 1.5;
}

/* ===== 要約が収まりきった（ボタン不要）カードは薄め表示をやめ全文を不透明で見せる =====
   サプリの要約はフード(約345字)より短く(約193字)、PC全幅では2行に収まりボタンが出ない。
   その際フェード(opacity 0.4)＋下端グラデが「隠れてそうなのにボタンが無い」誤認を生むため打ち消す。 */
.search-card-h-summary.is-fits .search-card-h-summary-body-wrap {
  opacity: 1;
  max-height: none;
}
.search-card-h-summary.is-fits .search-card-h-summary-body-wrap::after {
  opacity: 0;
}

/* ===== single-supplement: treat由来クラスの不足分を補う =====
   single-supplement.php は single-treat.php の .treat-* マークアップ（HERO種類チップ／スコアカードの
   目安量あたり注記／成分・安全性チェックグリッド／全成分トグル／注意リスト）を流用しているが、
   それらの実体は treats.css 側にあり、サプリページでは treats.css を enqueue しないため未適用になる。
   ここに single-treat と同値で移植し、.supplement-craft にスコープして商品ページの体裁を揃える。
   （treat 配色変数 --treat-* も treats.css 限定のため値を直書き） */

/* HERO: 剤形チップ（「カプセル」「粒」など） */
.supplement-craft .treat-hero-type {
  display: inline-block;
  margin: 0 0 8px;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #E8713A;
  background: rgba(232, 113, 58, 0.10);
  border-radius: 999px;
}

/* HEROスコアカード「1日あたり」行：ラベルと金額は1行で値段行と左右に揃え、注記だけ下段へ右寄せ折返し */
.supplement-craft .bp-score-pp100--serving { flex-wrap: wrap; }
.supplement-craft .bp-score-pp100--serving .bp-score-pp100-note {
  flex-basis: 100%;
  margin-top: 1px;
  text-align: right;
  color: var(--bp-text-3);
  font-size: 10px;
}

/* §INGREDIENT 主成分・含有量／安全性チェックのラベル・値グリッド */
.supplement-craft .treat-additive-grid { display: flex; flex-direction: column; gap: 1px; margin: 12px 0; background: rgba(107, 90, 77, 0.14); border-radius: 12px; overflow: hidden; }
.supplement-craft .treat-additive-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px; background: #fff; }
.supplement-craft .treat-additive-key { font-size: 13px; color: #8A7C70; font-weight: 600; }
.supplement-craft .treat-additive-val { font-size: 13px; font-weight: 700; color: #4A3F37; text-align: right; }
.supplement-craft .treat-additive-val.is-ok { color: #5B9A6B; }
.supplement-craft .treat-additive-val.is-warn { color: #C9512E; }
.supplement-craft .treat-additive-row--stack { flex-direction: column; align-items: flex-start; gap: 4px; }
.supplement-craft .treat-additive-row--stack .treat-additive-val { text-align: left; font-weight: 600; line-height: 1.55; }

/* §INGREDIENT 全成分トグル */
.supplement-craft .treat-ingredients-detail { margin-top: 12px; border-top: 1px solid rgba(107, 90, 77, 0.14); padding-top: 12px; }
.supplement-craft .treat-ingredients-detail summary { cursor: pointer; font-size: 13px; font-weight: 700; color: #E8713A; }
.supplement-craft .treat-ingredients-text { margin: 10px 0 0; font-size: 13px; line-height: 1.9; color: #4A3F37; }

/* §FEEDING 与え方の注意リスト */
.supplement-craft .treat-caution-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.supplement-craft .treat-caution-list li { position: relative; padding-left: 22px; font-size: 13px; line-height: 1.7; color: #4A3F37; }
.supplement-craft .treat-caution-list li::before { content: "⚠"; position: absolute; left: 0; top: 0; color: #E8713A; }

/* ===== 主成分・含有量テーブル: 含有量ヘッダを右揃えにして値（右揃えtd）と縦位置を揃える =====
   流用元 .food-nutrient-detail-table は th=左揃え/td=右揃え。ヘッダ行も th のため「含有量」が左に出て
   値「非開示」（td=右）と縦軸がズレる。含有量ヘッダだけ右揃えに上書きして列を揃える。 */
.food-craft .supp-active-table thead th:last-child {
  text-align: right;
}

/* ===== ハブ /supplements/ 悩み別TOPピック ブロック ===== */
.supplement-craft .supp-pick-block { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(107, 90, 77, 0.14); }
.supplement-craft .supp-pick-block:first-of-type { margin-top: 18px; padding-top: 0; border-top: 0; }
.supplement-craft .supp-pick-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.supplement-craft .supp-pick-block-title { font-size: 17px; font-weight: 800; color: #4A3F37; margin: 0; line-height: 1.4; }
.supplement-craft .supp-pick-more { flex: 0 0 auto; }
@media (max-width: 600px) {
  .supplement-craft .supp-pick-block-title { font-size: 15px; }
}

/* ===== References / Related のリスト ===== */
.supp-references-list {
  font-size: .85rem;
  line-height: 1.9;
  color: #555;
  margin: 0;
  padding-left: 1.2em;
}
.supp-related-list {
  line-height: 2;
  margin: 0;
  padding-left: 1.2em;
}