How do I style out of stock products on Squarespace?

When a product is sold out in Squarespace 7.1, the add-to-cart button gets a .sqs-editable-button-state-disabled class and the product item receives a sold-out data attribute. You can use these hooks to visually indicate unavailability.

Graying out the product image and reducing opacity on the card makes it immediately clear to shoppers which items are unavailable without removing them from the grid.

.ProductList-item[data-product-sold-out="true"] img {
  filter: grayscale(100%);
  opacity: 0.5;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.ProductItem .sqs-add-to-cart-button[disabled],
.sqs-editable-button-state-disabled {
  background-color: #ccc !important;
  cursor: not-allowed;
  opacity: 0.6;
}