/* * Results popup for the natural-language ("Advanced AI") search on the home page. * Markup is built by themes/js/nlp-search-popup.js and appended to . * Every selector is prefixed with .nlps- so these rules don't touch other pages, * and the shared .product / .product-grid rules don't touch the popup. */ body.nlps-open { overflow: hidden; /* stop the page scrolling behind the popup */ } .nlps-overlay { position: fixed; inset: 0; z-index: 1000000; /* above the WhatsApp widget (999999), which otherwise covers result cards */ display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 18, 40, 0.55); } .nlps-overlay[hidden] { display: none; } .nlps-dialog { box-sizing: border-box; display: flex; flex-direction: column; width: 100%; max-width: 1100px; max-height: min(88vh, 900px); overflow: hidden; background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); font-family: var(--font-default, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); color: #212529; } .nlps-dialog:focus { outline: none; /* focused programmatically on open, not a user target */ } .nlps-dialog *, .nlps-dialog *::before, .nlps-dialog *::after { box-sizing: border-box; } /* Header stays put; only the body scrolls */ .nlps-header { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid #e9ecef; } .nlps-heading { min-width: 0; } .nlps-title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; color: #252b61; } .nlps-summary { margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: #6c757d; overflow-wrap: anywhere; } .nlps-close { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #f1f3f5; color: #252b61; cursor: pointer; transition: background-color 0.2s; } .nlps-close:hover { background: #e2e6ea; } .nlps-close:focus-visible, .nlps-card-link:focus-visible { outline: 2px solid #252b61; outline-offset: 2px; } .nlps-body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 20px; } /* Result cards */ .nlps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .nlps-card { min-width: 0; /* let long titles wrap instead of widening the column */ margin: 0; } .nlps-card-link { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #fff; border: 1px solid #e9ecef; border-radius: 10px; color: inherit; text-decoration: none; transition: box-shadow 0.2s, transform 0.2s; } .nlps-card-link:hover { color: inherit; text-decoration: none; box-shadow: 0 6px 18px rgba(37, 43, 97, 0.12); transform: translateY(-2px); } .nlps-media { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: 12px; background: #f4f6f6; color: #adb5bd; } .nlps-media img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transform: none; } .nlps-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; padding: 10px 12px 0; font-size: 14px; font-weight: 600; line-height: 1.35; color: #212529; overflow-wrap: anywhere; } .nlps-price { margin-top: auto; padding: 8px 12px 12px; font-size: 15px; font-weight: 700; color: #252b61; } /* Loading / empty / error states */ .nlps-status { padding: 48px 16px; text-align: center; font-size: 15px; line-height: 1.5; color: #6c757d; } .nlps-status p { margin: 0 0 8px; } .nlps-status a { color: #252b61; font-weight: 600; } .nlps-spinner { display: block; width: 32px; height: 32px; margin: 0 auto 12px; border: 3px solid #e9ecef; border-top-color: #252b61; border-radius: 50%; animation: nlps-spin 0.8s linear infinite; } @keyframes nlps-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .nlps-spinner { animation-duration: 2s; } .nlps-card-link, .nlps-card-link:hover { transition: none; transform: none; } } /* Phones: full-screen sheet, two columns */ @media (max-width: 575.98px) { .nlps-overlay { padding: 0; align-items: stretch; } .nlps-dialog { max-width: none; max-height: none; height: 100%; border-radius: 0; } .nlps-header { padding: 12px 16px; } .nlps-body { padding: 12px; } .nlps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .nlps-media { padding: 8px; } .nlps-name { padding: 8px 10px 0; font-size: 13px; } .nlps-price { padding: 6px 10px 10px; font-size: 14px; } }