/* =============================================================
   NAFCO 商品詳細ページ リニューアル2026（NFCEC-1229）
   コーディングデータ __tmpl/nafco_product.css を移植。
   デザイントークン（--color-* 等）は common.css を前提とする。
   本CSSは site_frame.tpl の分岐で /products/detail.php のみ読込むため、
   セレクタは詳細ページにしか適用されない（body.nf-renewal でスコープ）。
   ============================================================= */


/* ─ 商品詳細ページ: コンテナをpadding含めてmax 1248px ─── */
body.nf-renewal .nf-container {
  max-width: 1248px;
}
/* =============================================================
   NAFCO 商品詳細ページ — nafco_top.css に追加して使用
   PSD: 商品詳細_pc.psd (1:1) / 商品詳細_sp.psd (2x ÷2)
============================================================= */

/* ─ リセット補完 ─────────────────────────────────────────── */
.nf-pd *, .nf-pd *::before, .nf-pd *::after { box-sizing: border-box; }
.nf-pd button { font-family: inherit; }

/* ─ パンくずナビ ─────────────────────────────────────────── */
/* 下線（border-bottom）は削除（クライアントFB 2026-07-27） */
.nf-breadcrumb {
  padding: 10px 0;
}
.nf-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.nf-breadcrumb__list li + li::before {
  content: " > ";
  margin: 0 4px;
  color: var(--color-text-secondary);
}
.nf-breadcrumb__list a { color: var(--color-text-secondary); text-decoration: none; }
.nf-breadcrumb__list a:hover { text-decoration: underline; }

/* ─ 商品詳細 メインラッパー ─────────────────────────────── */
.nf-pd {
  display: grid;
  grid-template-columns: 635px 1fr;
  grid-template-areas:
    "gallery spec-hd"
    "gallery spec-sub"
    "gallery spec-body";
  column-gap: 33px;
  padding-top: 24px;
  padding-bottom: 48px;
}
.nf-pd__gallery  { grid-area: gallery; }
.nf-pd__spec-hd  { grid-area: spec-hd; }
.nf-pd__spec-sub { grid-area: spec-sub; }
.nf-pd__spec-body{ grid-area: spec-body; }

/* ─ ギャラリー（サムネイル + メイン画像） ─────────────── */
.nf-pd__gallery {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  position: relative;
}

/* サムネイル縦並び */
.nf-pd__thumbs {
  flex-shrink: 0;
  width: 100px;
  height: 524px; /* メイン画像と同じ高さ */
}
/* スライダーモード（6枚以上）: clip */
.nf-pd__thumbs--slider {
  overflow: hidden;
}
.nf-pd__thumbs-track {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}
.nf-pd__thumb {
  width: 100px;
  height: calc((524px - 40px) / 5); /* (メイン高さ - gap×4) / 5 = 96.8px */
  border: 2px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: #f9f9f9;
  transition: border-color .15s;
  flex-shrink: 0;
}
.nf-pd__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.nf-pd__thumb:hover { border-color: #aaa; }
.nf-pd__thumb--active { border-color: var(--color-accent); border-width: 2px; }

/* メイン画像エリア */
.nf-pd__main-wrap {
  width: 524px;
  height: 524px;
  position: relative;
  overflow: hidden;
  cursor: crosshair;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg-primary);
  flex-shrink: 0;
}
.nf-pd__main-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* ズームレンズ */
.nf-pd__zoom-lens {
  position: absolute;
  width: 120px;
  height: 120px;
  border: 2px solid var(--color-accent);
  background: rgba(201,162,39,.08);
  display: none;
  pointer-events: none;
  z-index: 10;
}

/* ズーム結果パネル（メイン画像右外 ＝ スペック列に重なる） */
.nf-pd__zoom-result {
  position: absolute;
  left: calc(524px + 10px + 100px + 33px); /* gallery終端 + gap */
  top: 0;
  width: 460px;
  height: 460px;
  border: 1px solid var(--color-border);
  background-repeat: no-repeat;
  background-color: #fff;
  display: none;
  z-index: 200;
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
}

