From bdba57166dc404236b8467a6a56fea9a29930861 Mon Sep 17 00:00:00 2001
From: Myron Blair <myronblair@outlook.com>
Date: Sun, 14 Jun 2026 20:48:45 +0000
Subject: [PATCH] Condense shop page: merge hero + filters into one compact bar

Combined the large hero section and two-row filter section into a single
compact dark header bar. Category and type pills are inline with a divider,
search/sort sit in the header row. Reduced section top padding.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 shop.php | 108 +++++++++++++++++++++++++++----------------------------
 1 file changed, 54 insertions(+), 54 deletions(-)

diff --git a/shop.php b/shop.php
index a7502c4..dd47b84 100644
--- a/shop.php
+++ b/shop.php
@@ -72,66 +72,66 @@ $productTypesList = db()->fetchAll("SELECT type_id, name, slug FROM product_type
 
 ?>
 
-<!-- Page Header -->
-<section style="background: linear-gradient(135deg, var(--color-secondary) 0%, #5D2E0A 100%); color: white; padding: 3rem 0; text-align: center;">
-    <div class="container">
-        <h1 style="font-family: var(--font-display); font-size: 2.5rem; margin-bottom: 0.5rem;">Our Coffee Collection</h1>
-        <p style="opacity: 0.9;">Discover your perfect brew from our selection of premium coffees</p>
-    </div>
-</section>
+<?php
+$filterQs = http_build_query(array_filter(['category' => $category, 'subcat' => $subcat]));
+$filterQs = $filterQs ? '&' . $filterQs : '';
+?>
 
-<section class="section">
+<!-- Shop Header + Filters combined -->
+<section style="background: linear-gradient(135deg, var(--color-secondary) 0%, #5D2E0A 100%); color: white; padding: 1.25rem 0;">
     <div class="container">
-        <!-- Filters Bar -->
-        <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem;">
-            <div style="display: flex; flex-direction: column; gap: 0.75rem;">
-                <div style="display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;">
-                    <a href="/shop.php<?= $subcat ? '?subcat=' . urlencode($subcat) : '' ?>" class="btn <?= !$category ? 'btn-primary' : 'btn-secondary' ?>">All</a>
-                    <?php foreach ($categories as $cat): ?>
-                        <a href="/shop.php?category=<?= urlencode($cat['category']) ?><?= $subcat ? '&subcat=' . urlencode($subcat) : '' ?>"
-                           class="btn <?= $category === $cat['category'] ? 'btn-primary' : 'btn-secondary' ?>">
-                            <?= htmlspecialchars(ucfirst($cat['category'])) ?>
-                        </a>
-                    <?php endforeach; ?>
-                </div>
-                <?php if (!empty($productTypesList)): ?>
-                <div style="display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;">
-                    <span class="text-muted" style="font-size: 0.85rem; font-weight: 600; white-space: nowrap;">Sub Categories:</span>
-                    <a href="/shop.php<?= $category ? '?category=' . urlencode($category) : '' ?>" class="btn btn-sm <?= !$subcat ? 'btn-primary' : 'btn-secondary' ?>">All</a>
-                    <?php foreach ($productTypesList as $pt): ?>
-                        <a href="/shop.php?subcat=<?= urlencode($pt['type_id']) ?><?= $category ? '&category=' . urlencode($category) : '' ?>"
-                           class="btn btn-sm <?= $subcat === $pt['type_id'] ? 'btn-primary' : 'btn-secondary' ?>">
-                            <?= htmlspecialchars($pt['name']) ?>
-                        </a>
-                    <?php endforeach; ?>
-                </div>
-                <?php endif; ?>
-            </div>
-            
-            <div style="display: flex; gap: 1rem; align-items: center;">
-                <form method="GET" style="display: flex; gap: 0.5rem;">
-                    <?php if ($category): ?>
-                        <input type="hidden" name="category" value="<?= htmlspecialchars($category) ?>">
-                    <?php endif; ?>
-                    <?php if ($subcat): ?>
-                        <input type="hidden" name="subcat" value="<?= htmlspecialchars($subcat) ?>">
-                    <?php endif; ?>
-                    <input type="text" name="search" class="form-input" placeholder="Search..."
-                           value="<?= htmlspecialchars($search) ?>" style="width: 200px;">
-                    <button type="submit" class="btn btn-secondary"><i class="fas fa-search"></i></button>
+        <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem;">
+            <h1 style="font-family: var(--font-display); font-size: 1.4rem; margin: 0; white-space: nowrap;">Our Coffee Collection</h1>
+            <div style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
+                <form method="GET" style="display: flex; gap: 0.4rem;">
+                    <?php if ($category): ?><input type="hidden" name="category" value="<?= htmlspecialchars($category) ?>"><?php endif; ?>
+                    <?php if ($subcat): ?><input type="hidden" name="subcat" value="<?= htmlspecialchars($subcat) ?>"><?php endif; ?>
+                    <input type="text" name="search" class="form-input" placeholder="Search..." value="<?= htmlspecialchars($search) ?>"
+                           style="width: 160px; padding: 0.35rem 0.75rem; font-size: 0.85rem; background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); color: white;">
+                    <button type="submit" style="background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); color: white; padding: 0.35rem 0.65rem; border-radius: var(--radius-md); cursor: pointer;">
+                        <i class="fas fa-search" style="font-size: 0.8rem;"></i>
+                    </button>
                 </form>
-                <?php
-                    $filterQs = http_build_query(array_filter(['category' => $category, 'subcat' => $subcat]));
-                    $filterQs = $filterQs ? '&' . $filterQs : '';
-                ?>
-                <select onchange="window.location.href=this.value" class="form-select" style="width: auto;">
-                    <option value="/shop.php?sort=newest<?= $filterQs ?>" <?= $sort === 'newest' ? 'selected' : '' ?>>Newest</option>
-                    <option value="/shop.php?sort=price_low<?= $filterQs ?>" <?= $sort === 'price_low' ? 'selected' : '' ?>>Price: Low to High</option>
-                    <option value="/shop.php?sort=price_high<?= $filterQs ?>" <?= $sort === 'price_high' ? 'selected' : '' ?>>Price: High to Low</option>
-                    <option value="/shop.php?sort=name<?= $filterQs ?>" <?= $sort === 'name' ? 'selected' : '' ?>>Name</option>
+                <select onchange="window.location.href=this.value"
+                        style="background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: white; padding: 0.35rem 0.6rem; border-radius: var(--radius-md); font-size: 0.85rem; cursor: pointer;">
+                    <option value="/shop.php?sort=newest<?= $filterQs ?>" <?= $sort==='newest' ? 'selected' : '' ?> style="color:#333">Newest</option>
+                    <option value="/shop.php?sort=price_low<?= $filterQs ?>" <?= $sort==='price_low' ? 'selected' : '' ?> style="color:#333">Price ↑</option>
+                    <option value="/shop.php?sort=price_high<?= $filterQs ?>" <?= $sort==='price_high' ? 'selected' : '' ?> style="color:#333">Price ↓</option>
+                    <option value="/shop.php?sort=name<?= $filterQs ?>" <?= $sort==='name' ? 'selected' : '' ?> style="color:#333">Name</option>
                 </select>
             </div>
         </div>
+
+        <!-- Filter pills -->
+        <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.75rem;">
+            <span style="font-size: 0.75rem; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 0.25rem;">Category:</span>
+            <a href="/shop.php<?= $subcat ? '?subcat='.urlencode($subcat) : '' ?>"
+               style="<?= !$category ? 'background:white;color:var(--color-secondary);font-weight:700;' : 'background:rgba(255,255,255,0.15);color:white;' ?> padding:0.2rem 0.65rem; border-radius:999px; font-size:0.8rem; text-decoration:none; border:1px solid rgba(255,255,255,0.4);">All</a>
+            <?php foreach ($categories as $cat): ?>
+                <a href="/shop.php?category=<?= urlencode($cat['category']) ?><?= $subcat ? '&subcat='.urlencode($subcat) : '' ?>"
+                   style="<?= $category===$cat['category'] ? 'background:white;color:var(--color-secondary);font-weight:700;' : 'background:rgba(255,255,255,0.15);color:white;' ?> padding:0.2rem 0.65rem; border-radius:999px; font-size:0.8rem; text-decoration:none; border:1px solid rgba(255,255,255,0.4);">
+                    <?= htmlspecialchars(ucfirst($cat['category'])) ?>
+                </a>
+            <?php endforeach; ?>
+
+            <?php if (!empty($productTypesList)): ?>
+                <span style="width:1px; height:16px; background:rgba(255,255,255,0.3); margin:0 0.25rem;"></span>
+                <span style="font-size:0.75rem; opacity:0.75; text-transform:uppercase; letter-spacing:0.05em; margin-right:0.25rem;">Type:</span>
+                <a href="/shop.php<?= $category ? '?category='.urlencode($category) : '' ?>"
+                   style="<?= !$subcat ? 'background:white;color:var(--color-secondary);font-weight:700;' : 'background:rgba(255,255,255,0.15);color:white;' ?> padding:0.2rem 0.65rem; border-radius:999px; font-size:0.8rem; text-decoration:none; border:1px solid rgba(255,255,255,0.4);">All</a>
+                <?php foreach ($productTypesList as $pt): ?>
+                    <a href="/shop.php?subcat=<?= urlencode($pt['type_id']) ?><?= $category ? '&category='.urlencode($category) : '' ?>"
+                       style="<?= $subcat===$pt['type_id'] ? 'background:white;color:var(--color-secondary);font-weight:700;' : 'background:rgba(255,255,255,0.15);color:white;' ?> padding:0.2rem 0.65rem; border-radius:999px; font-size:0.8rem; text-decoration:none; border:1px solid rgba(255,255,255,0.4);">
+                        <?= htmlspecialchars($pt['name']) ?>
+                    </a>
+                <?php endforeach; ?>
+            <?php endif; ?>
+        </div>
+    </div>
+</section>
+
+<section class="section" style="padding-top: 1.5rem;">
+    <div class="container">
         
         <!-- Results count -->
         <?php