/* footer demo note */ .demo-note margin-top: 3rem; text-align: center; font-size: 0.8rem; color: #5f7f9e; border-top: 1px solid rgba(0,0,0,0.05); padding-top: 2rem; display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;
: Set width: min-content; or a fixed max-width (e.g., 300px ) so cards don't overflow on small screens. responsive product card html css codepen
.product-image img width: 100%; height: 100%; object-fit: cover; border-radius: 10px 10px 0 0; /* footer demo note */
/* Hover Effect on the whole card */ .product-card:hover transform: translateY(-5px); border-top: 1px solid rgba(0
/* ----- PRODUCT CARD STYLES (glassmorphism + modern) ----- */ .product-card background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(0px); border-radius: 28px; overflow: hidden; box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.02); transition: all 0.3s cubic-bezier(0.2, 0, 0, 1); display: flex; flex-direction: column; border: 1px solid rgba(255, 255, 255, 0.6);
/* Desktop View */ @media (min-width: 1000px) .shop-container grid-template-columns: repeat(4, 1fr); /* 4 columns */