/* ============================================================
   SEISHIN⁺ 商品詳細ページ (single-sp-product)
   変数: sp-wrapper で定義
   クラス接頭辞: sprd-
   ============================================================ */

/* ── ページ全体 ────────────────────────────────────────────── */
.sprd-page { background: var(--sp-bg); min-height: 100vh; }

/* ── メインラップ: 固定ヘッダー(80px)分を押し下げ ──────────── */
.sprd-main-wrap { padding-top: 80px; }

/* ── パンくず ──────────────────────────────────────────────── */
.sprd-breadcrumb-bar {
  background: var(--sp-bg-s);
  border-bottom: 1px solid var(--sp-border);
  padding: 12px 0;
}
.sprd-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  max-width: var(--sp-max-w); margin: 0 auto;
  padding: 0 clamp(20px,5vw,64px);
  font-size: .76rem; color: var(--sp-muted); flex-wrap: wrap;
}
.sprd-breadcrumb a { color: var(--sp-muted); text-decoration: none; transition: color .2s; }
.sprd-breadcrumb a:hover { color: var(--sp-accent-d); }
.sprd-bc-sep { color: rgba(27,45,66,.22); }

/* ── コンテンツエリア ─────────────────────────────────────── */
.sprd-content-area {
  padding: clamp(40px,6vw,72px) 0 clamp(72px,10vw,112px);
  font-family: var(--sp-font-jp);
  color: var(--sp-text);
}

/* ── ページボディ共通幅 ───────────────────────────────────── */
.sprd-page-body {
  max-width: var(--sp-max-w); margin: 0 auto;
  padding: 0 clamp(20px,5vw,64px);
}

/* ============================================================
   0. kv-intro (2カラム: パターン画像 + 商品情報)
   ============================================================ */
