/* ============================================================
   パンダ雑貨店 ショップCSS — Qoo10 商品詳細ページ用
   テーマ: モノクロ + 赤アクセント
   生成: 2026-06-04
   --------------------------------------------------------------
   構成:
   [A] CSS変数 (色・余白)
   [B] Qoo10標準要素の上書き (推測セレクタ・効かなくても害無し)
   [C] item_description 用ユーティリティクラス (.pz-* 名前空間)
   [D] レスポンシブ
   ============================================================ */

/* ========== [A] CSS変数 ========== */
:root {
  --pz-ink: #1a1a1a;
  --pz-ink-sub: #5b574f;
  --pz-line: #e6e3dc;
  --pz-bg: #ffffff;
  --pz-bg-soft: #fafaf7;
  --pz-accent: #c62828;
  --pz-accent-dark: #8e0000;
  --pz-accent-soft: #fff5f5;
  --pz-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Yu Gothic", "メイリオ", sans-serif;
}

/* ========== [B] Qoo10標準要素の上書き (推測ベース) ========== */
/* 商品名 */
#goods_title, .gd_ttl, .item_name, h1.tit, .gd_name {
  font-family: var(--pz-font);
  font-weight: 700;
  color: var(--pz-ink);
  letter-spacing: 0.02em;
  line-height: 1.5;
}

/* 価格 (販売価格) */
#goods_price, .price_now, .prc, .gd_prc, .price, .item_price {
  color: var(--pz-accent) !important;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* 取消線価格(定価) */
.prc_org, .price_org, .org_prc {
  color: var(--pz-ink-sub);
  text-decoration: line-through;
  font-weight: 400;
}

/* 「今すぐ買う」ボタン (赤) */
.btn_buy, .btn_purchase, .btn_now_buy,
a[onclick*="GoodsBuy"], button[onclick*="GoodsBuy"] {
  background: var(--pz-accent) !important;
  color: #fff !important;
  border: 1px solid var(--pz-accent) !important;
  font-weight: 700 !important;
}

/* 「カートに入れる」ボタン (黒) */
.btn_cart, .btn_add_cart,
a[onclick*="AddCart"], button[onclick*="AddCart"] {
  background: var(--pz-ink) !important;
  color: #fff !important;
  border: 1px solid var(--pz-ink) !important;
  font-weight: 700 !important;
}

/* ショップ名見出し */
.shop_tit, .shop_nm, .shop_name {
  color: var(--pz-ink);
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ========== [C] item_description 用ユーティリティ ========== */
/*
   使い方: 商品説明HTMLでこれらクラスを使うと、
   ショップ全体で統一感のあるデザインになります。
   例)
     <div class="pz-wrap">
       <h2 class="pz-h2">商品の特長</h2>
       <p class="pz-lead">3つのこだわりポイント...</p>
       <div class="pz-features">
         <div class="pz-feature">...</div>
       </div>
     </div>
*/

.pz-wrap {
  font-family: var(--pz-font);
  color: var(--pz-ink);
  line-height: 1.75;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 12px;
  font-size: 15px;
}

/* 見出し */
.pz-h2 {
  font-size: 24px;
  font-weight: 800;
  color: var(--pz-ink);
  border-bottom: 4px solid var(--pz-accent);
  padding: 0 0 8px 0;
  margin: 32px 0 16px;
  letter-spacing: 0.05em;
}

.pz-h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--pz-ink);
  padding: 4px 0 4px 12px;
  border-left: 4px solid var(--pz-accent);
  margin: 24px 0 12px;
}

/* リードコピー (黒バー) */
.pz-lead {
  font-size: 16px;
  line-height: 1.85;
  color: var(--pz-ink);
  background: var(--pz-bg-soft);
  border-left: 4px solid var(--pz-ink);
  padding: 16px 20px;
  margin: 24px 0;
}

/* 強調ブロック (赤バー) */
.pz-callout {
  background: var(--pz-accent-soft);
  border: 1px solid #f5d6d6;
  border-left: 4px solid var(--pz-accent);
  padding: 16px 20px;
  margin: 24px 0;
  border-radius: 4px;
}
.pz-callout strong { color: var(--pz-accent); }

/* 価格訴求カード */
.pz-price-card {
  background: var(--pz-ink);
  color: #fff;
  padding: 20px 24px;
  margin: 24px 0;
  border-radius: 4px;
  text-align: center;
}
.pz-price-card .pz-price-num {
  font-size: 32px;
  font-weight: 800;
  color: #ff8a8a;
  margin: 6px 0;
  display: block;
}
.pz-price-card .pz-price-org {
  text-decoration: line-through;
  opacity: 0.65;
  font-size: 13px;
  display: block;
}
.pz-price-card .pz-price-note {
  font-size: 12px;
  opacity: 0.8;
}

