shop changes

src/scss/app.scss

@@ -31,3 +31,5 @@
 @import "locations";
 @import "location";
 @import "search";
+
+@import "woocommerce-changes";

src/scss/flex-testimonials.scss

@@ -65,7 +65,7 @@
                 &.slick-active {
                     button {
                         &:before {
-                            color: $c-red;
+                            color: $c-brightRed;
                         }
                     }
                 }

src/scss/footer.scss

@@ -45,7 +45,7 @@ footer.site-footer {
 
                 &:hover {
                     background-color: $c-white;
-                    color: $c-red;
+                    color: $c-brightRed;
                 }
             }
         }

src/scss/header.scss

@@ -15,7 +15,7 @@
     a.account-button {
         border: 0;
         text-transform: uppercase;
-        color: $c-red;
+        color: $c-brightRed;
         font-weight: bold;
         background: transparent;
         text-decoration: none;
@@ -30,9 +30,26 @@
 }
 
 .main-nav {
+    z-index: 3;
     padding: 2rem 0;
-    position: relative;
+}
+
+.shop-nav {
     z-index: 2;
+    padding: 1rem 0;
+
+    #menu-shop-navigation {
+        justify-content: center;
+        width: 100%;
+    }
+
+    .menu-shop-navigation-container {
+        width: 100%;
+    }
+}
+
+.main-nav, .shop-nav {
+    position: relative;
 
     .logo-wrapper {
         max-width: 400px;
@@ -91,7 +108,7 @@
         }
     }
 
-    nav.main-nav {
+    nav.main-nav, nav.shop-nav {
         display: none;
         width: 100%;
 
@@ -106,7 +123,7 @@
         }
     }
 
-    .menu-main-menu-container {
+    .menu-main-menu-container, .menu-shop-navigation-container {
         display: flex;
         align-items: center;
 
@@ -119,7 +136,7 @@
         }
     }
 
-    #menu-main-menu {
+    #menu-main-menu, #menu-shop-navigation {
         display: flex;
         margin: 0;
         padding: 0;

src/scss/locations.scss

@@ -32,7 +32,7 @@
         }
 
         h2 {
-            color: $c-red;
+            color: $c-brightRed;
             text-transform: uppercase;
             margin-bottom: 0;
         }

src/scss/shop.scss

@@ -134,9 +134,14 @@ div.product-tile, div.page-tile {
     h2 {
         @extend .montserrat;
         text-align: left !important;
-        font-size: 32px !important;
-        line-height: 37px !important;
+        font-size: 24px !important;
+        line-height: 30px !important;
         text-transform: uppercase;
         margin: 1rem 0;
+
+        @include media-breakpoint-up(xl) {
+            font-size: 32px !important;
+            line-height: 37px !important;
+        }
     }
 }

src/scss/variables.scss

@@ -6,7 +6,6 @@ $c-grey: #cbcbcb;
 $c-midGrey: #acacac;
 $c-textAlt: #505050;
 $c-brightRed: #c80000;
-$c-red: #ae1716;
 
 $transition-time: 0.3s;
 

src/scss/woocommerce-changes.scss

@@ -0,0 +1,18 @@
+.category-sub-cats-wrapper {
+    .sub-cats {
+        flex-wrap: wrap;
+        margin-top: 2rem;
+
+        .page-tile {
+            width: 100%;
+
+            @include media-breakpoint-up(md) {
+                width: calc(50% - 0.5rem);
+            }
+
+            @include media-breakpoint-up(lg) {
+                width: calc(25% - 0.75rem);
+            }
+        }
+    }
+}