/* ===========================
   モイストローション（化粧品）商品詳細ページ
   - 既存 product-detail.css を土台に、化粧品用セクションのグルーと
     共通見出し（deco-heading）を定義する
   =========================== */

/* 化粧品ページはテキストを navy ではなく落ち着いたグレーで統一 */
.page-product-detail--cosmetic {
  --cosmetic-ink: #4c4c4c;
  --cosmetic-sub: #717171;
  --cosmetic-en: #e7f0f9;
  --gold-from: #dccbaa;
  --gold-to: #916c22;
}

/* ===========================
   共通装飾見出し（英字の淡い大文字 + 和字）
   INGREDIENTS / HOW TO USE / STEP で共用
   =========================== */
.deco-heading {
  text-align: center;
  margin-bottom: 56px;
}

.deco-heading__en {
  display: block;
  font-family: 'Zen Kaku Gothic New', sans-serif;   /* Figma: Zen Kaku Gothic New Medium */
  font-weight: 500;
  font-size: 55px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--cosmetic-en, #e7f0f9);
  user-select: none;
}

.deco-heading__ja-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: -18px;
}

.deco-heading__line {
  width: 120px;
  max-width: 22vw;
  height: 1px;
  background: #d3dbe4;
}

.deco-heading__ja {
  font-family: 'Zen Kaku Gothic New', sans-serif;   /* Figma: Zen Kaku Gothic New Medium */
  font-weight: 500;
  font-size: 30px;
  color: var(--cosmetic-sub, #555);
  line-height: 1.5;
  margin: 0;
  letter-spacing: 0.05em;
}

/* 区切り線付き見出し（美容成分）は、両側の線を flex:1 でグリッド幅まで伸ばす都合上、
   狭い幅で見出しテキスト（flexアイテム）が縮んで改行されやすい。
   テキストは縮ませず（改行させず）、線側だけが長さを調整するようにする。
   pill見出し（線を持たない HOW TO USE / STEP 等）には :has で波及しない。 */
.deco-heading__ja-wrap:has(.deco-heading__line) .deco-heading__ja {
  flex-shrink: 0;
  white-space: nowrap;
}

/* HOW TO USE / STEP の和見出しは淡い四角帯（Figma: #e7f0f9 のワイド帯・角丸なし・高さ64px） */
.deco-heading__ja--pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 868px;
  min-height: 64px;
  padding: 0 24px;
  background: rgba(231, 240, 249, 0.6);   /* #e7f0f9 を不透明度60%（Figma外の指定） */
  border-radius: 0;
  font-size: 36px;            /* Figma: 36px */
  letter-spacing: 0.05em;     /* Figma: tracking 1.8px */
  /* Figma: 英字「HOW TO USE」の下側が帯に重なる。
     親 .deco-heading__ja-wrap の margin-top:-18px を一部だけ打ち消して重なり量を調整 */
  margin-top: 5px;
}

/* ===========================
   セクション余白
   =========================== */
.ingredient-section {
  padding: 96px 0 100px;
  background: linear-gradient(to bottom, #fdfdfd 0%, #e8f1fb 100%);
}

.howto-section {
  /* Figma基準: 「適量を手のひらにとります。」下辺↔「お手入れステップ」見出し上辺=136px。
     この間隔 = howto下余白 + routine上余白 + STEP見出しの内部オフセット(約27px)。
     howto下48 + routine上60 + 27 ≒ 135 で Figma の 136 に合わせる（両白背景で分配は
     見た目に無関係なので合計で調整） */
  padding: 96px 0 48px;
  background: #ffffff;
}

.routine-section {
  padding: 60px 0 104px;   /* 上60px（howto下48pxと合わせ Figma 136px。上記コメント参照） */
  background: #ffffff;   /* Figma: お手入れステップの地色は完全な白（グラデなし・HOW TOと同じ） */
}

/* ===========================
   レスポンシブ
   =========================== */
@media (max-width: 1100px) {
  .deco-heading__en { font-size: 46px; }
  .deco-heading__ja { font-size: 26px; }
}

/* デスクトップ未満（≤1199px）は「その他」を縦積みにする。
   正方形画像は横並びだと横幅で頭打ちになり小さく見えるため、カード下へ回して
   画面幅に比例（62%・最大480px）で中央に大きく見せる。狭幅でも同じ比率＝同じ見え方。
   ※ ingredient-grid.css の モバイル(≤767px)用 splash幅160px も当ブロックで上書きする
     （並行セッション担当ファイルは触らず、後読み＋高specificityで勝たせる） */
@media (max-width: 1199px) {
  .page-product-detail--cosmetic .ingredient-other__body {
    width: 100%;
  }

  .page-product-detail--cosmetic .ingredient-other__splash {
    position: static;
    transform: none;
    top: auto;
    bottom: auto;
    display: block;
    height: auto;
    /* 幅は基本62%だが、狭幅で小さくなりすぎないよう最小260px床を設ける（400px前後で
       62%だと223px程度まで縮み小さく見えるため）。上限480pxは据置。段差なく連続スケール */
    width: clamp(260px, 62%, 480px);
    /* ingredient-grid.css の ≤767px ルール max-width:50% を打ち消す（これが無いと
       狭幅で画像が content の 50% で頭打ちになり clamp の床260pxが効かない）。
       上の clamp 上限(480px)と同値に保つこと（片方だけ変えると上限が不整合になる） */
    max-width: 480px;
    margin: 60px auto 0;   /* カード→画像を確保して画像を下げる */
  }

  /* デスクトップの絶対配置splash用に残っていた下パディング152pxを、
     縦積み用に詰めて 画像↔セクション下端 を カード↔画像 と揃える */
  .page-product-detail--cosmetic .ingredient-section {
    padding-bottom: 80px;
  }
}

@media (max-width: 767px) {
  .ingredient-section,
  .howto-section,
  .routine-section {
    padding: 64px 0 72px;
  }

  /* SP: howto↔routine は白背景同士で「お手入れステップ」見出しまで154pxと広く感じるため、
     howto下余白を詰めて 読める見出しまで≈130px にし、他区間（132〜144px）と揃える */
  .howto-section {
    padding-bottom: 48px;
  }

  .deco-heading {
    margin-bottom: 40px;
  }

  .deco-heading__en { font-size: 34px; }

  .deco-heading__ja-wrap {
    gap: 12px;
    margin-top: -12px;
  }

  .deco-heading__line { width: 48px; }

  .deco-heading__ja { font-size: 22px; }

  .deco-heading__ja--pill { padding: 8px 24px; }
}