/** * Opt-in: render a Minimog `tm-product-list-carousel` (Swiper-based) as a * 2-column CSS grid on mobile that shows only the FIRST 4 items, with a * "Load more" text button that reveals the rest on tap. * * Activation: add the class `pl-mobile-grid-loadmore` to the widget's * Advanced -> CSS Classes field in Elementor. This is a SEPARATE class from * `pl-carousel-mobile-grid` (which caps at 8 with no button) so the two * behaviours never collide — product carousels keep using the old class. * * How the collapse avoids layout shift (CLS): * The collapse rule is gated on `html.pl-js`, a class added synchronously in * (see logo-fix/functions inline). So the grid paints already-collapsed * on the first frame — no flash-then-shrink. If JS is disabled, `pl-js` is * never added, every item shows, and no button is injected: graceful. * * The button itself is injected by product-list-mobile-grid-loadmore.js and is * only visible on mobile while the widget is collapsed (not `.is-expanded`). */ @media (max-width: 767px) { .pl-mobile-grid-loadmore .swiper, .pl-mobile-grid-loadmore .swiper-inner { overflow: visible !important; } .pl-mobile-grid-loadmore .swiper-wrapper { transform: none !important; transition: none !important; display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; width: 100% !important; align-items: center !important; } .pl-mobile-grid-loadmore .swiper-slide { width: auto !important; max-width: none !important; margin: 0 !important; height: auto !important; transform: none !important; transition: none !important; min-width: 0 !important; } .pl-mobile-grid-loadmore .swiper-slide img { max-width: 100% !important; width: 100% !important; height: auto !important; } /* Loop-mode clones would duplicate items in the grid. */ .pl-mobile-grid-loadmore .swiper-slide-duplicate { display: none !important; } /* No arrows/pagination/scrollbar while acting as a grid. */ .pl-mobile-grid-loadmore .swiper-button-prev, .pl-mobile-grid-loadmore .swiper-button-next, .pl-mobile-grid-loadmore .swiper-pagination, .pl-mobile-grid-loadmore .swiper-scrollbar { display: none !important; } /* Collapse to the first 4 (2x2) until expanded. Gated on `html.pl-js` so it only applies when JS is present (see header note). The `~` chain matches "a non-duplicate slide preceded by 4 non-duplicate siblings" — i.e. the 5th original onward — regardless of how many loop-clones Swiper injected. Dropping the whole rule when `.is-expanded` is set (added by the button click) reveals everything without needing an override. */ html.pl-js .pl-mobile-grid-loadmore:not(.is-expanded) .swiper-slide:not(.swiper-slide-duplicate) ~ .swiper-slide:not(.swiper-slide-duplicate) ~ .swiper-slide:not(.swiper-slide-duplicate) ~ .swiper-slide:not(.swiper-slide-duplicate) ~ .swiper-slide:not(.swiper-slide-duplicate) { display: none !important; } } /* --- Load more button (JS-injected as .pl-loadmore-wrap > .pl-loadmore-btn) --- */ /* Hidden everywhere by default: desktop keeps the real carousel, and an expanded grid no longer needs it. */ .pl-loadmore-btn { display: none; } .pl-loadmore-wrap { width: 100%; text-align: center; margin-top: 18px; } @media (max-width: 767px) { html.pl-js .pl-mobile-grid-loadmore:not(.is-expanded) .pl-loadmore-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 10px 18px; /* comfortable tap target */ cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: #111; /* black */ text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } html.pl-js .pl-mobile-grid-loadmore:not(.is-expanded) .pl-loadmore-btn:hover { color: #555; } /* Small chevron after the label. */ html.pl-js .pl-mobile-grid-loadmore:not(.is-expanded) .pl-loadmore-btn::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); } }