/* CTAボタン (赤) */
.pz-cta {
  display: inline-block;
  background: var(--pz-accent);
  color: #fff !important;
  padding: 14px 28px;
  font-weight: 700;
  border-radius: 4px;
  text-decoration: none !important;
  letter-spacing: 0.05em;
  transition: background 120ms ease;
}
.pz-cta:hover { background: var(--pz-accent-dark); }

/* CTAボタン (黒) */
.pz-cta-secondary {
  display: inline-block;
  background: var(--pz-ink);
  color: #fff !important;
  padding: 14px 28px;
  font-weight: 700;
  border-radius: 4px;
  text-decoration: none !important;
  letter-spacing: 0.05em;
}

/* スペック表 */
.pz-spec {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14px;
}
.pz-spec th, .pz-spec td {
  border: 1px solid var(--pz-line);
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
}
.pz-spec th {
  background: var(--pz-bg-soft);
  font-weight: 700;
  color: var(--pz-ink);
  width: 30%;
  white-space: nowrap;
}
.pz-spec tr:nth-child(even) td { background: #fdfdfb; }

/* 特長 2-4カラム自動 */
.pz-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.pz-feature {
  background: #fff;
  border: 1px solid var(--pz-line);
  padding: 20px 18px;
  border-radius: 4px;
  text-align: center;
}
.pz-feature-num {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  background: var(--pz-accent);
  color: #fff;
  border-radius: 50%;
  font-weight: 800;
  margin-bottom: 8px;
}
.pz-feature-ttl {
  font-weight: 700;
  font-size: 16px;
  margin: 4px 0 8px;
  color: var(--pz-ink);
}
.pz-feature-desc {
  font-size: 13px;
  color: var(--pz-ink-sub);
  line-height: 1.7;
}

/* バッジ */
.pz-badge {
  display: inline-block;
  background: var(--pz-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  margin-right: 6px;
}
.pz-badge-ink { background: var(--pz-ink); }
.pz-badge-line {
  background: transparent;
  color: var(--pz-accent);
  border: 1px solid var(--pz-accent);
}

/* 注意書き */
.pz-note {
  font-size: 12px;
  color: var(--pz-ink-sub);
  padding: 10px 14px;
  background: var(--pz-bg-soft);
  border-radius: 4px;
  margin: 16px 0;
  line-height: 1.7;
}

/* 区切り線 */
.pz-sep {
  border: 0;
  border-top: 1px solid var(--pz-line);
  margin: 32px 0;
}
.pz-sep-strong {
  border: 0;
  border-top: 3px solid var(--pz-ink);
  margin: 32px 0;
}

/* ショップフッター(共通の店紹介ブロック) */
.pz-shop-foot {
  margin: 40px 0 24px;
  padding: 24px 20px;
  background: var(--pz-ink);
  color: #fff;
  border-radius: 4px;
  text-align: center;
}
.pz-shop-foot h3 {
  margin: 0 0 8px;
  font-size: 20px;
  letter-spacing: 0.1em;
  color: #fff;
  border: none;
  padding: 0;
}
.pz-shop-foot p {
  margin: 0;
  font-size: 13px;
  opacity: 0.85;
  line-height: 1.7;
}
.pz-shop-foot .pz-cta {
  margin-top: 12px;
  background: var(--pz-accent);
}

/* ロゴアクセント (テキスト内で「パンダ雑貨店」を強調するとき) */
.pz-brand {
  font-weight: 800;
  color: var(--pz-ink);
  letter-spacing: 0.08em;
}
.pz-brand::before {
  content: "🐼";
  margin-right: 4px;
}

/* ========== [D] レスポンシブ ========== */
@media (max-width: 640px) {
  .pz-wrap { padding: 0 8px; font-size: 14px; }
  .pz-h2 { font-size: 20px; }
  .pz-h3 { font-size: 16px; }
  .pz-lead { font-size: 14px; padding: 12px 16px; }
  .pz-price-card .pz-price-num { font-size: 26px; }
  .pz-cta, .pz-cta-secondary {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 14px 16px;
  }
  .pz-spec th { width: 35%; padding: 10px 12px; }
  .pz-spec td { padding: 10px 12px; }
  .pz-features { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pz-feature { padding: 14px 10px; }
}