From baaf00661a4140f688d7901ac4e1a61ac95d5a26 Mon Sep 17 00:00:00 2001
From: Greg Kilmer <Remlikmg@comcast.net>
Date: Thu, 6 Aug 2026 17:40:58 -0400
Subject: [PATCH] Nav header fix

---
 src/components/store/StoreNav.astro | 12 ++++++++----
 src/pages/store/index.astro         |  5 ++++-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/store/StoreNav.astro b/src/components/store/StoreNav.astro
index 4370778..2f4e0ed 100644
--- a/src/components/store/StoreNav.astro
+++ b/src/components/store/StoreNav.astro
@@ -37,7 +37,6 @@ const isActive = (href: string) =>
 // MobileMenu expects the { items: [] }[] shape.
 const groups = [{ items: storeNav }];
 ---
----
 <header
   id="store-nav"
   data-nav
@@ -93,13 +92,18 @@ const groups = [{ items: storeNav }];
 </header>
 
 <style>
-  /* Same nebula band treatment as the main NavBar. */
+  /* The store nav uses a SOLID opaque band (not the main NavBar's translucent
+     gradient), because the store index hero renders a bright animated field
+     plus a gold label right at the top edge. A translucent nav let that hero
+     content bleed through, making the nav read as if it sat behind the hero.
+     Solid + a hairline border keeps it a clearly distinct bar at all times. */
   [data-nav-inner] {
     background: linear-gradient(
       180deg,
-      rgba(8, 10, 32, 0.92) 0%,
-      rgba(12, 14, 40, 0.86) 100%
+      rgb(8, 10, 32) 0%,
+      rgb(12, 14, 40) 100%
     );
+    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
   }
   [data-nav].scrolled [data-nav-inner] {
     backdrop-filter: saturate(150%) blur(12px);
diff --git a/src/pages/store/index.astro b/src/pages/store/index.astro
index fe381bc..55c030c 100644
--- a/src/pages/store/index.astro
+++ b/src/pages/store/index.astro
@@ -32,7 +32,10 @@ const orderHref = "/store/order";
 
 <StoreLayout title="Store — Proxy MTG Cards & 3D-Printed Deck Boxes">
   {/* --- Hero --- */}
-  <section class="relative overflow-hidden pb-8 pt-28 sm:pt-32">
+  {/* pt-36/sm:pt-40 gives the bright hero content clear breathing room below
+      the solid fixed StoreNav (64px tall), so the gold label and nav never
+      visually crowd each other. */}
+  <section class="relative overflow-hidden pb-8 pt-36 sm:pt-40">
     <AnimatedBackground client:idle className="vt-sky" />
 
     <div