Check stock for Shop's add to cart button

src/components/layouts/PosterLayout.svelte

@@ -10,6 +10,8 @@
     export let product: any
     export let shopProduct: any
 
+    $: hasStock = shopProduct.stock_level > 0
+
 
     /**
      * Preview photos specs
@@ -69,8 +71,10 @@
                 <dd>{shopProduct.name} – {shopProduct.price}€</dd>
             </dl>
             <Button
-                text="Add to cart"
+                tag="button"
+                text={hasStock ? 'Add to cart' : 'Sold out'}
                 color="pinklight"
+                disabled={!hasStock}
                 on:click={() => addToCart($cartId, shopProduct)}
             />
         </div>

src/style/atoms/_button.scss

@@ -25,7 +25,7 @@
     }
 
     // Hover effect
-    &:hover {
+    &:not([disabled]):hover {
         background: $color-secondary;
     }
     .text-split__line {
@@ -85,7 +85,7 @@
         background: $color-secondary-light;
 
         // Hover
-        &:hover {
+        &:not([disabled]):hover {
             color: #fff;
             background: $color-secondary;
         }
@@ -102,7 +102,7 @@
         background: $color-secondary;
 
         // Hover
-        &:hover {
+        &:not([disabled]):hover {
             color: $color-text;
             background-color: darken($color-secondary, 7);
         }