Make Shop location switcher a component using a global store

Using two switchers (one in the shop nav and the other in the cart) makes possible to have the switcher over the Cart overlay (over intro)

src/style/molecules/_shop-locationswitcher.scss

@@ -0,0 +1,43 @@
+.shop-locationswitcher {
+    dt {
+        color: $color-primary;
+        font-weight: 400;
+        line-height: 1;
+        font-size: rem(12px);
+    }
+    dd {
+        color: $color-secondary;
+
+        svg {
+            display: inline-block;
+            width: 14px;
+            height: 14px;
+            margin-right: 4px;
+
+            @include bp (sm) {
+                width: 18px;
+                height: 18px;
+            }
+        }
+        select {
+            background: none;
+            border: none;
+            font-size: rem(18px);
+            color: $color-secondary;
+            font-family: $font-serif;
+            cursor: pointer;
+            appearance: none;
+
+            @include bp (sm) {
+                font-size: rem(24px);
+            }
+        }
+    }
+
+    // Overlaid
+    &.is-over {
+        dt {
+            color: #fff;
+        }
+    }
+}

src/style/organisms/_cart.scss

@@ -15,8 +15,8 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding-bottom: 8px;
         margin-bottom: 24px;
+        padding-bottom: 8px;
         border-bottom: 1px solid #E1D0C0;
 
         @include bp (sm) {
@@ -59,7 +59,6 @@
     // Total
     &__total {
         margin-top: auto;
-        margin: 24px 0;
         color: $color-gray;
 
         @include bp (md) {
@@ -189,6 +188,20 @@
         }
     }
 
+    // Location switcher
+    &-switcher {
+        position: fixed;
+        z-index: 100;
+        top: 20px;
+        left: 20px;
+        will-change: transform, opacity;
+
+        @include bp (sm) {
+            top: 32px;
+            left: 32px;
+        }
+    }
+
     // Overlay
     &-overlay {
         position: fixed;

src/style/pages/_shop.scss

@@ -21,73 +21,20 @@
 
     // Nav
     .shop-location {
+        --inset: 20px;
         display: flex;
         position: fixed;
-        z-index: 100;
-        top: 18px;
-        left: 20px;
-        right: 20px;
+        z-index: 20;
+        top: var(--inset);
+        left: var(--inset);
+        right: var(--inset);
         justify-content: space-between;
-        transform: translate3d(0, -96px, 0);
+        transform: translate3d(0, -88px, 0);
         transition: transform 1s var(--ease-quart);
         transition-delay: 100ms;
 
         @include bp (sm) {
-            top: 32px;
-            left: 32px;
-            right: 32px;
-        }
-
-        // Visible state
-        &.is-visible {
-            transform: translate3d(0,0,0);
-
-            .shop-location__notifications {
-                opacity: 1;
-                pointer-events: auto;
-            }
-        }
-
-        // Left
-        &__left {
-            dt {
-                color: $color-primary;
-                font-weight: 400;
-                line-height: 1;
-                font-size: rem(12px);
-                color: #fff;
-            }
-            dd {
-                img {
-                    display: none;
-
-                    @include bp (sm) {
-                        display: inline-block;
-                        width: 14px;
-                        height: 14px;
-                        margin-right: 8px;
-                    }
-                }
-
-                select {
-                    background: none;
-                    border: none;
-                    font-size: rem(18px);
-                    color: $color-secondary;
-                    font-family: $font-serif;
-                    appearance: none;
-                    line-height: 1;
-
-                    @include bp (sm) {
-                        font-size: rem(24px);
-                    }
-
-
-                    option {
-                        font-size: rem(16px);
-                    }
-                }
-            }
+            --inset: 32px;
         }
 
         // Notifications
@@ -106,6 +53,16 @@
                 }
             }
         }
+
+
+        // Visible state
+        &.is-visible {
+            transform: translate3d(0,0,0);
+            .shop-location__notifications {
+                opacity: 1;
+                pointer-events: auto;
+            }
+        }
     }
 
     // Intro

src/style/style.scss

@@ -55,6 +55,7 @@
 @import "molecules/poster";
 @import "molecules/notification-cart";
 @import "molecules/cart-item";
+@import "molecules/shop-locationswitcher";
 
 // Organisms
 @import "organisms/locations";