/* PAGE CONTAINER*/ .page-container { max-width: 1400px; margin: 0 auto; padding: 20px; } /* Section spacing */ .grid-section { margin-bottom: 50px; } /* Row title */ .grid-title { margin: 10px 0 20px; font-size: 1.4rem; font-weight: bold; } /* Base grid layout */ .grid-row { display: grid; gap: 20px; } /* Desktop layouts (your CSV controls these) */ .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-5 { grid-template-columns: repeat(5, 1fr); } .grid-6 { grid-template-columns: repeat(6, 1fr); } /* Product card styling */ .product-card { border: 1px solid #ddd; padding: 10px; text-align: center; background: #fff; border-radius: 6px; } .product-card img { width: 100%; height: auto; border-radius: 4px; } /* Price styling */ .old-price { text-decoration: line-through; color: #888; margin-right: 5px; } .sale-price { color: red; font-weight: bold; } .regular-price { font-weight: bold; } /* --------------------------------------------- */ /* RESPONSIVE BREAKPOINTS */ /* --------------------------------------------- */ /* Phones: 1 column */ @media (max-width: 480px) { .grid-row { grid-template-columns: repeat(1, 1fr) !important; } } /* Large phones: 2 columns */ @media (min-width: 481px) and (max-width: 767px) { .grid-row { grid-template-columns: repeat(2, 1fr) !important; } } /* Tablets: 3 columns */ @media (min-width: 768px) and (max-width: 1023px) { .grid-row { grid-template-columns: repeat(3, 1fr) !important; } } /* Desktop: use your CSV-defined grid (2–6 columns) */ @media (min-width: 1024px) { /* No override — desktop uses grid-2, grid-3, grid-4, grid-5, grid-6 */ } /*CSS (for 2–6 column grids + sale price styling) Add this to your stylesheet: css*/ .grid-section { margin-bottom: 50px; } .grid-title { margin: 10px 0 20px; font-size: 1.4rem; font-weight: bold; } .grid-row { display: grid; gap: 20px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-5 { grid-template-columns: repeat(5, 1fr); } .grid-6 { grid-template-columns: repeat(6, 1fr); } .product-card { border: 1px solid #ddd; padding: 10px; text-align: center; } .product-card img { width: 100%; height: auto; } .old-price { text-decoration: line-through; color: #888; margin-right: 5px; } .sale-price { color: red; font-weight: bold; } .regular-price { font-weight: bold; } /* IMPROVEMENT*/ /*Add a subtle background*/ body { background: #f5f5f5; } /*product cards a shadow:*/ /*1. Add a soft background to the whole page This gives your product cards contrast and makes the layout feel more “store like.”*/ body { background: #f5f5f5; font-family: Arial, sans-serif; } /*⭐ 2. Add a subtle shadow to product cards*/ .product-card { border: 1px solid #ddd; padding: 10px; text-align: center; background: #fff; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); transition: transform 0.15s ease, box-shadow 0.15s ease; } /*⭐ 3. Add a hover effect (desktop only) This gives a modern, premium feel.*/ .product-card:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } /*⭐ 4. Add spacing between the title and the grid Makes the page breathe more.*/ h1 { margin-bottom: 30px; font-size: 2rem; text-align: center; } /*⭐ 5. Add spacing between rows Your .grid-section already has margin, but you can increase it if you want more separation:*/ .grid-section { margin-bottom: 60px; } /*⭐ 6. Add a nicer font (optional) Google Fonts can make a huge difference. Add this inside : html Then update your body:*/ body { font-family: 'Inter', sans-serif; } /*⭐ 7. Add a light border around images Makes them look cleaner.*/ .product-card img { width: 100%; height: auto; border-radius: 4px; border: 1px solid #eee; }