diff --git a/app/assets/stylesheets/darkswarm/_shop-navigation.css.sass b/app/assets/stylesheets/darkswarm/_shop-navigation.css.sass
deleted file mode 100644
index 288450b015..0000000000
--- a/app/assets/stylesheets/darkswarm/_shop-navigation.css.sass
+++ /dev/null
@@ -1,86 +0,0 @@
-@import typography
-
-.darkswarm
-
-  navigation
-    display: block
-    background: #f7f7f7
-
-    distributor.details
-      box-sizing: border-box
-      display: block
-      min-height: 150px
-      padding: 30px 0px 20px 0px
-      select
-        width: 200px
-      position: relative
-      img
-        display: block
-        height: 100px
-        width: 100px
-        margin-right: 12px
-
-      location
-        @include headingFont
-      @media all and (max-width: 768px)
-        location, location + small
-          display: block
-
-      #distributor_title h3
-        margin-top: 0
-        @media all and (max-width: 768px)
-          margin-bottom: 8px
-
-
-      ordercycle
-        text-align: right
-        p
-          max-width: 400px
-        h4 i
-          margin-right: 0.3rem
-        @media all and (max-width: 640px)
-          float: left
-          clear: left
-          text-align: left
-          padding: 12px 10px
-          width: 100%
-          margin-top: 10px
-          background: #e5e5e5
-          p
-            max-width: 100%
-        float: right
-        form.custom
-          text-align: right
-          & > strong
-            line-height: 2.5
-            font-size: 1.29em
-            padding-right: 14px
-            @media all and (max-width: 768px)
-          select
-            width: inherit
-            display: inline-block
-            border-width: 1px
-            border-color: #999
-            color: #666
-            font-size: 1em
-            margin-bottom: 0
-            padding: 8px 20px 8px 12px
-            @media all and (max-width: 768px)
-              font-size: 0.875em
-            @media screen and (-webkit-min-device-pixel-ratio:0)
-              font-size: 16px
-        closing
-          @include headingFont
-          @media all and (max-width: 768px)
-            font-size: 1.2em
-            padding-bottom: 10px
-          color: black
-          font-size: 1.5em
-          display: block
-          padding-bottom: 12px
-        span
-          @media all and (max-width: 768px)
-            font-size: 0.875em
-
-
-
diff --git a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss
new file mode 100644
index 0000000000..bd0580958f
--- /dev/null
+++ b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss
@@ -0,0 +1,103 @@
+@import "typography";
+
+.darkswarm navigation {
+  display: block;
+  background: #f7f7f7;
+
+  distributor.details {
+    box-sizing: border-box;
+    display: block;
+    min-height: 150px;
+    padding: 30px 0 20px 0;
+    position: relative;
+    select {
+      width: 200px;
+    }
+    img {
+      display: block;
+      height: 100px;
+      width: 100px;
+      margin-right: 12px;
+    }
+
+    location {
+      @include headingFont;
+    }
+    @media all and (max-width: 768px) {
+      location, location + small {
+        display: block;
+      }
+    }
+
+    #distributor_title h3 {
+      margin-top: 0;
+      @media all and (max-width: 768px) {
+          margin-bottom: 8px;
+      }
+    }
+
+
+
+    ordercycle {
+      text-align: right;
+      float: right;
+      p {
+        max-width: 400px;
+      }
+      h4 i {
+        margin-right: 0.3rem;
+      }
+      @media all and (max-width: 640px) {
+        float: left;
+        clear: left;
+        text-align: left;
+        padding: 12px 10px;
+        width: 100%;
+        margin-top: 10px;
+        background: #e5e5e5;
+        p {
+          max-width: 100%;
+        }
+      }
+      form.custom {
+        text-align: right;
+        & > strong {
+          line-height: 2.5;
+          font-size: 1.29em;
+          padding-right: 14px;
+        }
+        select {
+          width: inherit;
+          display: inline-block;
+          border: 1px #999;
+          color: #666;
+          font-size: 1em;
+          margin-bottom: 0;
+          padding: 8px 20px 8px 12px;
+          @media all and (max-width: 768px) {
+            font-size: 0.875em;
+          }
+          @media screen and (-webkit-min-device-pixel-ratio: 0) {
+            font-size: 16px;
+          }
+        }
+      }
+      closing {
+        @include headingFont;
+        color: black;
+        font-size: 1.5em;
+        display: block;
+        padding-bottom: 12px;
+        @media all and (max-width: 768px) {
+          font-size: 1.2em;
+          padding-bottom: 10px;
+        }
+        span {
+          @media all and (max-width: 768px) {
+            font-size: 0.875em;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/darkswarm/checkout.css.sass b/app/assets/stylesheets/darkswarm/checkout.css.sass
deleted file mode 100644
index ff18863259..0000000000
--- a/app/assets/stylesheets/darkswarm/checkout.css.sass
+++ /dev/null
@@ -1,86 +0,0 @@
-@import mixins
-@import branding
-@import animations
-
-.order-summary
-  background-color: #e1f0f5
-  padding: 1em
-  width: 100%
-  border: none
-  color: inherit
-
-checkout
-  display: block
-
-  @media all and (max-width: 640px)
-    &.row .row
-      margin-left: 0
-      margin-right: 0
-
-  orderdetails
-    .button, table
-      width: 100%
-    @media all and (max-width: 640px)
-      form.edit_order
-        border: 1px solid $disabled-bright
-        margin-bottom: 2rem
-
-  #details, #billing, #shipping, #payment
-    border: 0
-    margin: 1em 0
-    padding: 0
-    .content
-      border: 1px solid #efefef
-
-  h5
-    margin: 0
-    padding: 0.65em
-    background: #f7f7f7
-
-    .label
-      font-size: 1em
-      padding: 0.3rem 0.35rem 0.275rem
-
-    // Logic to turn on & off the alerts for success against each fieldset
-
-    label, label.alert, label.success, &.valid label.alert, &.dirty label.success
-      display: none
-
-    &.dirty label.alert
-      display: inline
-    &.dirty.valid label.alert
-      display: none
-    &.valid label.success
-      display: inline
-
-  h5.dirty
-    background: #f7ccc5
-  h5.valid, h5.dirty.valid
-    background: #bfefd1
-
-  orderdetails table tr th
-    text-align: left
-
-  // Logic to swap out up / down accordion icons
-  //Foundation overrides
-  dd > a
-    @include csstrans
-    background: $disabled-light !important
-
-  dd > a:hover
-    background: $disabled-v-dark !important
-    color: white
-
-  dd
-    span.accordion-up
-      display: none
-    span.accordion-down
-      display: inline
-    &.open
-      span.accordion-up
-        display: inline
-      span.accordion-down
-        display: none
-
-  .error
-    color: #c82020
diff --git a/app/assets/stylesheets/darkswarm/checkout.css.scss b/app/assets/stylesheets/darkswarm/checkout.css.scss
new file mode 100644
index 0000000000..458fd24d5e
--- /dev/null
+++ b/app/assets/stylesheets/darkswarm/checkout.css.scss
@@ -0,0 +1,117 @@
+@import "mixins";
+@import "branding";
+@import "animations";
+
+.order-summary {
+  background-color: #e1f0f5;
+  padding: 1em;
+  width: 100%;
+  border: none;
+  color: inherit;
+}
+
+checkout {
+  display: block;
+
+  @media all and (max-width: 640px) {
+    &.row .row {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  orderdetails {
+    .button, table {
+      width: 100%;
+    }
+    @media all and (max-width: 640px) {
+      form.edit_order {
+        border: 1px solid $disabled-bright;
+        margin-bottom: 2rem;
+      }
+    }
+  }
+
+  #details, #billing, #shipping, #payment {
+    border: 0;
+    margin: 1em 0;
+    padding: 0;
+    .content {
+      border: 1px solid #efefef;
+    }
+  }
+
+  h5 {
+    margin: 0;
+    padding: 0.65em;
+    background: #f7f7f7;
+
+    .label {
+      font-size: 1em;
+      padding: 0.3rem 0.35rem 0.275rem;
+    }
+
+    // Logic to turn on & off the alerts for success against each fieldset
+
+    label, label.alert, label.success, &.valid label.alert, &.dirty label.success {
+      display: none;
+    }
+
+    &.dirty label.alert {
+      display: inline;
+    }
+    &.dirty.valid label.alert {
+      display: none;
+    }
+    &.valid label.success {
+      display: inline;
+    }
+  }
+
+  h5.dirty {
+    background: #f7ccc5;
+  }
+
+  h5.valid, h5.dirty.valid {
+    background: #bfefd1;
+  }
+
+  orderdetails table tr th {
+    text-align: left;
+  }
+
+
+  // Logic to swap out up / down accordion icons
+  //Foundation overrides
+  dd > a {
+    @include csstrans;
+    background: $disabled-light !important;
+  }
+
+  dd > a:hover {
+    background: $disabled-v-dark !important;
+    color: white;
+  }
+
+  dd {
+    span.accordion-up {
+      display: none;
+    }
+    span.accordion-down {
+      display: inline;
+    }
+    &.open {
+      span.accordion-up {
+        display: inline;
+      }
+      span.accordion-down {
+        display: none;
+      }
+    }
+  }
+
+  .error {
+    color: #c82020;
+  }
+}
+