Out-of-stock products are clearly marked

An "Add to Cart" button that remains active on a product with stock = 0 lets customers complete a purchase for an item that cannot be fulfilled. The failure appears at shipping time, not at checkout, meaning the customer has already paid and must wait for a refund. For schema.org structured data (schema-org Offer), availability: OutOfStock is a required signal for Google Shopping to suppress the listing from purchase-intent results — without it, out-of-stock products appear in paid shopping placements and generate click costs with no conversion. The Accessibility Fundamentals audit requires disabled interactive elements to be visually and semantically distinct, so an always-enabled button also creates an accessibility gap.

Add conditional rendering in src/components/product/ProductCard.tsx based on product.stock, and disable the button semantically with the disabled attribute — not just visually with CSS opacity.

{product.stock > 0 ? (
  <button onClick={addToCart}>Add to Cart</button>
) : (
  <button disabled aria-disabled="true" className="opacity-50 cursor-not-allowed">
    Out of Stock
  </button>
)}

Apply the same gate in src/app/products/[slug]/page.tsx. Also update your schema.org JSON-LD to reflect availability dynamically — see ecommerce-catalog.search-discovery.schema-org-markup for the markup pattern.