/** * MP Blocks - MP Category Products styles * * @author Maxime Potier * @copyright 2026 Maxime Potier * @license Commercial - All rights reserved */ .mpcp-block { width: 100%; /* Vertical spacing harmonized with the other standalone MP Blocks sections (MP Reassurance, MP Brand Slider, MP Two Columns Text all use the same 1.5rem - this was 30px/1.875rem before). */ padding: 1.5rem 15px; box-sizing: border-box; } /* "Layout: contained" setting - boxes the block within the site's standard container width instead of the default edge-to-edge full-bleed grid. Mirrors the theme's .container rule (fluid + 15px gutters below 1420px, capped at 1400px above it) - same convention as MP Video Slider / MP CTA Block / MP Brand Slider's own contained layout. */ @media (min-width: 1420px) { .mpcp-block--contained { max-width: 1400px; margin-left: auto; margin-right: auto; } } .mpcp-header { margin-bottom: 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 16px; } .mpcp-header--left { justify-content: flex-start; text-align: left; } .mpcp-header--center { justify-content: center; text-align: center; } .mpcp-header--right { justify-content: flex-end; text-align: right; } .mpcp-title { margin: 0; } /* The "View all" action always sticks to the far right of the header - the auto margin eats the remaining flex space regardless of the header's own justify-content (title_align), so title stays left / button stays right even when title_align is "center" or "right". */ .mpcp-actions { margin-left: auto; } /* CSS grid instead of the theme's fixed Bootstrap columns, so "items per row" can be any admin-configured value (2-6), not just Bootstrap's 12-divisible set. */ .mpcp-grid { display: grid; grid-template-columns: repeat(var(--mpcp-cols, 4), 1fr); gap: 20px; } .mpcp-item { min-width: 0; } /* Keep the theme's product-card height consistent across a row */ .mpcp-item .product-miniature { height: 100%; } /* Category/title/price/reviews alignment fix - without this, a card whose category name or product title happens to wrap onto a 2nd line pushes its price+reviews row further down than shorter neighbours, so even though every card has the same overall height (rule above), the text rows themselves land at different Y positions across the row ("décousu"). Fixing category to a single line (ellipsis) and the title to a reserved 2-line box (line-clamp, with min-height as a Safari/older-browser fallback for line-clamp) makes every card's price/reviews row start at the exact same height, regardless of how long the text is. Also scoped to `.cz-homecategory` (native PrestaSafe "Block category products" block, cartzillablocks module) so product cards look and align identically wherever they're used - both blocks render the exact same `catalog/_partials/miniatures/product.tpl` partial, only the grid/carousel wrapper differs. */ .mpcp-item .product-meta, .cz-homecategory .product-meta { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* MP fix (2026-07-23, v3: CSS Grid) - title/price/reviews alignment is now handled by a single CSS Grid on the card-body itself (".mp-card-grid", fixed "grid-template-rows" - see the global rule in themes/lafrancaisedupoele/_dev/css/_custom.scss), which guarantees every row is EXACTLY the same height across cards regardless of content (1 vs 2-line title, price-only vs PPC vs price+reviews...) - a fixed `height`/`min-height` per element could not reliably guarantee that. Nothing left to duplicate here: the global rule already targets ".product-miniature .card-body.mp-card-grid" which covers both this block's cards (`.mpcp-item .product-miniature`) and the native "Block category products" cards (`.cz-homecategory .product-miniature`), since both render the exact same product.tpl partial with the same classes. */ /* Keep the theme's product-card height consistent across a row here too (mirrors the `.mpcp-item .product-miniature` rule above - Bootstrap's `.row`/`.col-*` grid used by this block doesn't stretch children to a common height by default the way CSS Grid does). */ .cz-homecategory .product-miniature { height: 100%; } /* MP fix (2026-08-07, client request "design system pour mpcp-view-all bleu outline") - this used to be a bespoke bordered/uppercase/red-hover pill; replaced by the LFDP design system's outline button (`lfdp-btn lfdp-btn-outline`, added on the markup in mp_category_products.tpl). Every property that would have conflicted with `.lfdp-btn`/`.lfdp-btn-outline` (padding, border, border-radius, font-size, text-transform, letter-spacing, hover background/color) was removed here rather than fought with a compound selector: both classes sit on the same element and are single-class selectors of equal specificity, so leaving stale properties here would make the result depend on stylesheet load order. Only what `lfdp-btn` does NOT provide is kept (it's an ``, not covered by the design system's own reset). */ .mpcp-view-all { text-decoration: none; } /* Below desktop, switch to an auto-fit/minmax track list instead of trying to scale the exact --mpcp-cols count (CSS Grid's repeat() track count must be a plain integer - no calc()/min()/var() support across all targeted browsers). This adapts naturally regardless of the configured desktop items-per-row value, without ever exceeding it awkwardly. */ @media (max-width: 991.98px) { .mpcp-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } } /* "Items per row (mobile)" setting (1 or 2) - --mpcp-mobile-cols is set inline on .mpcp-grid by the template (defaults to 2, i.e. the original hardcoded mobile layout). The surplus/shortfall of products between the desktop and mobile totals is handled separately, per block instance, by a scoped