/*============================================================
  公開サイト：商品詳細ページ（/shop/items/{displayId}）
  デザイン: 商品名 → 価格 → 在庫 → 説明 → カート（一覧と同ボタン・配送区分・表示ID行は非表示）
*============================================================*/

/* 商品詳細ページの body のみ：縦フレックスで main を伸ばしフッターを画面下付近へ */
body.maqe-shop-item-detail-page {
  /* ページ全体の下地を白に統一する */
  background-color: #fff;
  /* 短いコンテンツでも最低限ビューポート高を確保する */
  min-height: 100vh;
  /* ヘッダー・main・バナー・フッターを縦に並べる */
  display: flex;
  /* 主軸を縦方向にして下方向へ余白を分配可能にする */
  flex-direction: column;
}

/* 商品詳細ページの main のみ：残り高さを埋め詳細ブロック下に広い余白領域を作る */
body.maqe-shop-item-detail-page main.maqe-section-area {
  /* flex 子のうち main が伸びてフッター前の空きを確保する */
  flex: 1 0 auto;
  /* main 伸長部も含め背景を白で統一する */
  background-color: #fff;
}

/* 商品詳細の外枠ラッパー：共通セクション灰背景を上書きして白にする */
body.maqe-shop-item-detail-page .maqe-section-area .section-outer#shop-item-detail {
  /* セクション外周の背景を白にする */
  background-color: #fff;
}

/* フッター領域：ページ全体の白背景と切れ目が出ないようにする */
body.maqe-shop-item-detail-page > footer {
  /* フッター直下の背景色を白に統一する */
  background-color: #fff;
}

/* ヘッダー表示時：透過でグレーが見えないよう下地を白にする */
body.maqe-shop-item-detail-page > header {
  /* ヘッダー帯の背景を白に統一する */
  background-color: #fff;
}

.maqe-section-area .section-outer#shop-item-detail .shop-item-detail.section {
  /* 一覧カードと揃えた最大幅 */
  max-width: 980px;
  /* 横方向中央寄せ */
  margin-left: auto;
  /* 横方向中央寄せ */
  margin-right: auto;
  /* 商品情報エリアの白背景 */
  background: #fff;
  /* 角丸はデザインどおり維持 */
  border-radius: 16px;
  /* カード外周の影（枠線風）を付けない */
  box-shadow: none;
  /* 枠線を明示的に無効化する */
  border: none;
  /* 子の角丸はみ出しを隠す */
  overflow: hidden;
  /* ヘッダーと詳細の縦間隔をデザインに近づけるため共通72pxより詰める */
  padding-top: 16px;
  /* 白カード直下の最小下余白（大きな間は main の flex で確保） */
  padding-bottom: 24px;
}

.shop-item-detail-inner {
  padding: 24px;
}

.shop-item-detail-body {
  display: flex;
  flex-direction: row;
  gap: 32px;
  align-items: flex-start;
}

.shop-item-detail-left {
  flex: 0 0 320px;
  min-width: 0;
}

/* 2カラムより上に単独表示する「戻る」行（画像上端との縦位置調整用に左列から分離） */
.shop-item-detail-back-row {
  /* 戻る行の直下にある2カラムブロックとの縦間隔 */
  margin: 0 0 16px 0;
  /* インナー（.shop-item-detail-inner）の内容幅いっぱい */
  width: 100%;
  /* 幅計算で横はみ出しを防ぐ */
  box-sizing: border-box;
}

/* 戻るリンク：小さめグレー・下線なし（他CSSの a 色より優先するため body で限定） */
body.maqe-shop-item-detail-page .shop-item-detail-back-link {
  /* 上下左右の余白をゼロにする */
  margin: 0;
  /* 本文と同系のフォントファミリーを指定する */
  font-family: 'Noto Sans JP', sans-serif;
  /* 通常ウェイトで戻る導線として控えめに見せる */
  font-weight: 400;
  /* 14px で補助テキスト相当のサイズにする */
  font-size: 14px;
  /* 読みやすい行の高さを指定する */
  line-height: 1.4;
  /* 控えめなグレー文字色にする */
  color: #9E9E9E;
  /* ブラウザ既定の下線を付けない */
  text-decoration: none;
  /* ポインタカーソルでクリック可能であることを示す */
  cursor: pointer;
}

