Add Cart button and opening/closing transition

src/style/organisms/_cart.scss

@@ -167,4 +167,15 @@
             }
         }
     }
+
+    // Overlay
+    &-overlay {
+        position: fixed;
+        z-index: 99;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba($color-primary, 0.9);
+    }
 }

src/style/pages/_shop.scss

@@ -1,5 +1,6 @@
 .shop-page {
     position: relative;
+
     // Cart
     .cart {
         display: flex;
@@ -27,18 +28,16 @@
         top: 18px;
         left: 20px;
         right: 20px;
-        width: calc(100% - 80px);
         justify-content: space-between;
 
         @include bp (sm) {
             top: 32px;
-            left: 40px;
-            right: 40px;
+            left: 32px;
+            right: 32px;
         }
 
         // Left
         &__left {
-
             dt {
                 color: $color-primary;
                 font-weight: 400;
@@ -78,6 +77,7 @@
                 }
             }
         }
+
         // Cart
         &__cart {
             display: none;
@@ -85,6 +85,7 @@
 
             @include bp (sm) {
                 display: flex;
+                margin-left: auto;
             }
 
             .quantity {
@@ -101,7 +102,7 @@
                 font-weight: 600;
                 color: #fff;
                 background-color: $color-secondary;
-                border-radius: 100vh;
+                border-radius: 100%;
             }
         }
     }
@@ -149,13 +150,13 @@
 
         // Site Title
         h1 {
-            font-size: clamp(#{rem(88px)}, 10vw, #{rem(140px)});
             position: absolute;
             z-index: 2;
             top: 50%;
             left: 50%;
-            transform: translate(-50%, -50%);
             width: 100%;
+            transform: translate3d(-50%, -50%, 0);
+            font-size: clamp(#{rem(88px)}, 10vw, #{rem(140px)});
             text-align: center;
 
             span, strong {