🔥 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;
-        }
-    }
 }

src/style/pages/shop/_posters.scss

@@ -1,7 +1,7 @@
 /*
 ** Shop: Posters
 */
-&__posters {
+.shop-page__posters {
     background-color: $color-primary-darker;
     padding: clamp(56px, 10vw, 120px) 20px 72px;
     border-bottom: solid 1px $color-primary-tertiary20 ;
@@ -49,10 +49,6 @@
             cursor: default;
         }
 
-        &.is-dragging {
-            cursor: grabbing;
-        }
-
         &__content {
             display: flex;
             margin: 0 -8px;
@@ -72,8 +68,12 @@
             }
         }
 
+        :global(.is-dragging) {
+            cursor: grabbing;
+        }
+
         // Poster
-        .poster {
+        :global(.poster) {
             position: relative;
             flex: 0 0 100%;
             margin: 0 12px;
@@ -180,21 +180,19 @@
             }
         }
 
-        .newsletter-form {
+        :global(.newsletter-form) {
             padding: 0;
             margin: 0 auto;
 
             @include bp (sm) {
                 margin: 0;
             }
-
-            &__email {
-                margin-bottom: 0;
-            }
-            &__bottom {
-                display: none;
-            }
         }
-
+        :global(.newsletter-form__email) {
+            margin-bottom: 0;
+        }
+        :global(.newsletter-form__bottom) {
+            display: none;
+        }
     }
 }