/* ==== Force wider product cards for all product list blocks ==== */ /* 1. Let the product grid stretch the full browser width */ .sqs-commerce-product-list { max-width: 95vw !important; /* expand nearly full width */ margin-left: auto !important; margin-right: auto !important; } /* 2. Make each product card bigger on desktop: 4 per row */ .sqs-commerce-product-list .ProductList .sqs-col-3, .sqs-commerce-product-list .sqs-col-3 { /* fallback selector */ width: 25% !important; /* 4 columns */ padding: 16px !important; /* more breathing room */ } /* 3. Taller thumbnail images */ .sqs-commerce-product-list .grid-image, .sqs-commerce-product-list .ProductList-item-image { height: 280px !important; object-fit: cover; } /* 4. Slightly larger “Tickets” button */ .sqs-commerce-product-list .sqs-block-button-element--small { font-size: 16px !important; padding: 12px 28px !important; } /* 5. Mobile: stack 1 per row */ @media (max-width: 640px) { .sqs-commerce-product-list .sqs-col-3 { width: 100% !important; } .sqs-commerce-product-list .grid-image, .sqs-commerce-product-list .ProductList-item-image { height: 200px !important; } } .sqs-commerce-product-list .sqs-col-3 { flex: 0 0 25% !important; max-width: 25% !important; }