From a0eab24205baf4db7a100a720954064cd09a69cd Mon Sep 17 00:00:00 2001
From: ugtthis <dratunuman@gmail.com>
Date: Sun, 30 Nov 2025 13:18:13 -0600
Subject: [PATCH 1/3] use grid

---
 src/routes/shop/comma-four/+page.svelte | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/routes/shop/comma-four/+page.svelte b/src/routes/shop/comma-four/+page.svelte
index edb1061d..25a54892 100644
--- a/src/routes/shop/comma-four/+page.svelte
+++ b/src/routes/shop/comma-four/+page.svelte
@@ -389,21 +389,18 @@
     }
 
     & .box-contents {
-      display: flex;
-      flex-wrap: wrap;
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 2rem;
       text-align: center;
 
-      & > div {
-        width: 300px;
-        margin-bottom: 2rem;
-
-        & img {
-          max-height: 150px;
-        }
+      @media screen and (max-width: 768px) {
+        grid-template-columns: 1fr;
+      }
 
-        & p {
-          margin: 0 2rem;
-        }
+      & img {
+        height: 150px;
+        object-fit: contain;
       }
     }
 

From fb54765484e51a9d8957f5b131dab924be9c065c Mon Sep 17 00:00:00 2001
From: ugtthis <dratunuman@gmail.com>
Date: Mon, 1 Dec 2025 13:32:54 -0600
Subject: [PATCH 2/3] show harness if selected

---
 src/routes/shop/comma-four/+page.svelte | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/routes/shop/comma-four/+page.svelte b/src/routes/shop/comma-four/+page.svelte
index 25a54892..9aab2bd2 100644
--- a/src/routes/shop/comma-four/+page.svelte
+++ b/src/routes/shop/comma-four/+page.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { page } from '$app/stores';
+
   import ProductPage from "../[product]/+page.svelte";
   import Grid from "$lib/components/Grid.svelte";
   import LinkButton from "$lib/components/LinkButton.svelte";
@@ -7,10 +9,12 @@
   import Space from "$lib/components/Space.svelte";
 
   import { faq } from "$lib/constants/faq.svelte";
+  import { vehicleCountText, NO_HARNESS_OPTION } from '$lib/constants/vehicles.js';
 
   import FourImage from "$lib/images/products/comma-four/four_screen_on.png";
   import OBDCCableImage from "$lib/images/products/obd-c-cable/obd-c-cable-four.png";
   import ReplacementMountsImage from "$lib/images/products/replacement-mounts/replacement-mounts-four.png";
+  import CarHarnessImage from "$lib/images/products/car-harness/car-harness.jpg";
   import CarBrandCollageImage from "$lib/images/car-brand-collage.jpg";
   import CoolingImage from "$lib/images/products/comma-four/cooling.png";
   import DeviceFrameImage from "$lib/images/products/comma-four/four_front.png";
@@ -28,9 +32,11 @@
   import DisplayIcon from "$lib/icons/features/display.svg?raw";
   import CableIcon from "$lib/icons/features/cable.svg?raw";
   import LocationIcon from "$lib/icons/features/location.svg?raw";
-  import { vehicleCountText } from '$lib/constants/vehicles.js';
 
   export let data;
+
+  $: harnessParam = $page.url.searchParams.get('harness');
+  $: hasHarness = harnessParam && decodeURIComponent(harnessParam) !== NO_HARNESS_OPTION.car;
 </script>
 
 <ProductPage {data} />
@@ -51,7 +57,7 @@
     <hr />
     <Grid rowGap="0" templateColumns="0.5fr 1.25fr">
       <h2>In the Box</h2>
-      <div class="box-contents">
+      <div class="box-contents" class:has-harness={hasHarness}>
         <div>
           <img src={FourImage} loading="lazy" alt="comma four device">
           <p>comma four</p>
@@ -64,6 +70,12 @@
           <img src={ReplacementMountsImage} loading="lazy" alt="mount">
           <p>2 mounts</p>
         </div>
+        {#if hasHarness}
+        <div>
+          <img src={CarHarnessImage} loading="lazy" alt="car harness">
+          <p>car harness</p>
+        </div>
+        {/if}
       </div>
     </Grid>
     <hr />
@@ -394,8 +406,14 @@
       gap: 2rem;
       text-align: center;
 
+      &.has-harness {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
       @media screen and (max-width: 768px) {
-        grid-template-columns: 1fr;
+        &, &.has-harness {
+          grid-template-columns: 1fr;
+        }
       }
 
       & img {

From c3aac1811a605372147ee29792768ef12cce310e Mon Sep 17 00:00:00 2001
From: ugtthis <dratunuman@gmail.com>
Date: Mon, 1 Dec 2025 14:03:33 -0600
Subject: [PATCH 3/3] add browser guard for prerender error

---
 src/routes/shop/comma-four/+page.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/routes/shop/comma-four/+page.svelte b/src/routes/shop/comma-four/+page.svelte
index 9aab2bd2..542ff112 100644
--- a/src/routes/shop/comma-four/+page.svelte
+++ b/src/routes/shop/comma-four/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { browser } from '$app/environment';
   import { page } from '$app/stores';
 
   import ProductPage from "../[product]/+page.svelte";
@@ -35,7 +36,7 @@
 
   export let data;
 
-  $: harnessParam = $page.url.searchParams.get('harness');
+  $: harnessParam = browser ? $page.url.searchParams.get('harness') : null;
   $: hasHarness = harnessParam && decodeURIComponent(harnessParam) !== NO_HARNESS_OPTION.car;
 </script>