/* Theme Name: LEMLUX Description: Custom theme for Lemlux — B2B LED lighting solutions. Dark navy visual identity with Elementor-based layouts, animated scroll effects, and WooCommerce catalog filtering. Author: LEMLUX Author URI: https://lemlux.eu Template: saren */ /* =Theme customization starts here -------------------------------------------------------------- */ /* Make sure Saren's image wrap can position absolute children */ .saren--product--image--wrap { position: relative !important; } /* Badge container */ .lemlux-badges { position: absolute; top: 14px; left: 14px; z-index: 10; display: flex; flex-direction: column; gap: 6px; pointer-events: none; } /* Individual badge */ .lemlux-badge { display: inline-flex !important; align-items: center; padding: 5px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; line-height: 1.2; border-radius: 3px; color: #fff; background: #2c3e50; text-transform: uppercase; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); white-space: nowrap; width: fit-content; font-family: inherit; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* Voltage */ .lemlux-badge--voltage { background: rgba(20, 20, 20, 0.92); color: #fff; } /* IP rating */ .lemlux-badge--ip { background: rgba(0, 102, 204, 0.92); color: #fff; } /* CCT color-coded */ .lemlux-badge--cct { background: rgba(120, 120, 120, 0.92); } .lemlux-badge--cct-2700k { background: rgba(255, 179, 71, 0.95); color: #4a2c00; } .lemlux-badge--cct-3000k { background: rgba(255, 201, 122, 0.95); color: #4a2c00; } .lemlux-badge--cct-4000k { background: rgba(255, 244, 214, 0.95); color: #333; } .lemlux-badge--cct-5000k { background: rgba(245, 245, 245, 0.95); color: #333; border: 1px solid rgba(0,0,0,0.1); } .lemlux-badge--cct-6000k { background: rgba(232, 241, 255, 0.95); color: #1a3a6e; border: 1px solid rgba(0,0,0,0.08); } .lemlux-badge--cct-6500k { background: rgba(214, 231, 255, 0.95); color: #1a3a6e; border: 1px solid rgba(0,0,0,0.08); } .lemlux-badge--cct-rgb, .lemlux-badge--cct-rgbw { background: linear-gradient(90deg, #ff3b3b, #34c759, #007aff); color: #fff; } .lemlux-badge--cct-red { background: rgba(231, 76, 60, 0.92); } .lemlux-badge--cct-green { background: rgba(39, 174, 96, 0.92); } .lemlux-badge--cct-blue { background: rgba(52, 152, 219, 0.92); } .lemlux-badge--cct-yellow { background: rgba(241, 196, 15, 0.92); color: #333; } .lemlux-badge--cct-orange { background: rgba(230, 126, 34, 0.92); } .lemlux-badge--cct-pink { background: rgba(255, 107, 157, 0.92); color: #fff; } .lemlux-badge--cct-purple { background: rgba(155, 89, 182, 0.92); } .lemlux-badge--cct-ice-blue { background: rgba(168, 224, 255, 0.95); color: #003366; } /* ============================================================ FIX: Sorting dropdown overlapping product badges ------------------------------------------------------------ Product badges use z-index:10. The open ordering dropdown was rendering below them, so badges bled through the panel. This raises the ordering control + its open panel above the badge layer. Covers Select2, native