/** * YITH Badge positioning — Elementor Loop Grid + Single-Product page. * * Two scopes: * 1. Loop Grid card badges (.e-loop-item ... .yith-wcbm-badge-NNN) * 2. Single-product WooThumbs gallery badges (.single-product ...) * * Includes a pre-hide rule for .e-loop-item .elementor-widget-shortcode so * the [pp_product_badges] host widget never flashes visible during the * brief window before the companion JS relocates the badge into the image * widget. (When this CSS was inline + footer-emitted, we had to also emit * the pre-hide rule separately in priority 5 to prevent the flash; * loading via enqueued in head removes that need entirely.) * * Badge ID → position map: * 180317 (Expanded Metal), 180324 (Perforated Steel), * 180325 (Laser-Cut Steel), 180326 (Welded Steel Rod) → bottom-left * 180338 (Quick Ship) → top-left * * See pp-custom/includes/badges-loop-grid.php for context. */ /* ----- Anti-flash pre-hide ------------------------------------------------ */ /* The [pp_product_badges] shortcode widget renders FIRST in document flow on each Loop Grid card. JS relocates its output into the image widget; until it does, hide the host widget to prevent a 1-2s visible flash. */ .e-loop-item .elementor-widget-shortcode { display: none; } /* ----- Elementor Loop Grid cards ----------------------------------------- */ .e-loop-item .elementor-widget-theme-post-featured-image { position: relative; } .e-loop-item .elementor-widget-theme-post-featured-image .container-image-and-badge { position: absolute; inset: 0; margin: 0; pointer-events: none; z-index: 5; } .e-loop-item .elementor-widget-theme-post-featured-image .yith-wcbm-badge { position: absolute; margin: 0; } .e-loop-item .elementor-widget-theme-post-featured-image .yith-wcbm-badge__wrap { margin: 0; } .e-loop-item .elementor-widget-theme-post-featured-image .yith-wcbm-badge img { display: block; } .e-loop-item .elementor-widget-theme-post-featured-image .yith-wcbm-badge-180317, .e-loop-item .elementor-widget-theme-post-featured-image .yith-wcbm-badge-180324, .e-loop-item .elementor-widget-theme-post-featured-image .yith-wcbm-badge-180325, .e-loop-item .elementor-widget-theme-post-featured-image .yith-wcbm-badge-180326 { bottom: 8px; left: 8px; } .e-loop-item .elementor-widget-theme-post-featured-image .yith-wcbm-badge-180338 { top: 8px; left: 8px; } /* ----- Single-product page (WooThumbs gallery) --------------------------- */ /* WooThumbs default constrains the gallery wrap to width: 42% (classic WC dual-col layout). PP's Elementor single-product template owns column widths, so let the gallery fill its column. */ .single-product .iconic-woothumbs-all-images-wrap { width: 100% !important; float: none !important; } .single-product .iconic-woothumbs-images-wrap { position: relative; } .single-product .iconic-woothumbs-images-wrap .container-image-and-badge { position: absolute; inset: 0; margin: 0; pointer-events: none; z-index: 5; } .single-product .iconic-woothumbs-images-wrap .yith-wcbm-badge { position: absolute; margin: 0; } .single-product .iconic-woothumbs-images-wrap .yith-wcbm-badge__wrap { margin: 0; } .single-product .iconic-woothumbs-images-wrap .yith-wcbm-badge img { display: block; } .single-product .iconic-woothumbs-images-wrap .yith-wcbm-badge-180317, .single-product .iconic-woothumbs-images-wrap .yith-wcbm-badge-180324, .single-product .iconic-woothumbs-images-wrap .yith-wcbm-badge-180325, .single-product .iconic-woothumbs-images-wrap .yith-wcbm-badge-180326 { top: auto !important; right: auto !important; bottom: 8px !important; left: 8px !important; } .single-product .iconic-woothumbs-images-wrap .yith-wcbm-badge-180338 { top: 8px !important; right: auto !important; bottom: auto !important; left: 8px !important; } /* ----- #390: shrink the material image swatch on mobile to 40x40 --------- */ /* On shop/loop cards the material swatch (YITH image badge, e.g. Laser Cut Metal) is too large on phones. Constrain the image badges to 40x40 at the mobile breakpoint (<=767px). Scoped to loop-card image badges only. */ @media ( max-width: 767px ) { .e-loop-item .elementor-widget-theme-post-featured-image .yith-wcbm-badge-image img { width: 40px !important; height: 40px !important; } }