/** * Site-wide warm-cream overlay on product images. * * Photoshop equivalent: solid color #FFF4ED, opacity 75%, blend mode Multiply. * * Math: final = 0.25 * source + 0.75 * multiplied → per-channel scaling * r * 1.000, g * 0.968, b * 0.947 * * The actual feColorMatrix is defined in a hidden at the top of * (see layali_inject_cream_filter in functions.php). We reference it by * fragment id, which is far more reliable cross-browser than embedding the * SVG inline via data URI (Safari/iOS used to drop those silently). * * Scope: every known product-image context (WC native, Elementor WC widgets, * Layali custom plugins, related/upsell/cross-sell loops). Generic blog * featured images are NOT targeted — selectors are constrained to WC body * classes or product wrappers. */ /* WC contexts — anywhere WC's body class is present (.woocommerce or .woocommerce-page is added on shop, single product, archive, cart, checkout, account, mini-cart shortcode pages). */ body.woocommerce img.wp-post-image, body.woocommerce img.attachment-woocommerce_thumbnail, body.woocommerce img.attachment-woocommerce_single, body.woocommerce img.attachment-shop_catalog, body.woocommerce img.attachment-shop_single, body.woocommerce img.attachment-shop_thumbnail, body.woocommerce-page img.wp-post-image, body.woocommerce-page img.attachment-woocommerce_thumbnail, body.woocommerce-page img.attachment-woocommerce_single, /* Product wrappers — scoped under body.woocommerce / body.woocommerce-page so author-set CSS classes like `
` on Elementor designs / third-party plugins don't bleed the cream tint into unrelated imagery (hero banners, testimonials, blog headers). WC's body classes reliably mark all product-bearing pages including shortcode-rendered loops on regular pages. */ body.woocommerce .product img, body.woocommerce ul.products li.product img, body.woocommerce .woocommerce-product-gallery img, body.woocommerce .woocommerce-product-gallery__image img, body.woocommerce .woocommerce-mini-cart-item img, body.woocommerce .product-thumbnail img, body.woocommerce .related.products img, body.woocommerce .upsells.products img, body.woocommerce .cross-sells img, body.woocommerce-page .product img, body.woocommerce-page ul.products li.product img, body.woocommerce-page .product-thumbnail img, /* Elementor WC widgets — render their own wrappers around product loops. */ .elementor-widget-woocommerce-products img, .elementor-widget-woocommerce-archive-products img, .elementor-widget-woocommerce-product-related img, .elementor-widget-woocommerce-product-upsell img, .elementor-widget-woocommerce-product-images img, .elementor-widget-wc-archive-products img, .elementor-widget-wc-products img, .e-loop-item.product img, .e-loop-item .product img, /* Layali plugin contexts. */ .ly-loop-card img, .ly-gallery img, .ly-gallery__main img, .ly-gallery__thumb img, .ly-upsell img, .ly-upsell__media img, .ly-reviews img, .ly-cross-sell img, .ly-product-card img, .ly-side-cart img { filter: url( #ly-cream ); } /* The mobile mega-menu card images are intentionally NOT tinted: they're category-navigation photos (like blog featured images, also excluded), not product-on-white shots, so the warm-cream multiply would only mute them. NOTE: an earlier version of this comment blamed an SVG reference-filter compositing bug for the drill-in sub-panel rendering BLANK in the portaled drawer. That was a misdiagnosis — the real cause was `overflow:hidden` combined with `transform` on .ly-mmenu clipping the transformed sub-panel on iOS/WebKit, fixed in layali-core's mobile-menu.css. */