Rework Shop nav and intro classes and styling

- rename things and move styles around to make more sense
- quick nav past banner was somehow broken and would not appear past banner

src/components/organisms/ShopBanner.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/pages/shop/intro";
+    @import "../../style/pages/shop/banner";
 </style>
 
 <script lang="ts">
@@ -51,7 +51,7 @@
          */
         const animation = timeline([
             // Hero image
-            ['.shop-page__background', {
+            ['.shop-background', {
                 scale: [1.06, 1],
                 opacity: [0, 1],
                 z: 0,
@@ -61,7 +61,7 @@
             }],
 
             // Intro top elements
-            ['.shop-page__intro .top > *', {
+            ['.shop-banner .top > *', {
                 y: [-100, 0],
                 opacity: [0, 1],
             }, {
@@ -70,7 +70,7 @@
             }],
 
             // Hero title
-            ['.shop-page__title h1', {
+            ['.shop-banner .title h1', {
                 y: [32, 0],
                 opacity: [0, 1],
             }, {
@@ -78,7 +78,7 @@
             }],
 
             // Intro navbar
-            ['.shop-page__nav .container > *, .shop-page__intro .button-cart', {
+            ['.shop-banner .nav .container > *, .shop-banner .button-cart', {
                 y: [100, 0],
                 opacity: [0, 1],
             }, {
@@ -108,7 +108,7 @@
 <svelte:window bind:innerWidth />
 
 
-<section class="shop-page__intro" bind:this={introEl}>
+<section class="shop-banner" bind:this={introEl}>
     <div class="top container">
         <a href="/" class="back" data-sveltekit-noscroll>
             <svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -118,11 +118,11 @@
         </a>
     </div>
 
-    <div class="shop-page__title">
+    <div class="title">
         <h1 class="title-big-sans">Shop</h1>
     </div>
 
-    <nav class="shop-page__nav">
+    <div class="nav">
         <div class="container">
             <p class="text-label">Choose a city</p>
             <nav>
@@ -137,12 +137,12 @@
                 </ul>
             </nav>
         </div>
-    </nav>
+    </div>
 
     <ButtonCart />
 
     <Image
-        class="shop-page__background"
+        class="background"
         id={shop.page_heroimage.id}
         alt={shop.page_heroimage.alt}
         sizeKey="hero"
@@ -155,7 +155,7 @@
     />
 </section>
 
-<nav class="shop-location"
+<nav class="shop-quicknav"
     class:is-visible={scrolledPastIntro}
     class:is-overlaid={$cartOpen}
 >