Use an atom for the Cart button

src/components/atoms/CartButton.svelte

@@ -8,7 +8,7 @@
     }
 </script>
 
-<div class="shop-location__cart">
+<div class="cart-button">
     <ButtonCircle color="purple" on:click={handleCartOpening}>
         <img src="/images/icons/pin.svg" alt="">
     </ButtonCircle>

src/style/atoms/_cart-button.scss

@@ -0,0 +1,27 @@
+// Cart
+.cart-button {
+    display: none;
+    position: relative;
+
+    @include bp (sm) {
+        display: flex;
+        margin-left: auto;
+    }
+
+    .quantity {
+        position: absolute;
+        top: 50%;
+        left: -12px;
+        transform: translateY(-50%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 22px;
+        height: 22px;
+        font-size: rem(11px);
+        font-weight: 600;
+        color: #fff;
+        background-color: $color-secondary;
+        border-radius: 100%;
+    }
+}

src/style/pages/_shop.scss

@@ -77,34 +77,6 @@
                 }
             }
         }
-
-        // Cart
-        &__cart {
-            display: none;
-            position: relative;
-
-            @include bp (sm) {
-                display: flex;
-                margin-left: auto;
-            }
-
-            .quantity {
-                position: absolute;
-                top: 50%;
-                left: -12px;
-                transform: translateY(-50%);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 22px;
-                height: 22px;
-                font-size: rem(11px);
-                font-weight: 600;
-                color: #fff;
-                background-color: $color-secondary;
-                border-radius: 100%;
-            }
-        }
     }
 
     // Intro

src/style/style.scss

@@ -43,6 +43,7 @@
 @import "atoms/box-cta";
 @import "atoms/site-title";
 @import "atoms/photo";
+@import "atoms/cart-button";
 
 // Molecules
 @import "molecules/photo-card";