商品カード

あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「商品カード」の効果を追加してください。

# 追加してほしい効果
商品カード（カード & テーブル）
商品写真と名称、星評価、価格、割引バッジをまとめたECサイト向けの商品カード。ホバーで写真がゆっくりズームし、カート追加ボタンは押すと完了表示に切り替わります。

# 追加する場所
👉【ここに対象箇所を記入：例「トップのヒーローセクション」「お問い合わせボタン」「記事カードの一覧」など】

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- 商品カード: 画像＋名称＋価格＋★評価＋カート追加ボタン -->
<div class="stage">
  <article class="pc-card">
    <div class="pc-card__media">
      <span class="pc-card__badge">NEW</span>
      <img class="pc-card__img" src="https://picsum.photos/id/1080/600/400" alt="商品写真: レザーのミニマルトートバッグ" width="600" height="400">
    </div>
    <div class="pc-card__body">
      <p class="pc-card__cat">レザーグッズ</p>
      <h2 class="pc-card__name">ミニマル トートバッグ</h2>
      <div class="pc-card__rating" aria-label="評価 5段階中4.5、レビュー128件">
        <span class="pc-card__stars" style="--rating:4.5" aria-hidden="true">★★★★★</span>
        <span class="pc-card__count" aria-hidden="true">(128)</span>
      </div>
      <div class="pc-card__price-row">
        <span class="pc-card__price">¥12,800</span>
        <span class="pc-card__price-old">¥16,000</span>
        <span class="pc-card__price-off">20%OFF</span>
      </div>
      <button type="button" class="pc-card__cart">
        <span class="pc-card__cart-icon" aria-hidden="true">🛒</span>
        <span class="pc-card__cart-label">カートに追加</span>
      </button>
    </div>
  </article>
</div>

【CSS】
/* 商品カード */
* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  padding: 20px;
  display: grid;
  place-items: center;
  font-family: "Hiragino Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(circle at 12% 12%, #ffe6cf 0%, transparent 45%),
    radial-gradient(circle at 90% 20%, #e3f0ff 0%, transparent 48%),
    radial-gradient(circle at 50% 100%, #eef7ec 0%, transparent 55%),
    #fbf8f4;
  color: #23202a;
}

.stage { display: grid; place-items: center; }

.pc-card {
  width: min(300px, 88vw);
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(40, 30, 20, .12);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.pc-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(40, 30, 20, .18); }

.pc-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f2ede6;
}
.pc-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.pc-card:hover .pc-card__img { transform: scale(1.09); }

.pc-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .35) 50%, transparent 60%);
  background-size: 250% 250%;
  background-position: 120% 0;
  animation: pc-sheen 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pc-sheen {
  0%, 60%, 100% { background-position: 120% 0; }
  30% { background-position: -20% 0; }
}

.pc-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #fff;
  padding: 5px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fb923c, #f43f5e);
  box-shadow: 0 6px 16px rgba(244, 63, 94, .35);
}

.pc-card__body { padding: 18px 20px 22px; }
.pc-card__cat { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #b98a4e; text-transform: uppercase; }
.pc-card__name { margin: 0 0 8px; font-size: 17px; font-weight: 800; color: #23202a; }

.pc-card__rating { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.pc-card__stars {
  position: relative;
  display: inline-block;
  font-size: 14px;
  letter-spacing: 2px;
  color: #e2e0da;
  line-height: 1;
}
.pc-card__stars::before {
  content: "★★★★★";
  position: absolute;
  inset: 0;
  width: calc(var(--rating) / 5 * 100%);
  overflow: hidden;
  white-space: nowrap;
  color: #f5a524;
}
.pc-card__count { font-size: 11.5px; color: #9a978e; }

.pc-card__price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.pc-card__price { font-size: 21px; font-weight: 900; color: #e1521f; letter-spacing: -.01em; }
.pc-card__price-old { font-size: 12.5px; color: #b3aea3; text-decoration: line-through; }
.pc-card__price-off { font-size: 11px; font-weight: 800; color: #e1521f; background: #fdece3; padding: 3px 7px; border-radius: 6px; }

.pc-card__cart {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 700;
  font-size: 13.5px;
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 12px;
  padding: 12px 0;
  background: linear-gradient(135deg, #23202a, #4a4456);
  transition: transform .18s ease, box-shadow .18s ease, background .2s ease;
}
.pc-card__cart:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(35, 32, 42, .3); }
.pc-card__cart-icon { font-size: 15px; }
.pc-card__cart.is-added { background: linear-gradient(135deg, #16a34a, #22c55e); }

@media (prefers-reduced-motion: reduce) {
  .pc-card, .pc-card__img, .pc-card__cart { transition: none; }
  .pc-card__media::after { animation: none; }
}

【JavaScript】
// カート追加ボタン: クリックで一時的に「追加しました」状態を表示
(() => {
  const btn = document.querySelector('.pc-card__cart');
  const label = btn ? btn.querySelector('.pc-card__cart-label') : null;
  const icon = btn ? btn.querySelector('.pc-card__cart-icon') : null;
  if (!btn || !label || !icon) return;

  let timer = null;
  btn.addEventListener('click', () => {
    btn.classList.add('is-added');
    icon.textContent = '✓';
    label.textContent = '追加しました';
    clearTimeout(timer);
    timer = setTimeout(() => {
      btn.classList.remove('is-added');
      icon.textContent = '🛒';
      label.textContent = 'カートに追加';
    }, 1800);
  });
})();

# 外部ライブラリ
なし（追加ライブラリ不要）

# 守ってほしいこと
- 既存のHTML構造・レイアウト・デザインを壊さないこと。必要に応じてクラス名・色・サイズを私のサイトに合わせて調整してよい。
- クラス名やidが既存と衝突しないよう、必要なら接頭辞で名前空間を分けること。
- レスポンシブ対応と prefers-reduced-motion への配慮を入れること。
- 私のサイトのフレームワーク（React / Vue / 素のHTML など）に合わせて実装すること。不明な場合は素のHTML/CSS/JSで提示し、組み込み手順も説明すること。
- 変更後の確認手順も簡潔に教えてください。