/* ============================================ iOS Liquid Glass — experimental overlay ---------------------------------------- REVERT OPTIONS (pick one): 1) In index.html: remove data-glass="on" from 2) Or remove / comment out: 3) Or delete this file ============================================ */ html[data-glass="on"] { --glass-blur: 22px; --glass-sat: 1.45; --glass-bg: rgba(255, 255, 255, 0.55); --glass-bg-strong: rgba(255, 255, 255, 0.68); /* Darker borders so cards read clearly on light backgrounds */ --glass-border: rgba(15, 23, 42, 0.16); --glass-border-soft: rgba(15, 23, 42, 0.12); --glass-highlight: rgba(255, 255, 255, 0.75); --glass-shadow: 0 8px 28px rgba(15, 23, 42, 0.08), 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 0 0 1px rgba(15, 23, 42, 0.06); --glass-shadow-hover: 0 16px 40px rgba(15, 23, 42, 0.12), 0 1px 0 rgba(255, 255, 255, 0.75) inset, 0 0 0 1px rgba(202, 138, 4, 0.25); --surface: rgba(255, 255, 255, 0.5); --surface-solid: rgba(255, 255, 255, 0.62); --header-bg: rgba(255, 255, 255, 0.42); } html[data-glass="on"][data-theme="dark"] { --glass-bg: rgba(22, 28, 45, 0.45); --glass-bg-strong: rgba(28, 36, 58, 0.55); --glass-border: rgba(255, 255, 255, 0.14); --glass-border-soft: rgba(255, 255, 255, 0.08); --glass-highlight: rgba(255, 255, 255, 0.18); --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset; --glass-shadow-hover: 0 20px 56px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.14) inset; --surface: rgba(18, 24, 40, 0.48); --surface-solid: rgba(22, 28, 45, 0.52); --header-bg: rgba(11, 15, 26, 0.42); } /* Shared liquid-glass material — sitewide containers */ html[data-glass="on"] .lg, html[data-glass="on"] .glass, html[data-glass="on"] .social-card, html[data-glass="on"] .service-card, html[data-glass="on"] .step, html[data-glass="on"] .price-disclaimer, html[data-glass="on"] .bonus-bar, html[data-glass="on"] .flash__bar, html[data-glass="on"] .cta-panel, html[data-glass="on"] .hero-panel, html[data-glass="on"] .float-card, html[data-glass="on"] .ig-slide, html[data-glass="on"] .testimonial, html[data-glass="on"] .cart-progress, html[data-glass="on"] .reward-toast__card, html[data-glass="on"] .filter-group select, html[data-glass="on"] .filter-group input, html[data-glass="on"] .pill, html[data-glass="on"] .hero-promo, html[data-glass="on"] .hero-promo--panel, html[data-glass="on"] .view-toolbar__btns, html[data-glass="on"] .empty-state, html[data-glass="on"] .cart-item, html[data-glass="on"] .modal__panel { background: var(--glass-bg) !important; backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: 1px solid var(--glass-border-soft) !important; box-shadow: var(--glass-shadow); position: relative; isolation: isolate; } /* Flip-clock tiles stay solid (not frosted glass) */ html[data-glass="on"] .countdown__screen { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; /* Keep black flip look on light theme */ background: linear-gradient(180deg, #3a3a3a 0%, #3a3a3a 49.5%, #1c1c1c 50.5%, #1c1c1c 100%) !important; border: 1px solid rgba(0, 0, 0, 0.45) !important; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.06) inset, 0 -1px 0 rgba(0, 0, 0, 0.5) inset !important; } html[data-glass="on"] .countdown__digits { color: #f3f4f6 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25), 0 -1px 0 rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.35) !important; } html[data-glass="on"][data-theme="dark"] .countdown__screen { background: linear-gradient(180deg, #f4f4f5 0%, #f4f4f5 49.5%, #e4e4e7 50.5%, #e4e4e7 100%) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 -2px 4px rgba(0, 0, 0, 0.08) inset !important; } html[data-glass="on"][data-theme="dark"] .countdown__digits { color: #0a0a0a !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 -1px 0 rgba(0, 0, 0, 0.12), 0 2px 3px rgba(0, 0, 0, 0.12) !important; } /* Cart drawer: glass look WITHOUT changing position (must stay absolute right) */ html[data-glass="on"] .cart-drawer__panel { background: var(--glass-bg-strong) !important; backdrop-filter: blur(28px) saturate(1.55); -webkit-backdrop-filter: blur(28px) saturate(1.55); border: 1px solid var(--glass-border-soft) !important; border-right: none !important; box-shadow: -16px 0 48px rgba(0, 0, 0, 0.18); position: absolute !important; top: 0 !important; right: 0 !important; left: auto !important; isolation: isolate; } /* Specular top edge (liquid highlight) — cards only, not every chip (product-card uses its own cursor edge reflection instead) */ html[data-glass="on"] .lg::after, html[data-glass="on"] .glass::after, html[data-glass="on"] .social-card::after, html[data-glass="on"] .cta-panel::after, html[data-glass="on"] .hero-panel::after, html[data-glass="on"] .price-disclaimer::after, html[data-glass="on"] .bonus-bar::after, html[data-glass="on"] .flash__bar::after, html[data-glass="on"] .service-card::after, html[data-glass="on"] .step::after, html[data-glass="on"] .modal__panel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient( 155deg, var(--glass-highlight) 0%, transparent 38%, transparent 100% ); opacity: 0.28; z-index: 0; } /* Stack content above specular layer — DO NOT force position on badges */ html[data-glass="on"] .social-card > *, html[data-glass="on"] .cta-panel > *, html[data-glass="on"] .hero-panel > *, html[data-glass="on"] .price-disclaimer > *, html[data-glass="on"] .bonus-bar > *, html[data-glass="on"] .flash__bar > *, html[data-glass="on"] .service-card > *, html[data-glass="on"] .step > * { position: relative; z-index: 1; } /* ========================================================= Product cards — transparent liquid glass (no cursor reflection) Full border via outline on hover so edges never look cropped ========================================================= */ html[data-glass="on"] .product-card, .product-card { position: relative; overflow: hidden; isolation: isolate; /* No solid fill — only the main website background shows through */ background: transparent !important; background-color: transparent !important; background-image: none !important; /* Lighter blur by default for smoother scroll */ backdrop-filter: blur(12px) saturate(1.3) !important; -webkit-backdrop-filter: blur(12px) saturate(1.3) !important; border: 1px solid rgba(15, 23, 42, 0.16) !important; box-shadow: 0 8px 32px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; } /* Soft glass sheen only — no cursor tracking */ html[data-glass="on"] .product-card::before, .product-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 42%, transparent 72% ); } /* No cursor edge reflection */ html[data-glass="on"] .product-card::after, .product-card::after { content: none !important; display: none !important; } html[data-glass="on"] .product-card > *, .product-card > * { position: relative; z-index: 1; } html[data-glass="on"] .product-card > .product-card__badge, .product-card > .product-card__badge { z-index: 5 !important; } html[data-glass="on"] .product-card:hover, .product-card:hover { border-color: rgba(250, 204, 21, 0.65) !important; outline: 1.5px solid rgba(250, 204, 21, 0.75) !important; outline-offset: -1px; transform: translateY(-3px); z-index: 3; box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(250, 204, 21, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important; } /* Dark theme transparent glass */ html[data-theme="dark"] .product-card, html[data-glass="on"][data-theme="dark"] .product-card { border-color: rgba(255, 255, 255, 0.14) !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } html[data-theme="dark"] .product-card::before, html[data-glass="on"][data-theme="dark"] .product-card::before { background: linear-gradient( 145deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 42%, transparent 72% ); } html[data-theme="dark"] .product-card:hover, html[data-glass="on"][data-theme="dark"] .product-card:hover { border-color: rgba(250, 204, 21, 0.55) !important; outline: 1.5px solid rgba(250, 204, 21, 0.7) !important; outline-offset: -1px; z-index: 3; box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(250, 204, 21, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } /* Keep interactive bits readable on glass */ .product-card .variant { background: rgba(255, 255, 255, 0.55) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } html[data-theme="dark"] .product-card .variant { background: rgba(15, 23, 42, 0.45) !important; } .product-card .variant.active { background: #0a0a0a !important; color: #facc15 !important; border-color: #0a0a0a !important; } html[data-theme="dark"] .product-card .variant.active { background: #f8fafc !important; color: #0a0a0a !important; border-color: #f8fafc !important; } .product-card .btn--cart { backdrop-filter: none; } .product-card .chip { background: rgba(255, 255, 255, 0.4) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-color: rgba(15, 23, 42, 0.1) !important; } html[data-theme="dark"] .product-card .chip { background: rgba(15, 23, 42, 0.4) !important; border-color: rgba(255, 255, 255, 0.1) !important; } html[data-glass="on"] .product-card__badge { position: absolute !important; top: 12px !important; right: 12px !important; left: auto !important; width: auto !important; max-width: none !important; /* never ellipsis/crop badge labels */ overflow: visible !important; white-space: nowrap !important; display: inline-flex !important; align-items: center; justify-content: center; z-index: 5 !important; font-size: 0.68rem !important; font-weight: 800 !important; letter-spacing: 0.03em; text-transform: uppercase; padding: 5px 11px !important; border-radius: 999px !important; line-height: 1.2; white-space: nowrap; backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); border: 1px solid rgba(255, 255, 255, 0.45) !important; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1), 0 1px 0 rgba(255, 255, 255, 0.55) inset; } html[data-glass="on"] .product-card__badge--popular { background: rgba(250, 204, 21, 0.82) !important; color: #0a0a0a !important; border-color: rgba(255, 255, 255, 0.55) !important; } html[data-glass="on"] .product-card__badge--sale { background: rgba(254, 202, 202, 0.88) !important; color: #991b1b !important; } html[data-glass="on"] .product-card__badge--save { background: rgba(187, 247, 208, 0.88) !important; color: #14532d !important; } html[data-glass="on"][data-theme="dark"] .product-card__badge { border-color: rgba(255, 255, 255, 0.16) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.12) inset; } html[data-glass="on"][data-theme="dark"] .product-card__badge--popular { background: rgba(250, 204, 21, 0.9) !important; color: #0a0a0a !important; } html[data-glass="on"][data-theme="dark"] .product-card__badge--sale { background: rgba(127, 29, 29, 0.75) !important; color: #fecaca !important; } html[data-glass="on"][data-theme="dark"] .product-card__badge--save { background: rgba(20, 83, 45, 0.75) !important; color: #bbf7d0 !important; } /* Stronger panels */ html[data-glass="on"] .cta-panel, html[data-glass="on"] .hero-panel, html[data-glass="on"] .modal__panel { background: var(--glass-bg-strong) !important; backdrop-filter: blur(28px) saturate(1.55); -webkit-backdrop-filter: blur(28px) saturate(1.55); border-color: var(--glass-border) !important; } /* Modal footer stays solid/readable on glass */ html[data-glass="on"] .modal__footer { background: rgba(255, 255, 255, 0.96) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } html[data-glass="on"][data-theme="dark"] .modal__footer { background: rgba(18, 25, 44, 0.96) !important; } /* Chips stay compact glass pills (not full bars) */ html[data-glass="on"] .chip { background: rgba(255, 255, 255, 0.55) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(15, 23, 42, 0.1) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; width: auto; display: inline-flex; } html[data-glass="on"] .float-card, html[data-glass="on"] .service-card, html[data-glass="on"] .step, html[data-glass="on"] .social-card { border: 1px solid rgba(15, 23, 42, 0.12) !important; } html[data-glass="on"][data-theme="dark"] .float-card, html[data-glass="on"][data-theme="dark"] .service-card, html[data-glass="on"][data-theme="dark"] .step, html[data-glass="on"][data-theme="dark"] .social-card { border-color: rgba(255, 255, 255, 0.12) !important; } html[data-glass="on"] .btn-details { border: 1.5px solid rgba(15, 23, 42, 0.14) !important; background: rgba(255, 255, 255, 0.85) !important; color: #0f172a !important; } html[data-glass="on"][data-theme="dark"] .btn-details { border-color: rgba(255, 255, 255, 0.16) !important; background: rgba(18, 25, 44, 0.9) !important; color: #eef2ff !important; } html[data-glass="on"] .variant { border: 1px solid rgba(15, 23, 42, 0.12) !important; } html[data-glass="on"][data-theme="dark"] .variant { border-color: rgba(255, 255, 255, 0.12) !important; } html[data-glass="on"] .chip--yellow { background: rgba(254, 249, 195, 0.75) !important; } html[data-glass="on"][data-theme="dark"] .chip { background: rgba(255, 255, 255, 0.08) !important; } html[data-glass="on"][data-theme="dark"] .chip--yellow { background: rgba(250, 204, 21, 0.15) !important; } /* Filters row glass strip feel */ html[data-glass="on"] .filters { padding: 14px; border-radius: 18px; background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: 1px solid var(--glass-border-soft); box-shadow: var(--glass-shadow); } /* How-it-works / section soft backgrounds */ html[data-glass="on"] .section--soft { background: transparent !important; } /* Header + announce glass */ html[data-glass="on"] .header { background: var(--header-bg) !important; backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); border-bottom: 1px solid var(--glass-border-soft); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset; } html[data-glass="on"][data-theme="dark"] .header { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset; } html[data-glass="on"] .announce { background: linear-gradient( 90deg, rgba(10, 10, 10, 0.72), rgba(23, 23, 23, 0.65), rgba(15, 23, 42, 0.72) ) !important; backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); } html[data-glass="on"][data-theme="dark"] .announce { background: linear-gradient( 90deg, rgba(10, 14, 24, 0.75), rgba(18, 24, 38, 0.7), rgba(15, 21, 36, 0.75) ) !important; } /* Footer */ html[data-glass="on"] .footer { background: var(--glass-bg) !important; backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); border-top: 1px solid var(--glass-border-soft); } /* Modal + cart */ html[data-glass="on"] .modal__panel { border-radius: 24px; box-shadow: var(--glass-shadow-hover), 0 0 0 1px var(--glass-border-soft); } html[data-glass="on"][data-theme="dark"] .cart-drawer__panel { box-shadow: -16px 0 56px rgba(0, 0, 0, 0.45) !important; } /* Hover lift — exclude product-card (has its own glass hover + cursor light) */ html[data-glass="on"] .social-card:hover, html[data-glass="on"] .service-card:hover { box-shadow: var(--glass-shadow-hover); border-color: rgba(250, 204, 21, 0.45) !important; transform: translateY(-4px); } /* Inputs */ html[data-glass="on"] .filter-group select, html[data-glass="on"] .filter-group input { border-radius: 14px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset; } html[data-glass="on"][data-theme="dark"] .filter-group select, html[data-glass="on"][data-theme="dark"] .filter-group input { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset; } /* Icon buttons + cart */ html[data-glass="on"] .icon-btn, html[data-glass="on"] .cart-btn { background: var(--glass-bg) !important; backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-color: var(--glass-border-soft) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 4px 16px rgba(15, 23, 42, 0.08); } html[data-glass="on"][data-theme="dark"] .cart-btn { background: rgba(18, 25, 44, 0.55) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 6px 20px rgba(0, 0, 0, 0.35) !important; } /* Buttons stay solid for readability */ html[data-glass="on"] .btn--primary { box-shadow: 0 6px 24px rgba(250, 204, 21, 0.35), 0 1px 0 rgba(255, 255, 255, 0.45) inset; } html[data-glass="on"] .btn--whatsapp { background: #25d366 !important; color: #ffffff !important; border-color: #25d366 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 6px 24px rgba(37, 211, 102, 0.4), 0 1px 0 rgba(255, 255, 255, 0.25) inset !important; } html[data-glass="on"] .btn--whatsapp:hover { background: #1ebe57 !important; border-color: #1ebe57 !important; color: #ffffff !important; } html[data-glass="on"] .btn--outline, html[data-glass="on"] .btn--ghost { background: rgba(255, 255, 255, 0.28) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: var(--glass-border-soft) !important; } html[data-glass="on"][data-theme="dark"] .btn--outline, html[data-glass="on"][data-theme="dark"] .btn--ghost { background: rgba(255, 255, 255, 0.06) !important; } html[data-glass="on"] .nav__link { background: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none; border: none !important; box-shadow: none !important; } /* Sale pop — glass look WITHOUT breaking fixed viewport position */ html[data-glass="on"] .sale-pop { position: fixed !important; left: 16px !important; bottom: 22px !important; right: auto !important; top: auto !important; z-index: 275 !important; border-radius: 18px; overflow: visible; background: rgba(255, 255, 255, 0.94) !important; backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3); border: 1px solid rgba(15, 23, 42, 0.12) !important; box-shadow: 0 12px 40px rgba(15, 23, 42, 0.16) !important; } html[data-glass="on"][data-theme="dark"] .sale-pop { background: rgba(15, 23, 42, 0.94) !important; border-color: rgba(250, 204, 21, 0.22) !important; } @media (max-width: 768px) { html[data-glass="on"] .sale-pop { left: max(10px, env(safe-area-inset-left)) !important; /* Align with WhatsApp float bottom */ bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; width: min(260px, calc(100vw - 88px)) !important; max-width: calc(100vw - 88px) !important; } } html[data-glass="on"] .reward-toast__card { background: rgba(10, 10, 10, 0.55) !important; backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); border: 1px solid rgba(250, 204, 21, 0.35) !important; } /* Dark CTA override from style.css — keep glass */ html[data-glass="on"][data-theme="dark"] .cta-panel { background: linear-gradient( 145deg, rgba(28, 36, 58, 0.55) 0%, rgba(22, 28, 45, 0.48) 55%, rgba(18, 24, 40, 0.55) 100% ) !important; border-color: rgba(250, 204, 21, 0.22) !important; } /* Slightly richer page bg so glass has something to refract */ html[data-glass="on"] body { background-image: radial-gradient(ellipse 80% 50% at 20% 0%, rgba(250, 204, 21, 0.12), transparent 50%), radial-gradient(ellipse 60% 40% at 90% 10%, rgba(59, 130, 246, 0.08), transparent 45%); } html[data-glass="on"][data-theme="dark"] body { background-image: radial-gradient(ellipse 70% 45% at 30% 0%, rgba(99, 102, 241, 0.14), transparent 55%), radial-gradient(ellipse 50% 35% at 85% 15%, rgba(250, 204, 21, 0.06), transparent 50%); } /* Variant chips glass */ html[data-glass="on"] .variant { background: rgba(255, 255, 255, 0.35) !important; backdrop-filter: blur(8px); border-color: var(--glass-border-soft) !important; } html[data-glass="on"][data-theme="dark"] .variant { background: rgba(255, 255, 255, 0.06) !important; } html[data-glass="on"] .variant.active { background: var(--btn-dark) !important; color: var(--btn-dark-text) !important; border-color: transparent !important; backdrop-filter: none; } /* Marquee strip */ html[data-glass="on"] .marquee { background: var(--glass-bg) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: var(--glass-border-soft); } /* Float WA stays solid brand green */ html[data-glass="on"] .float-wa { backdrop-filter: none; } /* Mobile / low-power: kill expensive glass on product cards */ @media (max-width: 768px) { html[data-glass="on"] { --glass-blur: 8px; --glass-sat: 1.1; } html[data-glass="on"] .social-card::after, html[data-glass="on"] .cta-panel::after, html[data-glass="on"] .hero-panel::after, html[data-glass="on"] .service-card::after, html[data-glass="on"] .step::after { display: none; } /* Solid fill — no backdrop-filter (main scroll jank source on mobile) */ html[data-glass="on"] .product-card, .product-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(255, 255, 255, 0.94) !important; background-color: rgba(255, 255, 255, 0.94) !important; } html[data-theme="dark"] .product-card, html[data-glass="on"][data-theme="dark"] .product-card { background: rgba(18, 25, 44, 0.94) !important; background-color: rgba(18, 25, 44, 0.94) !important; } html[data-glass="on"] .product-card::before, .product-card::before { display: none !important; } /* Badge must stay in-flow on mobile grid — never absolute overlay */ html[data-glass="on"] .products-grid[data-view="2"] .product-card__badge, .products-grid[data-view="2"] .product-card__badge { position: static !important; top: auto !important; right: auto !important; left: auto !important; width: auto !important; max-width: 100% !important; } html[data-glass="on"] .modal__panel, html[data-glass="on"] .cart-drawer__panel { backdrop-filter: blur(10px) saturate(1.15); -webkit-backdrop-filter: blur(10px) saturate(1.15); } html[data-glass="on"] .header { backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); } } @media (prefers-reduced-transparency: reduce), (prefers-reduced-motion: reduce) { html[data-glass="on"] .glass, html[data-glass="on"] .cta-panel, html[data-glass="on"] .header, html[data-glass="on"] .social-card, html[data-glass="on"] .filter-group select, html[data-glass="on"] .filter-group input, html[data-glass="on"] .sale-pop { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--surface-solid) !important; } /* Product cards stay transparent; drop expensive blur */ html[data-glass="on"] .product-card, .product-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: transparent !important; } html[data-glass="on"] .product-card::before, .product-card::before, html[data-glass="on"] .glass::after, html[data-glass="on"] .cta-panel::after { display: none !important; } }