🔥 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/_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;
+        }
     }
 }