Styling no results message for shopfront

app/assets/stylesheets/darkswarm/active_table.css.sass

@@ -2,6 +2,10 @@
 @import mixins
 @import "compass/css3/user-interface"
 
+
+.no-results
+  font-size: 1.875rem
+
 .active_table
   margin: 2em 0em
   @include user-select(none)
@@ -10,9 +14,6 @@
     &:first-child
       cursor: pointer
       padding: 1rem 0
-  
-  .no-results
-    font-size: 1.875rem
 
 .active_table .active_table_node
   display: block

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

@@ -32,11 +32,13 @@
           .small-12.columns.text-center
             Loading products
 
-      %product{"ng-show" => "filteredProducts.length == 0 && !Product.loading"}
+      %div{"ng-show" => "filteredProducts.length == 0 && !Product.loading"}
         .row.summary
-          .small-12.columns.text-center
-            No results for {{ query }}
-
+          .small-12.columns
+            %p.no-results
+              Sorry, no results found for
+              %strong {{query}}.
+              Try another search?
     .row
       .small-12.columns
         %input.button.primary.right.add_to_cart{type: :submit, value: "Add to Cart"}