Align first product flush to the search bar

app/assets/stylesheets/darkswarm/shop.scss

@@ -28,6 +28,10 @@
     }
   }
 
+  .filter-header {
+    margin-top: 1.1em;
+  }
+
   products {
     display: block;
 
@@ -67,7 +71,13 @@
     product {
       @include csstrans;
 
-      border-top: 1px solid #e5e5e5;
+      // Avoid margin collapsing which breaks the flush alignment of the first
+      // image. https://stackoverflow.com/a/19719427/3377535
+      overflow: auto;
+
+      &:nth-child(n + 2) {
+        border-top: 1px solid #e5e5e5;
+      }
       padding-bottom: 1px;
       position: relative;
       display: block;

app/assets/stylesheets/darkswarm/shop_search.scss

@@ -6,7 +6,6 @@
   background-color: $grey-100;
   height: 5em;
   padding: 1em 0;
-  margin-bottom: 1em;
   position: relative;
   z-index: 5;
 

app/views/shop/products/_form.html.haml

@@ -24,7 +24,7 @@
                     %img.spinner{ src: image_path("spinning-circles.svg") }
 
           .hide-for-medium-down.large-2.columns
-            %h5
+            %h5.filter-header
               = t(:products_filter_by)
               %span{ng: {show: 'filtersCount()' }}
                 = "({{ filtersCount() }} #{t(:products_filter_selected)})"