Replace per-card product images with shared banner + dropdown selector

- Removed individual Fine.webp / Lacuoer.jpg from brand cards
- Added shared banner image (asset/banner/1.png) spanning both cards
- Added dropdown selector (Banner 1–9) to switch the displayed image
- Made card backgrounds semi-transparent so the banner shows through
- Added hover zoom effect on the shared banner
- Preserved all brand links, overlays, and content layouts

style.css

@@ -377,11 +377,30 @@ body::before {
 }
 
 .brands-grid {
+    position: relative;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 0;
     max-width: 1200px;
     margin: 0 auto;
+    min-height: 560px;
+    overflow: hidden;
+}
+
+/* Shared banner image behind both brand cards */
+.brands-banner-img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    z-index: 0;
+    transition: opacity 0.4s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.brands-grid:hover .brands-banner-img {
+    transform: scale(1.04);
 }
 
 .brand-card {
@@ -397,36 +416,16 @@ body::before {
 }
 
 .brand-card--fine {
-    background: var(--fine-beige);
+    position: relative;
+    z-index: 1;
+    background: rgba(232, 224, 208, 0.82);
     border-right: 1px solid var(--border);
 }
 
 .brand-card--lacueor {
-    background: var(--lacueor-dark);
-}
-
-.brand-card-image {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center;
-    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    opacity: 0.55;
-}
-
-.brand-card--fine .brand-card-image {
-    opacity: 0.45;
-    object-position: center 30%;
-}
-
-.brand-card--lacueor .brand-card-image {
-    opacity: 0.5;
-}
-
-.brand-card:hover .brand-card-image {
-    transform: scale(1.04);
+    position: relative;
+    z-index: 1;
+    background: rgba(26, 24, 20, 0.78);
 }
 
 .brand-card-overlay {
@@ -965,6 +964,49 @@ footer {
     letter-spacing: 0.08em;
 }
 
+/* ============================================================
+   BANNER SELECTOR
+   ============================================================ */
+.banner-selector {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    padding: 20px 48px;
+    background: var(--cream);
+    border-bottom: 1px solid var(--border);
+    font-family: var(--font-sans);
+    font-size: 10px;
+    letter-spacing: 0.12em;
+    color: var(--mid-grey);
+}
+
+.banner-selector label {
+    text-transform: uppercase;
+    font-weight: 500;
+    letter-spacing: 0.2em;
+    color: var(--gold);
+}
+
+.banner-selector select {
+    font-family: var(--font-sans);
+    font-size: 11px;
+    letter-spacing: 0.06em;
+    padding: 8px 16px;
+    border: 1px solid var(--border);
+    background: var(--warm-white);
+    color: var(--charcoal);
+    cursor: pointer;
+    outline: none;
+    transition: border-color var(--transition);
+    min-width: 130px;
+}
+
+.banner-selector select:hover,
+.banner-selector select:focus {
+    border-color: var(--gold);
+}
+
 /* ============================================================
    RESPONSIVE
    ============================================================ */
@@ -1046,6 +1088,15 @@ footer {
         padding: 36px 28px;
     }
 
+    .brands-grid {
+        min-height: 360px;
+    }
+
+    .banner-selector {
+        padding: 16px 20px;
+        flex-wrap: wrap;
+    }
+
     .values-grid {
         grid-template-columns: 1fr;
     }