/* ===== PRODUCT MASONRY (waterfall) — product category archives ===== * * Applied via the `masonry-product-archive` body class, which * inc/woocommerce.php adds on is_product_category(). Distinct from the std * listing so category pages read as a waterfall: 4 equal columns, cards free * to differ in height. * * IMPORTANT — there is no `.woocommerce` element anywhere in this theme. * WooCommerce puts that class on only. The first version of this file * used `body.masonry-product-archive .woocommerce ul.products`, which matched * ZERO elements, so the whole waterfall was inert and category pages silently * fell back to the plain grid. Verified by probing the live page: * body.masonry-product-archive .woocommerce ul.products -> matches: 0 * body.masonry-product-archive ul.products -> matches: 1 * Do not reintroduce that ancestor. * * Column count is kept in step with the 4-up grid in main.css so the two * listing styles agree; only the height behaviour differs. * * `columns` (CSS multi-column) rather than `grid` is deliberate: grid rows * would force every card in a row to the tallest card's height, which defeats * the point of a waterfall. Multi-column lets each card keep its natural height. */ body.masonry-product-archive ul.products, body.masonry-product-archive .products { display: block; column-count: 4; column-gap: var(--space-md); } body.masonry-product-archive ul.products li.product, body.masonry-product-archive .products li.product { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; display: block; width: 100%; float: none; /* Only the bottom margin: column gaps supply the horizontal spacing, and a top margin here would push the first card down out of line with the section header. */ margin: 0 0 var(--space-md); } /* Let the image keep its natural ratio so card heights vary (true waterfall). The standard listing pins a 1:1 frame; here we release it. */ body.masonry-product-archive .product-card-image { aspect-ratio: auto; } body.masonry-product-archive .product-card-image .product-img { height: auto; object-fit: contain; } body.masonry-product-archive .product-card-image .product-placeholder { height: 200px; } /* Cards must not split across columns mid-card. */ body.masonry-product-archive .product-card { height: auto; break-inside: avoid; -webkit-column-break-inside: avoid; } /* Keep card heights from varying so wildly that the waterfall looks broken — the title is the main variable-height part, so clamp it. */ body.masonry-product-archive .product-card-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ---- Responsive ladder: mirrors the 4/3/2 ladder in main.css ---- */ @media (max-width: 1024px) { body.masonry-product-archive ul.products, body.masonry-product-archive .products { column-count: 3; } } @media (max-width: 860px) { body.masonry-product-archive ul.products, body.masonry-product-archive .products { column-count: 2; } } @media (max-width: 640px) { body.masonry-product-archive ul.products, body.masonry-product-archive .products { column-count: 2; } } @media (max-width: 420px) { body.masonry-product-archive ul.products, body.masonry-product-archive .products { column-count: 1; } }