/* ===========================
   オールインワン美容液（化粧品）商品詳細ページ 個別スタイル
   - 共通グルー（deco-heading・セクション余白・cosmetic変数）は
     product-detail-moist.css を共用し、本ファイルは後読みで
     本商品固有の帯・成分一覧・緑テーマ上書きだけを持つ
   - Figma: node 875:71300（Water Life Series 9 オールインワン美容液50ml）
     cqw の構図基準幅は Figma 実測の 1046px（実描画は content-wrap 実効1200px
     基準に比率スケールする）
   - コピーの文字色は本商品のみ深緑 #083800、見出し英字は緑系（Figma準拠）
   =========================== */

.page-product-detail--allinone {
  --ai-green: #083800;
  --ai-en: #e0efdd;
  --ai-en-ing: #b6cab2;
  --ai-pill: rgba(224, 239, 221, 0.5);
}

/* 見出し英字とピルを緑系に上書き */
.page-product-detail--allinone .deco-heading__en { color: var(--ai-en); }
.page-product-detail--allinone .ai-ing-section .deco-heading__en { color: var(--ai-en-ing); }
.page-product-detail--allinone .deco-heading__ja--pill { background: var(--ai-pill); }

/* ===========================
   1. 帯「ハリ・潤いが1本に凝縮。」（商品オリジナル実装）
   緑グラデ背景 + コピー(483) + アロエ構図(520)
   =========================== */
.ai-band {
  position: relative;
  overflow: hidden;
}

.ai-band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(219deg, #e8f1e3 34%, #f1f2f0 87%);
}

/* 下端は成分セクションの上端色 #ebf1e9 へ溶かす */
.ai-band__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(235, 241, 233, 0) 60%, #ebf1e9 100%);
}

.ai-band__inner {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 60px;
  container-type: inline-size;
}

/* 構図本体（コピー483 ｜ ビジュアル520、gap43。基準幅 1046） */
.ai-band__stage {
  display: flex;
  align-items: center;
  gap: 4.111cqw;          /* 43 / 1046 */
  width: 100%;
  padding: 3.4cqw 0;
}

.ai-band__copy {
  flex: 0 0 46.176cqw;    /* 483 / 1046 */
  min-width: 0;
  position: relative;
  z-index: 2;
  color: var(--ai-green);
}

/* 化粧水・乳液・美容液・クリーム（Figma 24px・A1明朝 Bold の代替）
   Figma の A1明朝は Noto Serif JP で代替。太さは Bold(700)だと重すぎて
   Figma の繊細な A1明朝と乖離するため Regular(400)にする（skinwash 帯と同じ）。
   フォントサイズは cqw（連続可変）を使わず Figma 実寸の固定 px にし、可変は
   ブレイクポイントでのみ行う（§1・§5 ルール準拠）。※列幅・gap 等のレイアウト比率
   cqw は「Figma 構図比率を保つ」用途として §1 例外で維持。 */
.ai-band__sub {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.05em;
  line-height: 1.5;
  margin: 0;
  white-space: nowrap;
}

/* ハリ・潤いが1本に凝縮。（Figma 48px・が/に=38px・1=58px。
   本商品はコピーが長く、帯が横並びの最小幅(1101px付近)で 48px だと
   ビジュアルと衝突するため、比率を保ったまま 46/36/56px に微縮小して固定。 */
.ai-band__main {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 46px;
  letter-spacing: -0.05em;
  line-height: 1.5;
  margin: 0 0 1.63cqw;    /* 17 / 1046 */
  white-space: nowrap;    /* Figma: コピー枠を超えて1行で表示 */
}

.ai-band__main i {
  font-style: normal;
  font-size: 36px;
}

.ai-band__main em {
  font-style: normal;
  font-size: 56px;
}

.ai-band__desc {
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.05em;
  max-width: 42.5cqw;     /* 444 / 1046 */
}

/* ビジュアル（Figma Group 658 を1枚に書き出した合成画像。
   泡バッジ(化粧水/乳液/美容液/クリーム)・アロエ・水しぶき・ボトルを
   すべて焼き込み済みの透過PNG。基準 520x520=1:1） */
.ai-band__visual {
  flex: 0 0 49.713cqw;    /* 520 / 1046 */
  position: relative;
  z-index: 1;
  aspect-ratio: 1 / 1;
}

.ai-band__composite {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ===========================
   2. 成分セクション: 緑ペイント背景（moist のグラデを上書き）
   =========================== */
.ai-ing-section {
  position: relative;
  overflow: hidden;
  background: #ebf1e9;   /* ペイント画像のフォールバック */
}

.ai-ing-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ai-ing-section__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(104, 233, 30, 0.05), rgba(104, 233, 30, 0.05)),
    url('../assets/images/products/allinone/band-bg.png') center bottom / cover no-repeat;
}

