fix collection filters, hero spacing, sale filter, and error page CSS

- collection filter bar: horizontal scroll on mobile instead of wrapping
  across 3 rows, smaller pills at mobile sizes
- add sale collection filter at /collections/sale (filters on_sale products)
- hero :page variant: add consistent top padding (var(--space-2xl))
- contact page: remove redundant top padding (hero handles it now)
- error page: fix CSS path from /assets/app.css to /assets/css/app.css
  (broken in production due to asset fingerprinting)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

lib/simpleshop_theme_web/components/page_templates/contact.html.heex

@@ -10,7 +10,7 @@
   cart_status={assigns[:cart_status]}
   active_page="contact"
 >
-  <main id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+  <main id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pb-16">
     <.hero_section
       variant={:page}
       title="Get in touch"

lib/simpleshop_theme_web/components/shop_components/product.ex

@@ -568,7 +568,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do
           />
         </section>
       <% :page -> %>
-        <div class="text-center">
+        <div class="text-center" style="padding-top: var(--space-2xl);">
           <h1
             class="text-4xl md:text-5xl font-bold mb-6"
             style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking);"