📦 Product Card

<div class="product-card">
  <div class="product-image">
    <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=400" alt="Product">
  </div>
  <div class="product-info">
    <h3 class="product-title">Nike Red Sneakers</h3>
    <p class="product-desc">Comfortable running shoes</p>
    <div class="product-footer">
      <span class="product-price">$129.99</span>
      <button class="product-btn">Add to Cart</button>
    </div>
  </div>
</div>

.product-card {
  width: 280px;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
.product-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: #f5f5f5;
}
.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.product-card:hover .product-image img {
  transform: scale(1.05);
}
.product-info {
  padding: 1.25rem;
}
.product-title {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a1a2e;
}
.product-desc {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: #666;
}
.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.product-price {
  font-size: 1.3rem;
  font-weight: 700;
  color: #667eea;
}
.product-btn {
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.85rem;
}
.product-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

<div class="product-card-gradient">
  <div class="product-image-gradient">
    <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400" alt="Product">
    <span class="product-badge">NEW</span>
  </div>
  <div class="product-info-gradient">
    <span class="product-category">Audio</span>
    <h3 class="product-title-gradient">Wireless Headphones</h3>
    <div class="product-rating">⭐⭐⭐⭐⭐ <span>(128)</span></div>
    <div class="product-footer-gradient">
      <div class="product-price-gradient">
        <span class="price-old">$299</span>
        <span class="price-new">$199</span>
      </div>
      <button class="product-btn-gradient">Buy Now</button>
    </div>
  </div>
</div>

.product-card-gradient {
  width: 280px;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}
.product-card-gradient:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(102, 126, 234, 0.2);
}
.product-image-gradient {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.product-image-gradient img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}
.product-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 0.3rem 0.7rem;
  background: #ef3b53;
  color: white;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
}
.product-info-gradient {
  padding: 1.25rem;
}
.product-category {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.product-title-gradient {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a1a2e;
}
.product-rating {
  font-size: 0.85rem;
  margin-bottom: 1rem;
  color: #1a1a2e;
}
.product-rating span {
  color: #999;
  font-size: 0.8rem;
}
.product-footer-gradient {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.product-price-gradient {
  display: flex;
  flex-direction: column;
}
.price-old {
  font-size: 0.85rem;
  color: #999;
  text-decoration: line-through;
}
.price-new {
  font-size: 1.3rem;
  font-weight: 700;
  color: #667eea;
}
.product-btn-gradient {
  padding: 0.6rem 1.2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.85rem;
}
.product-btn-gradient:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

<div class="product-card-minimal">
  <div class="product-image-minimal">
    <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400" alt="Product">
  </div>
  <div class="product-info-minimal">
    <h3 class="product-title-minimal">Smart Watch</h3>
    <p class="product-price-minimal">$249.00</p>
    <button class="product-btn-minimal">+ Add to Cart</button>
  </div>
</div>

.product-card-minimal {
  width: 240px;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #eee;
  transition: all 0.3s ease;
}
.product-card-minimal:hover {
  border-color: #1a1a2e;
}
.product-image-minimal {
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: #f8f8f8;
}
.product-image-minimal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-info-minimal {
  padding: 1.25rem;
  text-align: center;
}
.product-title-minimal {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a2e;
}
.product-price-minimal {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a1a2e;
}
.product-btn-minimal {
  width: 100%;
  padding: 0.7rem;
  background: transparent;
  color: #1a1a2e;
  border: 1.5px solid #1a1a2e;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.85rem;
}
.product-btn-minimal:hover {
  background: #1a1a2e;
  color: white;
}