.ai-ing-section__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* 上端: 帯から #ebf1e9 で受ける（下端の白フェードは Figma に無いため削除） */
  background: linear-gradient(to bottom, #ebf1e9 3%, rgba(255, 255, 255, 0) 40%);
}

.ai-ing-section > .content-wrap {
  position: relative;
  z-index: 1;
}

/* 成分カードは白ベタ（moist の半透明カードを上書き） */
.page-product-detail--allinone .ingredient-col {
  background: #ffffff;
}

/* 成分一覧（白カード・葉の透かし付き） */
.ai-list {
  position: relative;
  overflow: hidden;
  margin-top: 35px;
  background: #ffffff;
  border-radius: 15px;
  padding: 31px 42px 32px;
}

.ai-list__deco {
  position: absolute;
  right: 0;
  bottom: 0;            /* カード右下角に固定（レスポンシブで高さが変わっても切れない） */
  width: 298px;
  aspect-ratio: 298 / 221;   /* Figma のボックス比。素材は500×500正方形なので cover でこの比にトリミング */
  height: auto;
  object-fit: cover;
  object-position: center;
  opacity: 0.1;
  pointer-events: none;
}

.ai-list__title {
  position: relative;
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  font-size: 32px;
  text-align: center;
  line-height: 1.5;
  background: linear-gradient(to bottom, #dccbaa, #916c22);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #a8863f;
  margin: 0 0 8px;
}

.ai-list__text {
  position: relative;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #4c4c4c;
  margin: 0;
  word-break: break-word;
}

/* ===========================
   3. ご使用方法（番号入り1枚画像。共有 howto-steps.css をスコープ上書き）
   番号・イラストを1枚に焼き込んだ howto-step-0X.png を各ステップに配置。
   共有の固定アス比(681/864)と height:100% を解除し、画像の自然比で表示する。
   =========================== */
.page-product-detail--allinone .howto-step__img {
  aspect-ratio: auto;   /* 共有 howto-steps.css の 681/864 を解除＝画像の自然比で高さを決める */
}

.page-product-detail--allinone .howto-step__img img {
  height: auto;         /* 共有の height:100% を解除。width:100% は継承し列幅いっぱい・上揃え */
}

/* ===========================
   4. お手入れステップ: アイコンを img で供給
   =========================== */
.page-product-detail--allinone .routine-row__icon img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===========================
   レスポンシブ
   =========================== */
@media (max-width: 1100px) {
  /* 縦積み時は左右20pxガターに（合成画像を「左右20px残しの全幅」で見せる） */
  .ai-band__inner {
    container-type: normal;
    padding: 0 20px;
  }

  .ai-band {
    padding: 56px 0 0;
  }

  .ai-band__stage {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 0 24px;
  }

  .ai-band__copy {
    flex: 0 0 auto;
    width: 100%;
    text-align: center;
  }

  .ai-band__sub { font-size: 19px; }
  .ai-band__main { font-size: 34px; margin-bottom: 12px; }
  .ai-band__main i { font-size: 27px; }
  .ai-band__main em { font-size: 41px; }

  .ai-band__desc {
    font-size: 17px;
    line-height: 1.75;
    max-width: 620px;
    margin: 0 auto;
  }

  .ai-band__visual {
    flex: 0 0 auto;
    width: 100%;          /* inner の左右20px を残して全幅表示 */
    margin-top: 12px;
  }

  .ai-list__deco { width: 220px; }
}

@media (max-width: 767px) {
  .ai-band { padding-top: 40px; }

  /* SP は content-wrap と同じ左右20px */
  .ai-band__inner { padding: 0 20px; }

  .ai-band__sub { font-size: 15px; }
  .ai-band__main { font-size: 26px; }
  .ai-band__main i { font-size: 21px; }
  .ai-band__main em { font-size: 31px; }
  .ai-band__desc { font-size: 15px; }

  /* SP: 横長テクスチャ(1200x800)が縦長コンテナで cover 拡大され、
     塗りの濃い葉が大きく写って主張しすぎるため、白ヴェールを最前面に
     重ねて淡くする（テクスチャ自体は残し、質感だけ薄く見せる）。 */
  .ai-ing-section__bg::before {
    background:
      linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)),
      linear-gradient(rgba(104, 233, 30, 0.05), rgba(104, 233, 30, 0.05)),
      url('../assets/images/products/allinone/band-bg.png') center bottom / cover no-repeat;
  }

  .ai-list { padding: 20px 20px 24px; }
  .ai-list__title { font-size: 24px; }
  .ai-list__deco { width: 160px; }
}