/* ─ スペック 上部（タイトル・キャッチ・コード・星） ─────── */
.nf-pd__spec-hd {
  padding-bottom: 12px;
}
.nf-pd__name {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-primary);
  margin: 0 0 10px;
}
.nf-pd__catch {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0 0 10px;
}
.nf-pd__codes {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin: 0 0 8px;
}
.nf-pd__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
}
.nf-pd__stars {
  display: inline-block;
  position: relative;
  font-size: 16px;
  letter-spacing: 2px;
  white-space: nowrap;
}
.nf-pd__stars::before {
  content: "★★★★★";
  color: #ddd;
}
.nf-pd__stars::after {
  content: "★★★★★";
  color: #f5a623;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: calc(var(--rating, 0) / 5 * 100%);
  white-space: nowrap;
}
.nf-pd__rating-score {
  font-size: 13px;
  font-weight: normal;
  color: var(--color-text-primary);
  margin-right: 2px;
}
.nf-pd__rating-count {
  font-size: 12px;
  color: var(--color-link);
  text-decoration: none;
  cursor: pointer;
}

/* ─ スペック 本体（価格・カート等） ──────────────────────── */
.nf-pd__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 12px 0 16px;
}

/* 価格 */
.nf-pd__prices { margin-bottom: 10px; }
.nf-pd__price-orig {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0 0 4px;
}
.nf-pd__price-orig del {
  color: var(--color-text-secondary);
}
.nf-pd__price-sale {
  font-size: 14px;
  color: var(--color-text-primary);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.nf-pd__price-sale strong {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text-primary);
}

/* ポイント */
.nf-pd__points {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin: 0 0 12px;
}

/* 配送バッジ */
.nf-pd__badges-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
@media (max-width: 767px) {
  .nf-pd__badges-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}
.nf-pd__badge {
  display: inline-block;
  background: var(--color-ui-dark);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 11px;
  color: #fff;
}
/* .nf-pd__mark-link → アコーディオンセクションで定義 */

/* 出荷予定 */
.nf-pd__shipping {
  font-size: 13px;
  color: var(--color-text-primary);
  margin: 0 0 16px;
}
.nf-pd__shipping-note {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-left: 8px;
}

/* バリエーション */
.nf-pd__var-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.nf-pd__var-label-text {
  font-size: 13px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}
.nf-pd__var-select {
  height: 40px;
  border: 1px solid var(--color-border-strong);
  border-radius: 4px;
  padding: 0 50px 0 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--color-text-primary);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M0 0l5 7 5-7z' fill='%23fff'/%3E%3C/svg%3E") no-repeat right 15px center,
    linear-gradient(to right, #fff calc(100% - 40px), var(--color-ui-dark) calc(100% - 40px));
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  min-width: 140px;
}

.nf-pd__var-type {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0 0 8px;
}

