From 489dfd5e977ff1e4e489db3635c24640da2cf785 Mon Sep 17 00:00:00 2001
From: Rami Bitar <rbitar@gmail.com>
Date: Sat, 1 Aug 2026 17:33:31 -0400
Subject: [PATCH] Drop hardcoded white backgrounds
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Product and collection card images, gallery slides, the zoom overlay
image, and the products section were pinned to bg-white while every
other section uses bg-background. They are transparent now and inherit
the page.

Skeleton fills and image-placeholder tiles keep their zinc backgrounds —
those are load-state and empty-state affordances, not theming.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016jWbNNJLksC1QG8z8845FX
---
 components/shopify/collection-card.tsx                       | 2 +-
 components/shopify/product-card.tsx                          | 2 +-
 components/shopify/product-detail/product-detail-gallery.tsx | 4 ++--
 components/shopify/products.tsx                              | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/shopify/collection-card.tsx b/components/shopify/collection-card.tsx
index 4ffa1bf..8c07c65 100644
--- a/components/shopify/collection-card.tsx
+++ b/components/shopify/collection-card.tsx
@@ -25,7 +25,7 @@ const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
       className="group block h-full"
     >
       {/* Collection Image */}
-      <div className="relative aspect-square overflow-hidden bg-white">
+      <div className="relative aspect-square overflow-hidden">
         {collection.image ? (
           <img
             src={collection.image.url}
diff --git a/components/shopify/product-card.tsx b/components/shopify/product-card.tsx
index 8e22315..fc713ff 100644
--- a/components/shopify/product-card.tsx
+++ b/components/shopify/product-card.tsx
@@ -66,7 +66,7 @@ const ProductCard: React.FC<ProductCardProps> = ({ product }) => {
       className="group block h-full"
     >
       {/* Product Image */}
-      <div className="relative aspect-square overflow-hidden bg-white">
+      <div className="relative aspect-square overflow-hidden">
         {firstImage ? (
           <img
             src={firstImage.url}
diff --git a/components/shopify/product-detail/product-detail-gallery.tsx b/components/shopify/product-detail/product-detail-gallery.tsx
index 905a501..b0212ce 100644
--- a/components/shopify/product-detail/product-detail-gallery.tsx
+++ b/components/shopify/product-detail/product-detail-gallery.tsx
@@ -132,7 +132,7 @@ const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
             key={index}
             onClick={() => setZoomedIndex(index)}
             aria-label={`Zoom ${image.altText || 'product image'}`}
-            className={`relative aspect-square w-full shrink-0 snap-center overflow-hidden bg-white pointer-events-none sm:pointer-events-auto sm:shrink sm:cursor-zoom-in ${
+            className={`relative aspect-square w-full shrink-0 snap-center overflow-hidden pointer-events-none sm:pointer-events-auto sm:shrink sm:cursor-zoom-in ${
               isSingle ? 'sm:col-span-2' : ''
             }`}
           >
@@ -177,7 +177,7 @@ const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
             src={zoomedImage.url}
             alt={zoomedImage.altText || 'Product image'}
             onClick={(event) => event.stopPropagation()}
-            className="max-h-full max-w-full object-contain bg-white"
+            className="max-h-full max-w-full object-contain"
           />
 
           <Button
diff --git a/components/shopify/products.tsx b/components/shopify/products.tsx
index 82c19f9..9d31568 100644
--- a/components/shopify/products.tsx
+++ b/components/shopify/products.tsx
@@ -172,7 +172,7 @@ const Products: React.FC<ProductsProps> = ({
   }
 
   return (
-    <div className="py-20 bg-white">
+    <div className="py-20">
       <div className="max-w-screen-2xl mx-auto px-8">
         <h2 className="text-center text-2xl md:text-3xl font-normal max-w-3xl mx-auto text-foreground">
           {title}