/* a 要素の未訪問・訪問済みでもブラウザ既定色にせずグレーを維持する */
body.maqe-shop-item-detail-page .shop-item-detail-back-link:link,
body.maqe-shop-item-detail-page .shop-item-detail-back-link:visited {
  /* リンク未訪問・訪問済みとも #9E9E9E を維持する */
  color: #9E9E9E;
  /* 訪問後も下線を付けない */
  text-decoration: none;
}

/* ホバー時も色調を維持しつつわずかに変化（下線は付けない） */
body.maqe-shop-item-detail-page .shop-item-detail-back-link:hover {
  /* ホバー時もベースのグレー色を維持する */
  color: #9E9E9E;
  /* わずかに薄くして押せることを示す */
  opacity: 0.85;
  /* ホバーでブラウザや他CSSが下線を付けないようにする */
  text-decoration: none;
}

/* キーボードフォーカス時もグレー同色・下線なし（フォーカスリングはブラウザ既定を維持） */
body.maqe-shop-item-detail-page .shop-item-detail-back-link:focus {
  /* フォーカス時も #9E9E9E を維持する */
  color: #9E9E9E;
  /* フォーカス時に下線が復活しないようにする */
  text-decoration: none;
}

/* 画像枠の灰背景を本ページでは白に統一する */
body.maqe-shop-item-detail-page .shop-item-detail-image-area {
  /* 横幅いっぱいに正方形比率を保つ */
  width: 100%;
  /* 1:1 の表示枠 */
  aspect-ratio: 1;
  /* 角丸 */
  border-radius: 8px;
  /* 画像のはみ出しを切る */
  overflow: hidden;
  /* プレースホルダ時も含め背景を白にする */
  background: #fff;
  /* 画像・プレースホルダを中央配置 */
  display: flex;
  /* 縦方向中央 */
  align-items: center;
  /* 横方向中央 */
  justify-content: center;
}

.shop-item-detail-image-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shop-item-detail-right {
  flex: 1;
  min-width: 0;
}

/* 商品名: 24px / 700 / #1E2023（右カラム先頭・下段との縦間隔） */
.shop-item-detail-title {
  margin: 0 0 20px 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  color: #1E2023;
}

/* 価格: 20px / 700 / #1E2023 */
.shop-item-detail-price {
  margin: 0 0 12px 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: #1E2023;
}

/* 在庫: 14px / 400 / #909090 */
.shop-item-detail-stock {
  margin: 0 0 20px 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: #909090;
}

/* 在庫管理ONかつ在庫1未満: 在庫文を MAQE ブランドピンク（#DC006A）にする */
.shop-item-detail-stock.shop-item-detail-stock--zero {
  /* 公開詳細のデフォルトグレーを上書きしてブランドピンクを適用する */
  color: #DC006A;
}

/* カートボタン直下の価格注記（在庫行と同一の 14px / 400 / #909090） */
.shop-item-detail-cart-price-notice {
  /* カートボタンとの縦方向の余白 */
  margin: 12px 0 0 0;
  /* 在庫行と同じフォントファミリー */
  font-family: 'Noto Sans JP', sans-serif;
  /* 在庫行と同じウェイト */
  font-weight: 400;
  /* 在庫行と同じ文字サイズ */
  font-size: 14px;
  /* 在庫行と同じ行高 */
  line-height: 1.6;
  /* 在庫行と同じ文字色 */
  color: #909090;
}

/* 商品説明: 14px / 400 / #1E2023 */
.shop-item-detail-description {
  margin: 0 0 24px 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: #1E2023;
  white-space: pre-wrap;
  word-break: break-word;
}

/* カートボタンは shop-section.css の .maqe-shop .shop-product-card-btn を継承（左寄せ・86×32） */
/* 商品詳細：在庫切れ時は一覧と同じくインライン style の色より優先してグレーアウトする */
body.maqe-shop-item-detail-page .shop-item-detail-right.maqe-shop .shop-product-card-btn.shop-product-card-btn--out-of-stock {
  background: #c4c4c4 !important;
  color: #666 !important;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 1;
}
body.maqe-shop-item-detail-page .shop-item-detail-right.maqe-shop .shop-product-card-btn.shop-product-card-btn--out-of-stock:hover {
  color: #666 !important;
  opacity: 1;
}

@media (max-width: 768px) {
  .shop-item-detail-body {
    flex-direction: column;
  }

  .shop-item-detail-left {
    flex: 0 0 auto;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
}