/* JOY Automart Retail Marketplace · 16K display + compact utility controls Production visual override · 2026-07-28 Scoped to Retail Marketplace surfaces only. */ /* 1) Fill the top-left retail hero gap with a premium UHD display surface. */ .marketplace-commerce[data-portal="retail"] .marketplace-commerce__hero-copy::before { content: "" !important; display: block !important; width: min(100%, 760px) !important; aspect-ratio: 16 / 9 !important; margin: 48px 0 30px !important; border: 7px solid #15181d !important; border-radius: 17px !important; background-color: #05070b !important; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjgwIDcyMCI+CjxkZWZzPgogIDxsaW5lYXJHcmFkaWVudCBpZD0iYmciIHgxPSIwIiB5MT0iMCIgeDI9IjEiIHkyPSIxIj4KICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzA1MDcwYiIvPgogICAgPHN0b3Agb2Zmc2V0PSIuNTIiIHN0b3AtY29sb3I9IiMxMTE4MjciLz4KICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzA1MDUwOSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJnbG93IiBjeD0iLjcyIiBjeT0iLjQiIHI9Ii41NSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNlMTFkNDgiIHN0b3Atb3BhY2l0eT0iLjM0Ii8+CiAgICA8c3RvcCBvZmZzZXQ9Ii40OCIgc3RvcC1jb2xvcj0iIzhiMWEyYyIgc3RvcC1vcGFjaXR5PSIuMTIiLz4KICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9yYWRpYWxHcmFkaWVudD4KICA8bGluZWFyR3JhZGllbnQgaWQ9InNpeHRlZW4iIHgxPSIwIiB5MT0iMCIgeDI9IjEiIHkyPSIuMiI+CiAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmZjRkNzMiLz4KICAgIDxzdG9wIG9mZnNldD0iLjQ4IiBzdG9wLWNvbG9yPSIjYzA4NGZjIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM1NWM4ZmYiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxsaW5lYXJHcmFkaWVudCBpZD0icm9hZCIgeDE9Ii4xIiB5MT0iMSIgeDI9Ii45IiB5Mj0iMCI+CiAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMxMDE3MjQiLz4KICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzJhMTgyMyIvPgogIDwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPHJlY3Qgd2lkdGg9IjEyODAiIGhlaWdodD0iNzIwIiByeD0iMjgiIGZpbGw9InVybCgjYmcpIi8+CjxyZWN0IHdpZHRoPSIxMjgwIiBoZWlnaHQ9IjcyMCIgcng9IjI4IiBmaWxsPSJ1cmwoI2dsb3cpIi8+CjxnIG9wYWNpdHk9Ii4xNSIgc3Ryb2tlPSIjYjhjMmQ4IiBzdHJva2Utd2lkdGg9IjEiPgogIDxwYXRoIGQ9Ik0wIDEyMEgxMjgwTTAgMjQwSDEyODBNMCAzNjBIMTI4ME0wIDQ4MEgxMjgwTTAgNjAwSDEyODAiLz4KICA8cGF0aCBkPSJNMTYwIDBWNzIwTTMyMCAwVjcyME00ODAgMFY3MjBNNjQwIDBWNzIwTTgwMCAwVjcyME05NjAgMFY3MjBNMTEyMCAwVjcyMCIvPgo8L2c+CjxwYXRoIGQ9Ik02OTAgNzIwIEw4ODAgMzUwIEwxMDYwIDM1MCBMMTI2MCA3MjBaIiBmaWxsPSJ1cmwoI3JvYWQpIiBvcGFjaXR5PSIuODUiLz4KPHBhdGggZD0iTTg4NyA3MjAgTDk1MCAzNTAiIHN0cm9rZT0iI2Y3Y2M2OSIgc3Ryb2tlLXdpZHRoPSI1IiBvcGFjaXR5PSIuNjIiLz4KPHBhdGggZD0iTTExMjAgNzIwIEw5OTUgMzUwIiBzdHJva2U9IiNlMTFkNDgiIHN0cm9rZS13aWR0aD0iNCIgb3BhY2l0eT0iLjU1Ii8+CjxnIG9wYWNpdHk9Ii43OCI+CiAgPHJlY3QgeD0iNzMwIiB5PSIxNTAiIHdpZHRoPSI2IiBoZWlnaHQ9IjE3MCIgcng9IjMiIGZpbGw9IiNlMTFkNDgiLz4KICA8cmVjdCB4PSI3NzIiIHk9IjExMiIgd2lkdGg9IjQiIGhlaWdodD0iMjE0IiByeD0iMiIgZmlsbD0iIzU1YzhmZiIvPgogIDxyZWN0IHg9IjgxNSIgeT0iMTc4IiB3aWR0aD0iNSIgaGVpZ2h0PSIxNDAiIHJ4PSIyLjUiIGZpbGw9IiNmN2NjNjkiLz4KICA8cmVjdCB4PSIxMDUwIiB5PSIxMjYiIHdpZHRoPSI0IiBoZWlnaHQ9IjE4OCIgcng9IjIiIGZpbGw9IiNlMTFkNDgiLz4KICA8cmVjdCB4PSIxMDk0IiB5PSIxNzAiIHdpZHRoPSI1IiBoZWlnaHQ9IjE0MiIgcng9IjIuNSIgZmlsbD0iIzU1YzhmZiIvPgo8L2c+CjxnIGZvbnQtZmFtaWx5PSJJbnRlcixBcmlhbCxzYW5zLXNlcmlmIj4KICA8dGV4dCB4PSI2MiIgeT0iODAiIGZpbGw9IiNmZmZmZmYiIGZvbnQtc2l6ZT0iNDIiIGZvbnQtd2VpZ2h0PSI4MDAiIGxldHRlci1zcGFjaW5nPSI0Ij5VSEQgU0NSRUVOPC90ZXh0PgogIDx0ZXh0IHg9IjY0IiB5PSIxMjgiIGZpbGw9IiNjN2NmZGEiIGZvbnQtc2l6ZT0iMjQiIGZvbnQtd2VpZ2h0PSI1MDAiPlN1cHBvcnRzIHVwIHRvPC90ZXh0PgogIDx0ZXh0IHg9IjYwIiB5PSIyODAiIGZpbGw9InVybCgjc2l4dGVlbikiIGZvbnQtc2l6ZT0iMTQ4IiBmb250LXdlaWdodD0iOTAwIiBsZXR0ZXItc3BhY2luZz0iLTgiPjE2SzwvdGV4dD4KICA8dGV4dCB4PSI2NCIgeT0iMzMyIiBmaWxsPSIjZjdjYzY5IiBmb250LXNpemU9IjE3IiBmb250LXdlaWdodD0iNzAwIiBsZXR0ZXItc3BhY2luZz0iNCI+Sk9ZIEFVVE9NQVJUIMK3IFVMVFJBIEhJR0ggREVGSU5JVElPTiBESVNQTEFZIFNZU1RFTTwvdGV4dD4KICA8cmVjdCB4PSI2MiIgeT0iNTQ2IiB3aWR0aD0iMTc4IiBoZWlnaHQ9IjgyIiByeD0iMTIiIGZpbGw9IiMwYzBmMTUiIHN0cm9rZT0iI2Y3Y2M2OSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgPHRleHQgeD0iODciIHk9IjU4MyIgZmlsbD0iI2Y3Y2M2OSIgZm9udC1zaXplPSIyOSIgZm9udC13ZWlnaHQ9IjkwMCI+MTZLPC90ZXh0PgogIDx0ZXh0IHg9Ijg3IiB5PSI2MTAiIGZpbGw9IiNmN2NjNjkiIGZvbnQtc2l6ZT0iMTQiIGZvbnQtd2VpZ2h0PSI3MDAiIGxldHRlci1zcGFjaW5nPSIyIj5VTFRSQSBIRDwvdGV4dD4KICA8dGV4dCB4PSIzMDAiIHk9IjU4NiIgZmlsbD0iI2Y0ZjVmNyIgZm9udC1zaXplPSIyMSIgZm9udC13ZWlnaHQ9IjcwMCI+SERSIDEwKzwvdGV4dD4KICA8dGV4dCB4PSI0MjYiIHk9IjU4NiIgZmlsbD0iI2Y0ZjVmNyIgZm9udC1zaXplPSIyMSIgZm9udC13ZWlnaHQ9IjcwMCI+RE9MQlkgVklTSU9OPC90ZXh0PgogIDx0ZXh0IHg9IjYwMiIgeT0iNTg2IiBmaWxsPSIjZjRmNWY3IiBmb250LXNpemU9IjIxIiBmb250LXdlaWdodD0iNzAwIj5XQ0c8L3RleHQ+CiAgPHRleHQgeD0iMTA0MCIgeT0iNjY4IiBmaWxsPSIjYmFjMmNmIiBmb250LXNpemU9IjE0IiBmb250LXdlaWdodD0iNjAwIiBsZXR0ZXItc3BhY2luZz0iMyI+MTZLIFJFQURZPC90ZXh0Pgo8L2c+CjxjaXJjbGUgY3g9IjExODYiIGN5PSI3OCIgcj0iNyIgZmlsbD0iIzM0ZDM5OSIvPgo8Y2lyY2xlIGN4PSIxMTg2IiBjeT0iNzgiIHI9IjE4IiBmaWxsPSJub25lIiBzdHJva2U9IiMzNGQzOTkiIHN0cm9rZS1vcGFjaXR5PSIuMyIvPgo8L3N2Zz4=") !important; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important; box-shadow: 0 30px 70px -42px rgba(5, 7, 11, .92), 0 0 0 1px rgba(255,255,255,.08) inset, 0 1px 0 rgba(255,255,255,.12) inset !important; box-sizing: border-box !important; } html.dark .marketplace-commerce[data-portal="retail"] .marketplace-commerce__hero-copy::before { border-color: #20242b !important; box-shadow: 0 34px 82px -44px rgba(0,0,0,.98), 0 0 34px -22px rgba(225,29,72,.48), 0 0 0 1px rgba(255,255,255,.08) inset !important; } /* 2) JOY Auto Exchange: replace the lower-left floating card with a small fixed utility box above the screen. */ a.os-auto-exchange-dock[data-source-os="retail"] { position: fixed !important; top: 94px !important; left: clamp(16px, 3vw, 34px) !important; right: auto !important; bottom: auto !important; z-index: 88 !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; width: auto !important; min-width: 0 !important; max-width: 220px !important; min-height: 42px !important; padding: 6px 9px !important; border: 1px solid rgba(15,23,42,.13) !important; border-radius: 12px !important; background: rgba(255,255,255,.94) !important; color: #111318 !important; box-shadow: 0 18px 42px -32px rgba(15,23,42,.55) !important; backdrop-filter: blur(18px) saturate(120%) !important; -webkit-backdrop-filter: blur(18px) saturate(120%) !important; text-decoration: none !important; transform: none !important; } html.dark a.os-auto-exchange-dock[data-source-os="retail"] { border-color: rgba(255,255,255,.13) !important; background: rgba(12,14,17,.94) !important; color: #fff !important; box-shadow: 0 20px 48px -30px rgba(0,0,0,.95), 0 0 24px -20px rgba(225,29,72,.62) !important; } a.os-auto-exchange-dock[data-source-os="retail"] .os-auto-exchange-dock__icon { width: 30px !important; height: 30px !important; min-width: 30px !important; border-radius: 9px !important; display: grid !important; place-items: center !important; } a.os-auto-exchange-dock[data-source-os="retail"] .os-auto-exchange-dock__icon svg { width: 15px !important; height: 15px !important; } a.os-auto-exchange-dock[data-source-os="retail"] .os-auto-exchange-dock__copy { min-width: 0 !important; display: block !important; } a.os-auto-exchange-dock[data-source-os="retail"] .os-auto-exchange-dock__copy small { display: none !important; } a.os-auto-exchange-dock[data-source-os="retail"] .os-auto-exchange-dock__copy strong { display: block !important; margin: 0 !important; font-size: 10px !important; line-height: 1.1 !important; font-weight: 820 !important; letter-spacing: -.01em !important; white-space: nowrap !important; } a.os-auto-exchange-dock[data-source-os="retail"] .os-auto-exchange-dock__arrow { width: 13px !important; height: 13px !important; margin-left: 1px !important; } /* 3) Retail page no longer shows Theme or JOY Copilot floating controls. */ .owner-theme-dock[data-portal-zone="retail"], .portal-copilot[data-portal="retail"] { display: none !important; } /* 4) MAYA becomes a tiny animated circular receptionist button on Retail. */ @keyframes joyRetailMayaFloat { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-5px,0); } } @keyframes joyRetailMayaPulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.52); opacity: 1; } 70% { box-shadow: 0 0 0 8px rgba(52,211,153,0); opacity: .9; } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); opacity: 1; } } body[data-portal-shell="retail"] .guardian-trigger { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; max-width: 40px !important; padding: 0 !important; right: 13px !important; bottom: 13px !important; left: auto !important; display: grid !important; place-items: center !important; gap: 0 !important; overflow: visible !important; border-radius: 999px !important; animation: joyRetailMayaFloat 2.8s ease-in-out infinite !important; } body[data-portal-shell="retail"] .guardian-trigger > .text-left { display: none !important; } body[data-portal-shell="retail"] .guardian-trigger > [data-testid^="ai-orb-"] { width: 24px !important; height: 24px !important; } body[data-portal-shell="retail"] .guardian-trigger::after { content: "" !important; position: absolute !important; top: -1px !important; right: -1px !important; width: 8px !important; height: 8px !important; border-radius: 999px !important; background: #34d399 !important; animation: joyRetailMayaPulse 1.6s ease-out infinite !important; } @media (max-width: 840px) { a.os-auto-exchange-dock[data-source-os="retail"] { top: 132px !important; left: 14px !important; max-width: 196px !important; min-height: 40px !important; } .marketplace-commerce[data-portal="retail"] .marketplace-commerce__hero-copy::before { margin-top: 50px !important; margin-bottom: 26px !important; border-width: 6px !important; border-radius: 15px !important; } } @media (max-width: 570px) { a.os-auto-exchange-dock[data-source-os="retail"] { top: 128px !important; left: 12px !important; padding: 5px 8px !important; } .marketplace-commerce[data-portal="retail"] .marketplace-commerce__hero-copy::before { width: 100% !important; margin-top: 48px !important; margin-bottom: 22px !important; border-width: 5px !important; border-radius: 13px !important; } body[data-portal-shell="retail"] .guardian-trigger { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; max-width: 38px !important; right: 10px !important; bottom: 10px !important; } } @media (prefers-reduced-motion: reduce) { body[data-portal-shell="retail"] .guardian-trigger, body[data-portal-shell="retail"] .guardian-trigger::after { animation: none !important; } }