/** * WCE Theme — Modern Product Loop bridge * * Single source of truth for styling MPL output anywhere it appears * (homepage grids, discounted-products banner on archives, any future * placement). * * Phase 6a (2026-04-17): EVERY rule is scoped under `body.wce-mpl-active` * so we beat the plugin's own frontend stylesheet on specificity without * having to spray `!important`. `wce-mpl-active` is added to by * `WCE_Theme_MPL_Compat::add_body_class()` whenever MPL is active. * * Confirmed MPL markup (from live DOM): *

* -15% * *

Title

* … * … *

* Add to basket *

* * Plus a "count indicator" used by the discount banner summary: * * … * 144 * on sale * * * @package WCE_Theme */ /* ======================================== CSS var bridge ======================================== */ body.wce-mpl-active { --mpl-primary: var(--wp--preset--color--foreground); --mpl-secondary: var(--wp--preset--color--primary); --mpl-success: var(--wp--preset--color--success); --mpl-alert: var(--wp--preset--color--accent); } /* ======================================== Grid container ======================================== */ body.wce-mpl-active .mpl-products-wrapper { color: var(--wp--preset--color--foreground); background: transparent; } body.wce-mpl-active .mpl-products-grid { display: grid; gap: var(--wp--preset--spacing--30); margin: 0; padding: 0; list-style: none; background: transparent; } body.wce-mpl-active .mpl-products-grid.mpl-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.wce-mpl-active .mpl-products-grid.mpl-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.wce-mpl-active .mpl-products-grid.mpl-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } body.wce-mpl-active .mpl-products-grid.mpl-columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } body.wce-mpl-active .mpl-products-grid.mpl-columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } @media (max-width: 900px) { body.wce-mpl-active .mpl-products-grid.mpl-columns-4, body.wce-mpl-active .mpl-products-grid.mpl-columns-5, body.wce-mpl-active .mpl-products-grid.mpl-columns-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { body.wce-mpl-active .mpl-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Flatsome column reset — the plugin historically tags cards with * `.col` and grids with `.row`; those carry Flatsome-only styles that * fight our grid. Neutralise. */ body.wce-mpl-active .mpl-products-grid.row, body.wce-mpl-active .mpl-product-item.col { all: unset; display: block; } /* ======================================== Card wrapper — the core fix ======================================== */ body.wce-mpl-active .mpl-product-item { position: relative; display: flex; flex-direction: column; background: var(--wp--preset--color--surface, #241319); color: var(--wp--preset--color--foreground); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--wce--border-radius); overflow: hidden; box-shadow: var(--wp--custom--wce--box-shadow); transition: var(--wp--custom--wce--transition); } body.wce-mpl-active .mpl-product-item:hover { border-color: var(--wp--preset--color--primary); transform: translateY(-4px); box-shadow: var(--wp--custom--wce--box-shadow-hover); } /* Neutralise wpautop

wrappers the plugin leaves between children. */ body.wce-mpl-active .mpl-product-item > p, body.wce-mpl-active .mpl-product-item p:empty { margin: 0; padding: 0; } body.wce-mpl-active .mpl-product-item > p > br { display: none; } /* ======================================== Image wrapper ======================================== */ body.wce-mpl-active .mpl-product-image { display: block; aspect-ratio: 4 / 5; background: var(--wp--preset--color--surface-alt); overflow: hidden; position: relative; } body.wce-mpl-active .mpl-product-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } body.wce-mpl-active .mpl-product-item:hover .mpl-product-image img { transform: scale(1.04); } /* Ambient chartreuse wash behind the product image on hover — editorial glow. */ body.wce-mpl-active .mpl-product-image::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 100%, rgba(212, 255, 58, 0.12), transparent 65%); opacity: 0; transition: opacity var(--wp--custom--wce--transition); pointer-events: none; } body.wce-mpl-active .mpl-product-item:hover .mpl-product-image::after { opacity: 1; } /* ======================================== Content area ======================================== */ body.wce-mpl-active .mpl-product-content { display: flex; flex-direction: column; gap: 0.65rem; padding: 1rem 1rem 1.1rem; flex: 1 1 auto; } body.wce-mpl-active .mpl-product-title { margin: 0; font-family: var(--wp--preset--font-family--heading, "Inter", system-ui, sans-serif); font-size: 0.95rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; } body.wce-mpl-active .mpl-product-title a { color: var(--wp--preset--color--foreground); text-decoration: none; transition: color var(--wp--custom--wce--transition-fast); } body.wce-mpl-active .mpl-product-title a:hover, body.wce-mpl-active .mpl-product-title a:focus { color: var(--wp--preset--color--primary); } /* ======================================== Price ======================================== */ body.wce-mpl-active .mpl-product-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5em; margin: 0; font-size: 1rem; font-weight: 700; color: var(--wp--preset--color--primary); } body.wce-mpl-active .mpl-product-price .woocommerce-Price-amount, body.wce-mpl-active .mpl-product-price .amount { color: inherit; } body.wce-mpl-active .mpl-product-price del, body.wce-mpl-active .mpl-product-price del .woocommerce-Price-amount, body.wce-mpl-active .mpl-product-price del .amount { color: var(--wp--preset--color--foreground-muted); font-weight: 500; font-size: 0.85em; text-decoration: line-through; } body.wce-mpl-active .mpl-product-price ins, body.wce-mpl-active .mpl-product-price ins .woocommerce-Price-amount, body.wce-mpl-active .mpl-product-price ins .amount { color: var(--wp--preset--color--primary); text-decoration: none; background: transparent; } body.wce-mpl-active .mpl-product-price .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ======================================== Sale badge — chartreuse chip, top-right ======================================== */ body.wce-mpl-active .mpl-sale-badge { position: absolute; top: 0.75rem; right: 0.75rem; left: auto; z-index: 2; display: inline-block; background: var(--wp--preset--color--primary); color: var(--wp--preset--color--background); font-family: var(--wp--preset--font-family--heading, "Inter", system-ui, sans-serif); font-size: 0.7rem; font-weight: 800; letter-spacing: var(--wp--custom--wce--letter-spacing-kicker, 0.12em); text-transform: uppercase; padding: 5px 10px; border-radius: var(--wp--custom--wce--border-radius-pill, 999px); box-shadow: var(--wp--custom--wce--glow-primary, 0 0 18px rgba(212, 255, 58, 0.4)); } /* ======================================== Actions / Add to basket ======================================== */ body.wce-mpl-active .mpl-product-actions { margin-top: auto; padding-top: 0.25rem; } body.wce-mpl-active .mpl-product-item .mpl-add-to-cart { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 0.65rem 1rem; background: var(--wp--preset--color--primary); color: var(--wp--preset--color--background); border: 1px solid var(--wp--preset--color--primary); border-radius: var(--wp--custom--wce--border-radius-pill, 999px); font-family: var(--wp--preset--font-family--heading, "Inter", system-ui, sans-serif); font-size: 0.8rem; font-weight: 700; letter-spacing: var(--wp--custom--wce--letter-spacing-kicker, 0.08em); text-transform: uppercase; text-decoration: none; text-align: center; cursor: pointer; transition: var(--wp--custom--wce--transition); } body.wce-mpl-active .mpl-product-item .mpl-add-to-cart:hover, body.wce-mpl-active .mpl-product-item .mpl-add-to-cart:focus { background: var(--wp--preset--color--primary-dark); border-color: var(--wp--preset--color--primary-dark); color: var(--wp--preset--color--background); box-shadow: var(--wp--custom--wce--glow-primary, 0 0 18px rgba(212, 255, 58, 0.4)); } body.wce-mpl-active .mpl-product-item .mpl-add-to-cart.added::after { content: "\2713"; margin-left: 0.5em; } body.wce-mpl-active .mpl-product-item .mpl-add-to-cart.loading { opacity: 0.7; pointer-events: none; } /* ======================================== Count indicator (discount banner summary, etc.) ======================================== */ body.wce-mpl-active .mpl-count-indicator { display: inline-flex; align-items: center; gap: 0.4em; color: var(--wp--preset--color--foreground-muted); font-family: var(--wp--preset--font-family--system); font-size: 0.875rem; } body.wce-mpl-active .mpl-count-icon { color: var(--wp--preset--color--urgent); } body.wce-mpl-active .mpl-count-number { color: var(--wp--preset--color--urgent); font-weight: 700; } body.wce-mpl-active .mpl-count-text { color: var(--wp--preset--color--foreground-muted); } /* ======================================== Load more / pagination — pill outline in chartreuse ======================================== */ body.wce-mpl-active .mpl-load-more-wrapper, body.wce-mpl-active .mpl-pagination { display: flex; justify-content: center; margin-top: var(--wp--preset--spacing--40); } body.wce-mpl-active .mpl-load-more, body.wce-mpl-active .mpl-load-more-btn, body.wce-mpl-active .mpl-pagination a { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; background: transparent; color: var(--wp--preset--color--primary); border: 1px solid var(--wp--preset--color--primary); border-radius: var(--wp--custom--wce--border-radius-pill, 999px); font-family: var(--wp--preset--font-family--heading, "Inter", system-ui, sans-serif); font-size: 0.8rem; font-weight: 700; letter-spacing: var(--wp--custom--wce--letter-spacing-kicker, 0.08em); text-transform: uppercase; text-decoration: none; cursor: pointer; transition: var(--wp--custom--wce--transition); } body.wce-mpl-active .mpl-load-more:hover, body.wce-mpl-active .mpl-load-more-btn:hover, body.wce-mpl-active .mpl-pagination a:hover, body.wce-mpl-active .mpl-pagination a:focus { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--background); box-shadow: var(--wp--custom--wce--glow-primary, 0 0 18px rgba(212, 255, 58, 0.4)); } body.wce-mpl-active .mpl-pagination .current, body.wce-mpl-active .mpl-pagination .page-numbers.current { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--background); border-color: var(--wp--preset--color--primary); } /* ======================================== Empty / loading / error states ======================================== */ body.wce-mpl-active .mpl-no-products, body.wce-mpl-active .mpl-empty, body.wce-mpl-active .mpl-loading, body.wce-mpl-active .mpl-error { color: var(--wp--preset--color--foreground-muted); background: transparent; padding: var(--wp--preset--spacing--30); text-align: center; font-family: var(--wp--preset--font-family--system); } /* ======================================== Stock status (defensive — may not be emitted by default) ======================================== */ body.wce-mpl-active .mpl-stock-status, body.wce-mpl-active .mpl-in-stock { color: var(--wp--preset--color--success); font-size: 0.8125rem; font-weight: 600; } body.wce-mpl-active .mpl-out-of-stock { color: var(--wp--preset--color--urgent); font-size: 0.8125rem; font-weight: 600; }