/* バリエーションボタンリスト（工事タイプ: 40x40画像＋名称テキスト、44x250固定ボタン） */
.nf-pd__var-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nf-pd__var-btn {
  box-sizing: border-box;
  width: 250px;
  height: 44px;
  display: flex;
  align-items: center;
  border: 1px solid var(--color-ui-dark); /* カートボタンと同色のケイ線 */
  border-radius: 4px;
  padding: 0;
  background: #fff;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: border-color .15s;
}
.nf-pd__var-btn:hover { border-color: #444; }
.nf-pd__var-btn--active {
  border-color: var(--color-accent);
  border-width: 2px;
}
.nf-pd__var-thumb {
  width: 40px;
  height: 40px;
  margin: 0 2px; /* 画像の余白2px（縦はflex中央寄せで確保） */
  overflow: hidden;
  flex-shrink: 0;
}
.nf-pd__var-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.nf-pd__var-text {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  line-height: 1.4;
  padding-right: 6px;
  color: var(--color-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 溢れるテキストは2行で「…」 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* カートエリア */
.nf-pd__cart-area {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.nf-pd__qty {
  position: relative;
  flex-shrink: 0;
}
.nf-pd__qty select {
  width: 93px;
  height: 47px;
  border: 1px solid var(--color-border-strong);
  border-radius: 4px;
  font-size: 16px;
  font-family: inherit;
  color: var(--color-text-primary);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M0 0l5 7 5-7z' fill='%23fff'/%3E%3C/svg%3E") no-repeat right 20px center,
    linear-gradient(to right, #fff calc(100% - 50px), var(--color-ui-dark) calc(100% - 50px));
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
  cursor: pointer;
  padding: 0 60px 0 10px;
}
.nf-pd__cart-btn {
  flex: 1;
  height: 47px; /* 数量プルダウン（.nf-pd__qty select）と同じ height */
  background: var(--color-ui-dark);
  color: #fff;
  border: none;
  border-radius: 4px; /* 共通アール（数量プルダウン等と同じ） */
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background .15s;
}
.nf-pd__cart-btn:hover { background: #444; }
.nf-pd__cart-btn svg { width: 24px; height: 24px; flex-shrink: 0; }
.nf-pd__fav-btn {
  width: 51px;
  height: 51px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  background: #f9f9f9;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: border-color .15s, color .15s;
  flex-shrink: 0;
}
.nf-pd__fav-btn:hover { border-color: #e74c3c; color: #e74c3c; }
.nf-pd__fav-btn svg { width: 20px; height: 20px; }


/* ─ よく一緒に購入されている商品 ─────────────────────────── */
.nf-pd-recommend {
  background: var(--color-bg-primary);
  padding: 32px 0 40px;
}
.nf-pd-recommend__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 20px;
  color: var(--color-text-primary);
}
.nf-pd-recommend__list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
/* グリッド内のnf-cardは幅を自動に */
.nf-pd-recommend__list .nf-card {
  width: auto;
  min-height: 0;
}


@media (max-width: 767px) {
  .nf-pd-recommend {
    padding: 20px 0 24px;
  }
  .nf-pd-recommend__title {
    font-size: 14px;
    margin-bottom: 12px;
  }
  /* SP: nf-shelf と同じ横スクロール */
  .nf-pd-recommend__list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--sp3);
    grid-template-columns: none;
  }
  .nf-pd-recommend__list::-webkit-scrollbar { display: none; }
  .nf-pd-recommend__list .nf-card {
    width: 143px;
    flex-shrink: 0;
    min-height: 0;
  }
}

/* ─ 商品説明セクション ────────────────────────────────── */
.nf-pd-desc {
  /* section 自体は幅制限なし / 背景・罫線は container 側で管理 */
  padding: 0;
}
.nf-pd-desc .nf-container {
  background: #fbf8f0;
  border-top: 1px solid #e5e5e5;
  padding-left: 0;
  padding-right: 0;
}
.nf-pd-desc__head {
  background: #f4ecd4;
  padding: 10px 16px;
  border: 1px solid #e5e5e5;
}
.nf-pd-desc__head h2 {
  font-size: 14px;
  font-weight: 600;
  color: #222;
  margin: 0;
  text-align: center; /* タイトル中央寄せ */
}
.nf-pd-desc__body {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-primary);
  overflow: hidden;
  transition: max-height 0.4s ease;
  padding: 20px 24px 0;
}
.nf-pd-desc__body--clamped {
  /* max-height set via JS based on line-height * 5 */
}
.nf-pd-desc__more-wrap {
  text-align: center;
  padding: 12px 0;
  background: #fbf8f0;
}
.nf-pd-desc__more {
  display: none;
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-family: inherit;
  color: #222222;
  cursor: pointer;
  text-decoration: underline;
  transition: color .15s;
}
.nf-pd-desc__more:hover { color: #555; }

/* ─ 決済方法 ─────────────────────────────────────────── */
.nf-pd-payment {
  padding: 0 0 32px;
}
.nf-pd-payment .nf-container {
  padding-top: 24px;
}
.nf-pd-payment__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}
.nf-pd-payment__body {
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-text-primary);
  margin-bottom: 16px;
}
.nf-pd-payment__notice {
  background: #fff;
  border: 1px solid #ff0000;
  padding: 12px 16px;
  font-size: 12px;
  line-height: 1.8;
  color: #ff0000;
  margin-bottom: 16px;
}
.nf-pd-payment__misc {
  font-size: 12px;
  line-height: 1.8;
  color: var(--color-text-primary);
}

/* ─ 商品棚（商品詳細ページ用） ─────────────────────────── */
.nf-pd-shelf {
  padding: 20px 0;
}
.nf-pd-shelf .nf-sec-hd {
  margin-bottom: 8px;
}
/* PC: コンテナpaddingを0にし、nf-shelfに24px padding でカードが右に入る */
@media (min-width: 768px) {
  .nf-pd-shelf .nf-container {
    padding-left: 0;
    padding-right: 0;
  }
  .nf-pd-shelf .nf-shelf {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ─ SP: 全体調整 ─────────────────────────────────────── */
@media (max-width: 767px) {

  .nf-pd-shelf { padding: 10px 0; }

  /* グリッド → 縦積み（SP順: 商品名→画像→キャッチ/コード/評価→価格/カート） */
  .nf-pd {
    display: flex;
    flex-direction: column;
    padding-top: 12px;
    padding-bottom: 32px;
    gap: 0;
  }
  .nf-pd__spec-hd  { order: 1; margin-bottom: 8px; }  /* 商品名: 画像より上 */
  .nf-pd__gallery  { order: 2; margin-bottom: 0; }
  .nf-pd__spec-sub { order: 3; padding: 12px 0 0; }    /* キャッチ・コード・評価: 画像下 */
  .nf-pd__spec-body{ order: 4; }

  /* SP タイトル */
  .nf-pd__name { font-size: 16px; margin-bottom: 0; }
  .nf-pd__catch { font-size: 12px; }

  /* SP ギャラリー */
  .nf-pd__gallery {
    gap: 6px;
    align-items: flex-start;
  }
  .nf-pd__thumbs {
    width: 56px;
    height: calc(56px * 5 + 6px * 4); /* 5枚分の高さに固定 */
    overflow: hidden;                  /* 6枚目以降はクリップ */
  }
  .nf-pd__thumbs--slider {
    height: calc(56px * 5 + 6px * 4); /* 同じ高さ（変化なし） */
  }
  .nf-pd__thumbs-track {
    gap: 6px;
    height: auto;
  }
  .nf-pd__thumb {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
  }
  .nf-pd__main-wrap {
    flex: 1;
    width: auto;
    height: calc(56px * 5 + 6px * 4); /* thumbsと同じ高さに揃える */
  }

  /* SP ズーム結果：非表示（タッチ時はオーバーレイ） */
  .nf-pd__zoom-result {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 280px;
    z-index: 800;
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
  }

  /* SP 価格 */
  .nf-pd__price-sale strong { font-size: 22px; }

  /* SP カートエリア */
  .nf-pd__cart-area { flex-wrap: wrap; gap: 10px; }
  .nf-pd__qty  { order: 1; }
  .nf-pd__fav-btn { order: 2; width: 44px; height: 44px; }
  .nf-pd__cart-btn { order: 3; flex: 0 0 100%; height: 38px; font-size: 15px; } /* SP数量プルダウンと同height */
  .nf-pd__qty select {
    width: 92px;
    height: 38px;
    padding: 0 45px 0 10px;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M0 0l5 7 5-7z' fill='%23fff'/%3E%3C/svg%3E") no-repeat right 12px center,
      linear-gradient(to right, #fff calc(100% - 35px), var(--color-ui-dark) calc(100% - 35px));
  }

  /* SP バリエーション選択行: ラベルがはみ出さないようセレクトを伸縮 */
  .nf-pd__var-select { min-width: 0; flex: 1; }

  /* SP バリエーションボタン */
  .nf-pd__var-text { font-size: 12px; }

  /* SP 商品説明 */
  .nf-pd-desc { margin: 0 16px; }
  .nf-pd-desc__head { padding: 8px 12px; }
  .nf-pd-desc__body { padding: 16px 12px 0; font-size: 13px; }

  /* SP 決済方法 */
  .nf-pd-payment__title { font-size: 16px; }
}

/* ─ SP スティッキーカートバー ─────────────────────────── */
/* ─ スティッキーカートバー（PC/SP共通）───────────────────── */
.nf-sp-cart {
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #f4ecd4; /* ベージュ */
  border-top: 1px solid #e5e5e5;
  z-index: 400; /* drawer(500) < z-index なのでドロワー展開時は隠れる */
  padding: 10px 0; /* バー高さを狭めて商品表示領域を確保 */
}
.nf-sp-cart__inner {
  max-width: var(--w-container);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.nf-sp-cart__qty select {
  width: 92px;
  height: 47px;
  border: 1px solid #bbb;
  border-radius: 4px;
  font-size: 15px;
  font-family: inherit;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M0 0l5 7 5-7z' fill='%23fff'/%3E%3C/svg%3E") no-repeat right 17px center,
    linear-gradient(to right, #fff calc(100% - 44px), var(--color-ui-dark) calc(100% - 44px));
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
  cursor: pointer;
  padding: 0 54px 0 8px;
  flex-shrink: 0;
}
.nf-sp-cart__btn {
  flex: none;
  width: 375px;
  height: 47px; /* バー内数量プルダウンと同height */
  background: var(--color-ui-dark);
  color: #fff;
  border: none;
  border-radius: 4px; /* 共通アール */
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .15s;
}
.nf-sp-cart__btn:hover { background: #444; }
.nf-sp-cart__btn svg { width: 20px; height: 20px; }

/* 固定バー内のお気に入り（♡）: 本文と同部品（pd_favorite.tpl）を流用し
   サイズだけバー内のボタン height に合わせる */
.nf-sp-cart .nf-pd__fav-btn {
  width: 47px;
  height: 47px;
  background: #fff;
}

/* PCカートバー分、ページ下部にpadding */
body { padding-bottom: calc(47px + 10px * 2 + 1px); }

@media (max-width: 767px) {
  /* SP: ボトムナビの上に配置 / z-index: 400 < drawer(500) */
  .nf-sp-cart {
    bottom: 56px;
    padding: 0 15px;
    background: transparent;
    border-top: none;
  }
  .nf-sp-cart__inner {
    width: 100%;
    max-width: none;
    margin: 0;
    background: #f4ecd4; /* ベージュ */
    border-radius: 10px 10px 0 0;
    padding: 8px 14px; /* バー高さを狭めて商品表示領域を確保 */
    gap: 14px;
  }
  .nf-sp-cart__qty select {
    width: 63px;
    height: 32px;
    font-size: 13px;
    padding: 0 32px 0 6px;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0 0l4 6 4-6z' fill='%23fff'/%3E%3C/svg%3E") no-repeat right 11px center,
      linear-gradient(to right, #fff calc(100% - 29px), var(--color-ui-dark) calc(100% - 29px));
  }
  .nf-sp-cart__btn {
    flex: 1;
    width: auto;
    height: 32px; /* バー内数量プルダウンと同height */
    font-size: 14px;
  }
  .nf-sp-cart .nf-pd__fav-btn {
    width: 32px;
    height: 32px;
  }
  .nf-sp-cart .nf-pd__fav-btn svg { width: 16px; height: 16px; }
  /* SPカートバー分、ページ下部にpadding */
  body { padding-bottom: calc(56px + 32px + 8px * 2); }
}

/* ─ パンくず SP調整 ─────────────────────────────────── */
@media (max-width: 767px) {
  .nf-breadcrumb__list { font-size: 10px; }
}

/* ─ 商品詳細ページ カードハート・セクションタイトル上書き ─── */
body.nf-renewal .nf-card__fav {
  background: none;
  color: var(--color-ui-dark);
  font-size: 16px;
  width: auto;
  height: auto;
  border-radius: 0;
}
body.nf-renewal .nf-card__fav:hover { color: #e05; }

/* 商品詳細ページ: nf-shelf 上下padding を半分に */
body.nf-renewal .nf-shelf {
  padding: 16px 0;
}

/* カテゴリ別人気ランキング棚（bloc 523）はSP非表示（PCのみ掲載。
   detail.css は詳細専用読込のため一覧のSP上部表示には影響しない） */
@media (max-width: 767px) {
  body.nf-renewal #nfRankingShelf {
    display: none;
  }
}

/* シェルフセクションタイトル */
body.nf-renewal .nf-sec-hd__title {
  font-size: 18px;
  font-weight: 700;
}
body.nf-renewal .nf-sec-hd__text {
  font-weight: 700;
}

/* ハート アクティブ（お気に入り済み）*/
body.nf-renewal .nf-card__fav--active {
  color: #e00;
}

/* カートエリアのお気に入りボタン アクティブ */
.nf-pd__fav-btn--active svg {
  fill: #e00;
  stroke: #e00;
}

/* ─ マークについてアコーディオン ──────────────────────── */
.nf-pd__mark-link {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  color: var(--color-text-primary);
  text-decoration: underline;
  cursor: pointer;
}
.nf-pd__mark-accordion {
  overflow: hidden;
  max-height: 0;
  margin: 8px 0 12px;
  transition: max-height 0.35s ease;
}
.nf-pd__mark-accordion.is-open {
  max-height: 2000px;
}
.nf-pd__mark-accordion-inner {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 12px;
  background: #fafafa;
}
.nf-pd__mark-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  line-height: 1.6;
}
.nf-pd__mark-table tr + tr td {
  border-top: 1px solid var(--color-border);
}
.nf-pd__mark-table td {
  padding: 8px 6px;
  vertical-align: middle;
}
.nf-pd__mark-table td:first-child {
  width: 56px;
  text-align: center;
  flex-shrink: 0;
}
.nf-pd__mark-table td img {
  max-width: 72px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* =============================================================
   NFCEC-1229 追加: 実データ由来の機能パーツ用スタイル
   （コーディングデータに無い、現行ロジック流用部分の見た目調整）
   ============================================================= */

/* ─ 数量「その他」入力トグル（現行 detail.tpl の機能を維持） ─ */
body.nf-renewal #quantity_input {
  display: none; /* 初期は select 表示。「その他」選択で detail.tpl のJSが表示 */
  width: 93px;
  height: 47px;
  border: 1px solid var(--color-border-strong);
  border-radius: 4px;
  text-align: center;
  font-size: 16px;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
}
body.nf-renewal .nf-pd__qty .select-wrap { position: relative; display: block; }
/* nf-pd__qty select 側で矢印を描画するため select-wrap の疑似矢印は出さない */
body.nf-renewal .nf-pd__qty .select-wrap::before { display: none; }
body.nf-renewal .input_ver { display: none; font-size: 12px; color: #e00; margin-top: 6px; }

/* ─ キャンペーン画像（メイン画像への重畳。現行 detail.tpl から流用） ─ */
/* inset:0 だと一部環境でコンテナが定幅を持てず画像が原寸のまま出るため、
   メイン画像と同じ「箱いっぱい＋object-fit:contain」で画像ボックスに追従させる（PC/SP共通） */
body.nf-renewal .nf-pd__main-wrap .campaign_images { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
body.nf-renewal .nf-pd__main-wrap .campaign_image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }

/* ─ メイン領域に埋め込む動画（サムネで動画選択時） ─ */
body.nf-renewal .nf-pd__main-media { position: absolute; inset: 0; display: none; background: #000; }
body.nf-renewal .nf-pd__main-media .frame-wrapper__video { position: relative; width: 100%; height: 100%; }
body.nf-renewal .nf-pd__main-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
body.nf-renewal .nf-pd__thumb--video { position: relative; }
body.nf-renewal .nf-pd__thumb--video::after {
  content: "▶"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px; text-shadow: 0 0 4px rgba(0,0,0,.6); pointer-events: none;
}

/* ─ 配送タイプ ステータスアイコン（この商品に該当する実アイコン群） ─ */
body.nf-renewal .nf-pd__status-icons { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
body.nf-renewal .nf-pd__status-icons img { height: 24px; width: auto; display: block; }

/* ─ 360度ビュー ─ */
body.nf-renewal .nf-pd__360 { margin-top: 10px; }
body.nf-renewal .nf-pd__360 img { display: inline-block; }

/* ─ 各種注記・注意文言 ─ */
body.nf-renewal .nf-pd__note { font-size: 12px; color: var(--color-text-secondary); margin: 6px 0; line-height: 1.6; }
body.nf-renewal .nf-pd__note a { color: var(--color-link); text-decoration: underline; }
body.nf-renewal .nf-pd__attention { font-size: 12px; color: #e00; margin: 6px 0; }
body.nf-renewal .nf-pd__online-only { font-size: 12px; color: #e00; font-weight: 700; margin: 8px 0; }
body.nf-renewal .nf-pd__cost-comment,
body.nf-renewal .nf-pd__bulk-price { font-size: 13px; color: var(--color-text-primary); margin: 6px 0; }
body.nf-renewal .nf-pd__group-title { font-size: 14px; font-weight: 700; color: var(--color-accent); margin-bottom: 8px; }
body.nf-renewal .nf-pd__stock-msg { font-size: 14px; color: #e00; font-weight: 700; margin: 12px 0; }

/* ─ 店舗受取価格ブロック ─ */
body.nf-renewal .nf-pd__tenpo { border: 1px solid var(--color-border); border-radius: 4px; padding: 10px 12px; margin: 10px 0; }
body.nf-renewal .nf-pd__tenpo-note { font-size: 11px; color: var(--color-text-secondary); line-height: 1.6; margin-top: 6px; }

/* ─ 個別送料 ─ */
body.nf-renewal .nf-pd__deliv-fee { border: 1px solid var(--color-border); border-radius: 4px; padding: 10px 12px; margin: 10px 0; }
body.nf-renewal .nf-pd__deliv-fee-title { font-size: 13px; font-weight: 700; color: #e00; }
body.nf-renewal .nf-pd__deliv-fee-note { font-size: 11px; color: var(--color-text-secondary); line-height: 1.6; margin-top: 4px; }

/* ─ カラー/タイプ バリエーション（別商品へ遷移する画像ボタン） ─ */
body.nf-renewal .nf-pd__var-block { margin: 12px 0; }
body.nf-renewal .nf-pd__var-thumbs { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
body.nf-renewal .nf-pd__var-thumbs li { border: 1px solid var(--color-border); border-radius: 4px; overflow: hidden; background: #f9f9f9; }
body.nf-renewal .nf-pd__var-thumbs li a { display: block; width: 40px; height: 40px; } /* 色玉 40x40 でコンパクトに */
body.nf-renewal .nf-pd__var-thumbs img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* カレント（選択中）: 基本ルール（...li）より詳細度を上げないと border 上書きが効かない */
body.nf-renewal .nf-pd__var-thumbs li.nf-pd__var-thumb-item--active { border-color: var(--color-accent); border-width: 2px; }

/* ─ カートボタン無効表示 ─ */
body.nf-renewal .nf-pd__cart-btn--disabled { background: #ccc; cursor: default; color: #fff; }
body.nf-renewal .nf-pd__cart-btn--disabled:hover { background: #ccc; }

/* ─ お気に入りボタン: 追加済み（favorite_btn-del）は塗り赤ハート ─ */
body.nf-renewal .nf-pd__fav-btn.favorite_btn-del { border-color: #e00; color: #e00; }
body.nf-renewal .nf-pd__fav-btn.favorite_btn-del svg { fill: #e00; stroke: #e00; }

/* ─ ZETA VOICE サマリ（星）の詰め ─ */
body.nf-renewal .nf-pd__spec-sub #ZVSummary { margin-top: 4px; }

/* =============================================================
   NFCEC-1229 修正（2026-07-16 レビュー反映）
   ============================================================= */

/* ① カートに入れるボタン: 旧CSSの a 色（#container a 等）に負けて黒字になるため
      新デザインの白字を確実に適用する（自己完結コンポーネントのため !important 可）。 */
body.nf-renewal a.nf-pd__cart-btn,
body.nf-renewal a.nf-pd__cart-btn:link,
body.nf-renewal a.nf-pd__cart-btn:visited,
body.nf-renewal a.nf-pd__cart-btn:hover {
  color: #fff !important;
}
body.nf-renewal .nf-pd__cart-btn svg { stroke: #fff; color: #fff; }
body.nf-renewal .nf-pd__cart-btn--disabled,
body.nf-renewal .nf-pd__cart-btn--disabled:hover { color: #fff !important; background: #ccc; }

/* ② レビュー（ZETA VOICE）ブロックの横幅を他コンテンツに合わせる。
      ブロックはコンテナ無しで MainFoot に出力されるため中央寄せ＋最大幅を付与。 */
body.nf-renewal .nf-pd-review { padding: 24px 0; }
body.nf-renewal .nf-pd-review__inner {
  max-width: var(--w-container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  box-sizing: border-box;
}

/* ③ 最近見た商品カードのお気に入りハート（common.js の nfInitStaticFav が状態付与）。
      nf-card__fav の基本スタイルは common.css。追加済み状態のみ色を上書き。 */
body.nf-renewal .nf-card__fav.favorite_btn-del { color: #e00; }

/* ④ カートに入れるボタン横幅: #cartbtn_default（在庫連動フックのラッパ）が
      .nf-pd__cart-area の flex 子になるため、flex:1 をラッパへ移し、内側ボタンを幅100%に。
      （コーディングデータはラッパ無しでボタン直下だが、cartbtn_default は checkStock が
      参照するため維持し、CSSでレイアウトを合わせる） */
body.nf-renewal .nf-pd__cart-area > #cartbtn_default { flex: 1 1 auto; min-width: 0; }
body.nf-renewal .nf-pd__cart-area > #cartbtn_default > .nf-pd__cart-btn { width: 100%; }

/* ⑤ 360°ビューのリンクはギャラリー(flex横並び)の中で潰れるため、
      画像の下へ全幅で回り込ませる（flexの折返し＋basis100%）。 */
body.nf-renewal .nf-pd__gallery { flex-wrap: wrap; }
body.nf-renewal .nf-pd__360 { flex: 0 0 100%; margin-top: 12px; }

/* ⑥ ZETA VOICE（レビュー）の table に、汎用 table.css の枠線・グレー背景・幅100%・余白が
      当たって「変な枠/背景」になるため、ZETA領域内だけ打ち消す（ZETA自身のCSSに委ねる）。
      table.css が border-top/left を !important 指定しているため !important で上書きする。 */
body.nf-renewal #ZVSummary table,
body.nf-renewal #ZVList table,
body.nf-renewal .zv-form table {
  border: 0 !important;
  margin: 0 !important;
  width: auto !important;
  border-collapse: collapse;
}
body.nf-renewal #ZVSummary th,
body.nf-renewal #ZVSummary td,
body.nf-renewal #ZVList th,
body.nf-renewal #ZVList td,
body.nf-renewal .zv-form th,
body.nf-renewal .zv-form td {
  border: 0 !important;
  background: transparent !important;
}

/* ⑦ カート追加トースト（Ajaxカートイン）は詳細・一覧で共有するため common.css へ移設。 */