.sprd-kv-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  margin-bottom: 48px;
  padding-top: 32px;
}
.sprd-block-image {
  position: sticky;
  top: 96px;
  align-self: start;
}
.sprd-block-image img {
  width: 100%; display: block;
  background: #fff;
}
.sprd-block-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sprd-sub-title {
  font-size: .76rem; letter-spacing: .18em;
  color: var(--sp-muted); margin: 0; text-transform: uppercase;
}
.sprd-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800; color: var(--sp-bg-d); margin: 0; line-height: 1.1;
}
.sprd-tips {
  font-size: .82rem; color: var(--sp-muted); margin: 0;
  padding-bottom: 14px; border-bottom: 1px solid var(--sp-border);
}
.sprd-content {
  font-size: .92rem; line-height: 1.95; color: #555; margin: 0;
}
.sprd-group-link {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px;
}
.sprd-sample-link,
.sprd-catalog-link {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 22px; border-radius: var(--sp-r);
  font-size: .86rem; font-weight: 700; text-decoration: none;
  transition: opacity .2s;
}
.sprd-sample-link:hover,
.sprd-catalog-link:hover { opacity: .8; }
.sprd-sample-link { background: var(--sp-bg-d); color: #fff !important; }
.sprd-catalog-link {
  background: #fff; color: var(--sp-primary);
  border: 2px solid var(--sp-primary);
}

/* ============================================================
   1. 使用場所テーブル
   ============================================================ */
.sprd-kv-params {
  padding: 28px 0 20px;
  border-top: 1px solid var(--sp-border);
  border-bottom: 1px solid var(--sp-border);
  margin-bottom: 28px;
}
.sprd-usage-table {
  border-collapse: collapse;
  width: 100%;
}
.sprd-usage-table th {
  background: var(--sp-bg-s);
  border: 1px solid var(--sp-border);
  padding: 12px 8px;
  font-size: .8rem; font-weight: 700;
  color: var(--sp-primary);
  text-align: center;
  min-width: 60px;
}
.sprd-usage-table td {
  border: 1px solid var(--sp-border);
  padding: 14px 8px;
  text-align: center;
  font-size: 1.4rem; font-weight: 700; line-height: 1;
  background: var(--sp-bg);
}
.sprd-usage-table .sprd-ok { color: #22a366; }
.sprd-usage-table .sprd-ng { color: var(--sp-muted); }
.sprd-usage-legend {
  font-size: .76rem; color: var(--sp-muted);
  margin: 10px 0 0; text-align: right;
}

/* ============================================================
   2. タグリスト
   ============================================================ */
.sprd-tag-list {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 32px;
}
.sprd-tag-list span {
  font-size: .76rem; padding: 5px 14px;
  background: rgba(27,45,66,.05); color: var(--sp-primary);
  border: 1px solid var(--sp-border); border-radius: 999px;
  white-space: nowrap;
}

/* ============================================================
   3. 商品詳細セクション
   ============================================================ */
.sprd-detail-section { margin-bottom: 48px; }
.sprd-detail-heading {
  font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sp-muted);
  margin: 0 0 16px; padding-bottom: 10px;
  border-bottom: 1px solid var(--sp-border);
}

/* 基本情報テーブル */
.sprd-prop-table {
  width: 100%; border-collapse: collapse;
  font-size: .88rem; margin-bottom: 24px;
}
.sprd-prop-table th,
.sprd-prop-table td {
  padding: 11px 18px;
  border: 1px solid var(--sp-border);
  text-align: left; vertical-align: middle;
}
.sprd-prop-table th {
  background: var(--sp-bg-s); font-weight: 700;
  width: 120px; color: var(--sp-primary); white-space: nowrap;
}
.sprd-prop-table td { background: var(--sp-bg); }

/* 2カラム: 比較テーブル + 性能 */
.sprd-detail-cols {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: start;
  margin-bottom: 12px;
}
.sprd-compare-wrap { overflow-x: auto; }
.sprd-compare-table {
  width: 100%; border-collapse: collapse; font-size: .86rem;
}
.sprd-compare-table th,
.sprd-compare-table td {
  padding: 11px 16px;
  border: 1px solid var(--sp-border);
  text-align: center; vertical-align: middle;
}
.sprd-compare-table thead th {
  background: var(--sp-bg-s); font-weight: 700;
  color: var(--sp-primary);
}
.sprd-compare-table tbody th {
  background: var(--sp-bg-s); font-weight: 600;
  text-align: left; color: var(--sp-text); white-space: nowrap;
}
.sprd-compare-table tbody td { background: var(--sp-bg); }
.sprd-price-cell { font-weight: 700; color: var(--sp-bg-d); }

/* 性能ボックス */
.sprd-perf-box { min-width: 180px; }
.sprd-perf-title {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  color: var(--sp-muted); text-transform: uppercase;
  margin-bottom: 10px;
}
.sprd-perf-table {
  width: 100%; border-collapse: collapse; font-size: .84rem;
}
.sprd-perf-table th,
.sprd-perf-table td {
  padding: 10px 14px;
  border: 1px solid var(--sp-border);
  vertical-align: middle;
}
.sprd-perf-table th {
  background: var(--sp-bg-s); font-weight: 600;
  text-align: left; color: var(--sp-text); white-space: nowrap;
}
.sprd-perf-table td { background: var(--sp-bg); text-align: center; font-weight: 700; }
.sprd-price-note {
  font-size: .72rem; color: var(--sp-muted);
  margin: 0; text-align: right;
}

/* ============================================================
   3. サイズ別柄パターン + 品番チップ
   ============================================================ */
.sprd-product { margin-bottom: 40px; }

.sprd-pattern-section {
  margin-bottom: 32px;
  background: #fff;
}
.sprd-pattern-heading {
  font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sp-muted);
  margin: 0 0 16px; padding-bottom: 10px;
  border-bottom: 1px solid var(--sp-border);
}
.sprd-pattern-img {
  width: 100%; display: block;
  max-height: 900px; object-fit: contain;
  margin-bottom: 12px;
}
body .sprd-pattern-img--r,
.sp-wrapper .sprd-pattern-img--r {
  width: 100% !important;
  max-width: 100% !important;
}
body .sprd-pattern-img--m,
.sp-wrapper .sprd-pattern-img--m {
  width: 110% !important;
  max-width: none !important;
}
.sprd-pattern-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.sprd-pattern-grid .sprd-pattern-img {
  margin-bottom: 0;
}
/* SWELL の wp-block-html ラッパーの背景・角丸を除去 */
body.sp-product-page .wp-block-html,
body.sp-product-page .entry-content,
body.sp-product-page .p-article__body,
body.sp-product-page .p-article {
  background: #fff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}


.sprd-color-chip-list {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.sprd-color-chip {
  display: inline-block; font-size: .74rem;
  padding: 4px 12px;
  background: var(--sp-bg);
  border: 1px solid var(--sp-border); border-radius: 999px;
  color: var(--sp-text);
  transition: border-color .2s, box-shadow .2s;
}
.sprd-color-chip:hover { border-color: var(--sp-primary); box-shadow: var(--sp-sh-sm); }

/* ── SWELL デフォルト要素を非表示（商品ページ専用） ────────── */
body.sp-product-page .l-wrap,
body.sp-product-page .l-header,
body.sp-product-page .l-footer,
body.sp-product-page .l-main,
body.sp-product-page #header,
body.sp-product-page #footer,
body.sp-product-page .p-footer {
  display: none !important;
}

/* ── レスポンシブ ─────────────────────────────────────────── */
@media (max-width: 800px) {
  .sprd-detail-cols { grid-template-columns: 1fr; }
  .sprd-kv-intro { grid-template-columns: 1fr; }
  .sprd-block-image { position: static; }
}
@media (max-width: 600px) {
  .sprd-usage-table th,
  .sprd-usage-table td { padding: 10px 4px; font-size: .72rem; }
  .sprd-usage-table td { font-size: 1.2rem; }
}