Show full-width ordercycle subheader on tablet and below

app/assets/stylesheets/darkswarm/_shop-navigation.css.scss

@@ -7,7 +7,7 @@ ordercycle {
   width: 100%;
   border-radius: 0.5em 0.5em 0 0;
   margin-top: 1em;
-  padding: 1em 1em 0;
+  padding: 1em 1.25em 0;
 
   p {
     max-width: 400px;
@@ -99,20 +99,7 @@ ordercycle {
     color: $grey-800;
     font-size: 1.25rem;
     display: block;
-    padding: 0 0 12px;
-
-    @media all and (max-width: 1024px) {
-      float: none;
-      display: inline-block;
-      padding: 0.2em 0 0;
-      font-size: 1.2em;
-      margin-right: 1em;
-    }
-
-    @media all and (max-width: 768px) {
-      float: none;
-      padding: 0 0 10px;
-    }
+    padding: 0.5em 0 0.5em;
 
     span {
       @media all and (max-width: 768px) {
@@ -147,6 +134,20 @@ shop ordercycle {
 
   closing {
     color: $white;
+    padding: 0 0 12px;
+
+    @media all and (max-width: 1024px) {
+      float: none;
+      display: inline-block;
+      padding: 0.2em 0 0;
+      font-size: 1.2em;
+      margin-right: 1em;
+    }
+
+    @media all and (max-width: 768px) {
+      float: none;
+      padding: 0 0 10px;
+    }
   }
 
   form.custom {
@@ -161,3 +162,11 @@ shop navigation ordercycle {
   position: absolute;
   right: 1em;
 }
+
+.sub-header {
+  form {
+    p {
+      margin-bottom: 0.75em;
+    }
+  }
+}

app/assets/stylesheets/darkswarm/distributor_header.css.scss

@@ -9,6 +9,8 @@ section {
 .darkswarm navigation {
   display: block;
   background: $white;
+  position: relative;
+  z-index: 2;
 
   distributor.details {
     box-sizing: border-box;

app/views/checkout/edit.html.haml

@@ -20,6 +20,9 @@
 
   = render partial: "shopping_shared/header"
 
+  .sub-header.show-for-medium-down
+    = render partial: "shopping_shared/order_cycles"
+
   %accordion{"close-others" => "false"}
     %checkout.row{"ng-controller" => "CheckoutCtrl"}
       .small-12.medium-8.columns

app/views/spree/orders/edit.html.haml

@@ -22,6 +22,9 @@
 
   = render partial: "shopping_shared/header"
 
+  .sub-header.show-for-medium-down
+    = render partial: "shopping_shared/order_cycles"
+
   %fieldset.footer-pad
     - if @order.line_items.empty?
       %div.row{"data-hook" => "empty_cart"}