<div class="product-card">
  <div class="product-image">
    <span class="product-badge">Sale</span>
    <button class="product-wishlist" aria-label="Add to wishlist">♡</button>
  </div>
  <div class="product-body">
    <p class="product-category">Footwear</p>
    <h3 class="product-name">Minimal Runner V2</h3>
    <div class="product-pricing">
      <span class="product-price">$89</span>
      <span class="product-original">$120</span>
    </div>
    <div class="product-colors">
      <span class="color-dot" style="background:#1C1A17"></span>
      <span class="color-dot" style="background:#C4640A"></span>
      <span class="color-dot" style="background:#2A5A6A"></span>
    </div>
    <button class="btn btn-primary" style="width:100%">Add to cart</button>
  </div>
</div>

<style>
.product-card { border: 1px solid var(--border); border-radius: 1rem; overflow: hidden; background: var(--surface); }
.product-image { height: 200px; background: var(--border); position: relative; }
.product-badge {
  position: absolute; top: 0.75rem; left: 0.75rem;
  background: #EF4444; color: #fff;
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.2rem 0.625rem; border-radius: 9999px;
}
.product-wishlist {
  position: absolute; top: 0.75rem; right: 0.75rem;
  background: var(--surface); border: 1px solid var(--border);
  width: 2rem; height: 2rem; border-radius: 50%; cursor: pointer; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
}
.product-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.product-category { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 0; }
.product-name { font-size: 0.9375rem; font-weight: 600; margin: 0; }
.product-pricing { display: flex; align-items: baseline; gap: 0.5rem; }
.product-price { font-size: 1.125rem; font-weight: 700; }
.product-original { font-size: 0.875rem; color: var(--muted); text-decoration: line-through; }
.product-colors { display: flex; gap: 0.375rem; }
.color-dot { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--surface); outline: 1px solid var(--border); cursor: pointer; }
</style>