diff --git a/docs/README.md b/docs/README.md
index c6b2e22..7899dd2 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -377,6 +377,7 @@ In order to apply CSS customizations in this and other blocks, follow the instru
 | `specificationsTableSpecificationHeading` |
 | `specificationsTabsContainer`             |
 | `specificationsTitle`                     |
+| `unavailable`                             |
 
 <!-- DOCS-IGNORE:start -->
 
diff --git a/react/components/SkuContent.tsx b/react/components/SkuContent.tsx
index 852c492..be8a54d 100644
--- a/react/components/SkuContent.tsx
+++ b/react/components/SkuContent.tsx
@@ -7,7 +7,7 @@ import useProduct from 'vtex.product-context/useProduct'
 import { useProductDispatch } from 'vtex.product-context/ProductDispatchContext'
 import classNames from 'classnames'
 
-const CSS_HANDLES = ['skuContentWrapper', 'selectedSkuContentWrapper'] as const
+const CSS_HANDLES = ['skuContentWrapper', 'selectedSkuContentWrapper', 'unavailable'] as const
 
 interface Props {
   product: Product
@@ -24,6 +24,10 @@ const SkuContent = ({ item, product, children }: Props) => {
       dispatch({ type: 'SET_SELECTED_ITEM', args: { item: item } })
     }
   }
+  let available = 0;
+  item.sellers.forEach((seller) => {
+    available += seller.commertialOffer.AvailableQuantity;
+  });
   const containerClasses = classNames(
     'ba mb3 pa5',
     handles.skuContentWrapper,
@@ -34,6 +38,10 @@ const SkuContent = ({ item, product, children }: Props) => {
     {
       [`bw1 b--blue ${handles.selectedSkuContentWrapper}`]:
         selectedItem.itemId == item.itemId,
+    },
+    {
+      [`${handles.unavailable}`]:
+      available == 0,
     }
   )
   return (