/* =======================================================================
   product.css — 商品詳細ページ用スタイル
   styles.css の変数・リセット・ヘッダー等を前提にしている
   ======================================================================= */

/* --- パンくず --- */
.breadcrumb{margin-top:16px; font-size:13px}
.breadcrumb a{color:var(--c-ink); text-decoration:none; font-family:var(--display); font-weight:500}
.breadcrumb a:hover{text-decoration:underline}

/* --- 商品詳細レイアウト --- */
.product-detail{margin-top:18px}

.pd-hero{display:flex; gap:28px; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:24px; margin-bottom:24px}

/* 左カラム：画像+ボタン */
.pd-media{width:280px; min-width:280px; display:flex; flex-direction:column; gap:14px}
.pd-thumb{aspect-ratio:16/9; background:var(--c-soft); border-radius:10px; overflow:hidden}
.pd-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.pd-cover{background:var(--c-soft); border-radius:10px; padding:18px;
  display:flex; align-items:center; justify-content:center; min-height:200px}
.pd-cover img{max-height:220px; width:auto; object-fit:contain; border-radius:2px;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.45)}

/* 購入ボタン */
.pd-cta{display:flex; flex-direction:column; gap:8px}
.pd-buy-btn{display:block; text-align:center; font-family:var(--display); font-weight:600;
  font-size:14px; background:var(--c-ink); color:#fff; text-decoration:none;
  border-radius:9px; padding:.8em 1em; transition:filter .15s}
.pd-buy-btn:hover{filter:brightness(1.08)}

/* 右カラム：情報 */
.pd-info{flex:1; min-width:0}
.pd-badge{display:inline-block; font-family:var(--display); font-weight:600; font-size:11px;
  letter-spacing:.08em; background:var(--c-soft); color:var(--c-ink);
  padding:.3em .75em; border-radius:999px; margin-bottom:10px}
.pd-title{font-size:22px; font-weight:700; margin:0 0 10px; line-height:1.45}
.pd-desc{color:var(--muted); font-size:14.5px; line-height:1.75; margin:0 0 16px}

/* クーポンブロック */
.pd-deal{margin-top:4px}
.pd-deal-label{font-family:var(--display); font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; font-size:11px; color:var(--muted);
  display:inline-flex; align-items:center; gap:7px}
.pd-price{font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-.01em;
  color:var(--ink); margin:.2rem 0 0; line-height:1.15}
.pd-price small{font-size:11.5px; font-weight:500; color:var(--muted); margin-left:6px; letter-spacing:0}
.pd-codeline{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px}
.pd-code{font-family:var(--mono); font-weight:700; font-size:14px; letter-spacing:.02em;
  background:var(--c-soft); color:var(--c-ink); padding:.2em .5em; border-radius:7px}
.pd-copy{font-family:var(--display); font-weight:600; font-size:12px; cursor:pointer;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:7px; padding:.35em .7em; transition:background .15s,border-color .15s,color .15s}
.pd-copy:hover{background:var(--paper); border-color:#c7cec9}
.pd-copy.done{color:var(--c-ink); border-color:var(--c)}

.pd-free-price{font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-.01em;
  color:var(--c-ink); margin:12px 0 0; line-height:1.15}
.pd-free-price small{font-size:11.5px; font-weight:500; color:var(--muted); margin-left:6px; letter-spacing:0}

/* --- 関連セクション --- */
.related-section{margin-bottom:24px}
.related-heading{font-family:var(--display); font-weight:600; font-size:16px;
  margin:0 0 12px; color:var(--ink)}

.rel-scroll{display:flex; gap:12px; overflow-x:auto; padding-bottom:10px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch}
.rel-scroll::-webkit-scrollbar{height:4px}
.rel-scroll::-webkit-scrollbar-thumb{background:var(--line); border-radius:2px}

.rel-card{min-width:180px; max-width:180px; flex-shrink:0; background:#fff;
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  scroll-snap-align:start; text-decoration:none; color:inherit;
  transition:transform .18s ease, box-shadow .18s ease}
.rel-card:hover{transform:translateY(-2px); box-shadow:0 8px 20px -10px rgba(18,23,26,.28)}
.rel-card.is-current{opacity:.45; pointer-events:none; border-color:var(--c)}

.rel-thumb{aspect-ratio:16/9; background:var(--c-soft); overflow:hidden}
.rel-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.rel-thumb-book{aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; padding:10px}
.rel-thumb-book img{max-height:100%; width:auto; object-fit:contain;
  box-shadow:0 4px 10px -6px rgba(0,0,0,.35); border-radius:2px}

.rel-body{padding:10px 12px}
.rel-badge{display:inline-block; font-family:var(--display); font-weight:600;
  font-size:10px; letter-spacing:.06em; background:var(--c-soft); color:var(--c-ink);
  padding:.2em .6em; border-radius:4px; margin-bottom:4px}
.sec-kindle .rel-badge-kindle,
.rel-badge-kindle{background:#FDEFD6; color:#B45309}
.rel-title{font-size:12.5px; font-weight:600; margin:0; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.rel-price{font-size:11.5px; color:var(--muted); margin:4px 0 0}

/* --- レスポンシブ --- */
@media (max-width: 640px) {
  .pd-hero{flex-direction:column; padding:16px}
  .pd-media{width:100%; min-width:0}
  .pd-thumb{max-height:240px}
  .pd-cover{min-height:160px}
  .pd-cover img{max-height:180px}
  .rel-card{min-width:156px; max-width:156px}
}