/* ══════════════════════════════════════════
   商品詳細（js/productView.js）
   上から 商品名 → 最高買取価格 → 店舗別一覧 → 価格推移。
   960px 以上では一覧と価格推移を左右に並べる。
   ══════════════════════════════════════════ */

.pd {
  font-variant-numeric: tabular-nums;
}

/* ── 商品名 ── */
.pd-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.pd-thumb {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pd-title {
  flex: 1;
  min-width: 0;
}

.pd-name {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.pd-jan {
  margin-top: 2px;
  font-size: .8rem;
  color: var(--text-sub);
}

/* ── 状態タブ（シュリ有 / シュリ無 / カートン） ── */
.state-tabs {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.state-tab {
  flex: 1;
  max-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.state-tab:hover {
  border-color: #C5CCD6;
}

.state-tab.active {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
  background: var(--primary-tint);
}

.state-tab-label {
  font-size: .8rem;
  font-weight: 700;
}

.state-tab.active .state-tab-label {
  color: var(--primary);
}

.state-tab-price {
  font-size: .95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.state-tabs + .pd-best {
  margin-top: 10px;
}

/* ── 最高買取価格のまとめ ── */
.pd-best {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--sub-bg);
  border-radius: var(--radius);
}

.pd-best-label {
  font-size: .8rem;
  font-weight: 500;
  color: var(--text-sub);
}

.pd-best-price {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  letter-spacing: .01em;
}

.pd-best-shops {
  font-size: .85rem;
  color: var(--text);
}

.pd-best--none .pd-best-label {
  font-size: .95rem;
  color: var(--text);
}

.pd-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: .85rem;
}

.pd-facts > div {
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.pd-facts dt {
  color: var(--text-sub);
}

.pd-facts dd {
  font-weight: 500;
}

.pd-facts a {
  color: var(--primary);
}

.pd-sub {
  color: var(--text-sub);
  font-weight: 400;
}

/* ── 本体（一覧＋価格推移） ── */
.pd-body {
  display: grid;
  gap: 28px;
  margin-top: 24px;
}

@media (min-width: 960px) {
  .pd-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
  .pd-body--single {
    grid-template-columns: minmax(0, 1fr);
  }
  /* 一覧が長くても価格推移が見えるように */
  .pd-chart {
    position: sticky;
    top: 76px;
  }
}

.pd-h {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 1rem;
  font-weight: 700;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--text);
}

.pd-h-note {
  font-size: .75rem;
  font-weight: 400;
  color: var(--text-sub);
}

.pd-note {
  margin-top: 10px;
  font-size: .75rem;
  color: var(--text-sub);
  line-height: 1.6;
}

/* ── 店舗別一覧（行全体が店舗サイトへのリンク） ── */
.shop-list {
  list-style: none;
}

.shop-list li + li {
  border-top: 1px solid var(--border);
}

.shop-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name  price"
    "sub   change";
  column-gap: 12px;
  padding: 10px 4px;
  color: var(--text);
  text-decoration: none;
}

.shop-row:hover {
  background: var(--sub-bg);
}

.shop-row:hover .shop-name {
  text-decoration: underline;
}

.shop-name {
  grid-area: name;
  font-size: .95rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 外部サイトへ飛ぶことが分かる小さな矢印 */
.shop-name::after {
  content: "↗";
  margin-left: 4px;
  font-size: .75rem;
  color: var(--text-sub);
}

.shop-price {
  grid-area: price;
  justify-self: end;
  font-size: 1.05rem;
  font-weight: 600;
  white-space: nowrap;
}

.shop-row.is-best .shop-price {
  color: var(--primary);
  font-weight: 700;
}

.shop-sub {
  grid-area: sub;
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  font-size: .75rem;
  color: var(--text-sub);
}

/* 状態の記載が無い掲載（シュリ有タブに含めている） */
.shop-plain {
  color: var(--text-sub);
}

/* 他店より更新が遅れている店舗の取得時刻 */
.shop-stale {
  color: #92400E;
}

.shop-change {
  grid-area: change;
  justify-self: end;
  font-size: .75rem;
}

.chg      { color: var(--text-sub); white-space: nowrap; }
.chg-up   { color: var(--up); }
.chg-down { color: var(--down); }

/* ── 価格推移 ── */
.chart-controls {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 8px;
}

/* 切り替えボタン（つながったボタン群） */
.seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.seg-btn {
  padding: 5px 12px;
  background: var(--bg);
  border: none;
  font: inherit;
  font-size: .8rem;
  color: var(--text-sub);
  cursor: pointer;
}

.seg-btn + .seg-btn {
  border-left: 1px solid var(--border);
}

.seg-btn:hover {
  color: var(--text);
}

.seg-btn.active {
  background: var(--primary-tint);
  color: var(--primary);
  font-weight: 700;
}

.price-chart-wrap {
  position: relative;
  height: 220px;
}

.history-msg {
  font-size: .8rem;
  color: var(--text-sub);
  text-align: center;
  margin-top: 8px;
  min-height: 1.2em;
}

.history-msg:empty {
  display: none;
}

.chart-fetch-time {
  font-size: .72rem;
  color: var(--text-sub);
  text-align: right;
  margin-top: 4px;
}

/* ── スマホ ── */
@media (max-width: 480px) {
  .pd-head { gap: 12px; }
  .pd-head .prod-thumb-lg { width: 72px; height: 72px; }
  .pd-name { font-size: 1.05rem; }
  .pd-best-price { font-size: 1.75rem; }
  .price-chart-wrap { height: 200px; }
}