🔥 Huge style refactoring by using SvelteKit built-in style tag

It's been tricky but got there finally! Hello `:global`
- Avoid using one global CSS file containing everything
- Import the component SCSS file in a script tag from the component file to allow style scoping and including it only when used

src/style/pages/shop/_intro.scss

@@ -1,7 +1,7 @@
 /*
 ** Shop: Intro
 */
-&__intro {
+.shop-page__intro {
     position: relative;
     z-index: 30;
     height: 30vw;
@@ -60,7 +60,7 @@
             }
         }
         // Shop
-        .shop-title {
+        :global(.shop-title) {
             font-size: rem(14px);
             color: $color-cream;
 
@@ -71,7 +71,7 @@
     }
 
     // Site Title
-    h1 {
+    :global(h1) {
         position: absolute;
         z-index: 2;
         top: 50%;
@@ -91,16 +91,16 @@
             transform: none;
         }
 
-        span, strong {
+        :global(span), :global(strong) {
             color: #fff;
         }
-        span {
+        :global(span) {
             font-weight: 300;
         }
     }
 
     // Background Image
-    picture {
+    :global(picture) {
         position: relative;
         display: flex;
         align-items: flex-end;
@@ -110,7 +110,7 @@
         pointer-events: none;
         user-select: none;
 
-        img {
+        :global(img) {
             opacity: 0.55;
             display: block;
             width: 100%;
@@ -134,7 +134,7 @@
 }
 
 // Intro: Navigation
-&__nav {
+.shop-page__nav {
     position: absolute;
     z-index: 20;
     bottom: 0;
@@ -208,11 +208,4 @@
             }
         }
     }
-
-    // Cart button
-    .button-cart {
-        @include bp (sm, max) {
-            display: none;
-        }
-    }
 }