/* ========================================================================== Search UX Enhancements – Verve/4X4AT Covers: close button, keyboard-nav highlight, recent searches, mobile full-screen overlay, loading/no-results states, accessibility focus rings, and touch targets. ========================================================================== */ /* ------------------------------------------------------------------ 1. KEYBOARD-NAV HIGHLIGHT ------------------------------------------------------------------ */ .search-enhanced-highlight { background-color: #f0f4ff !important; outline: 2px solid #3a7bd5; outline-offset: -2px; } /* Hover states for all result items */ .amsearch-item:hover, .aa-Item:hover, #search_autocomplete li:hover { background-color: #f7f7f7; } /* ------------------------------------------------------------------ 2. RECENT SEARCHES DROPDOWN ------------------------------------------------------------------ */ .search-recent-wrapper { position: absolute; top: 100%; left: 0; right: 0; z-index: 200; background: #fff; border: 1px solid #d1d1d1; border-top: none; border-radius: 0 0 8px 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10); padding: 0; margin-top: 0; max-width: 100%; } .search-recent-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px 6px; border-bottom: 1px solid #eee; } .search-recent-title { font-size: 12px; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: 0.5px; } .search-recent-clear { background: none; border: none; color: #3a7bd5; font-size: 12px; cursor: pointer; padding: 2px 6px; border-radius: 3px; transition: background-color 0.15s; } .search-recent-clear:hover { background-color: #eef3fb; text-decoration: underline; } .search-recent-list { list-style: none; margin: 0; padding: 4px 0; } .search-recent-item { margin: 0; padding: 0; } .search-recent-item a { display: flex; align-items: center; gap: 8px; padding: 10px 15px; color: #333; text-decoration: none; font-size: 14px; transition: background-color 0.15s; min-height: 44px; /* touch-target minimum */ } .search-recent-item a:hover, .search-recent-item a:focus { background-color: #f5f5f5; color: #111; } .search-recent-item svg { flex-shrink: 0; color: #999; } /* ------------------------------------------------------------------ 3. LOADING SPINNER ------------------------------------------------------------------ */ .amsearch-loader-wrapper, .aa-LoadingIndicator { display: flex; align-items: center; justify-content: center; padding: 20px 0; } /* Pulse animation for Amasty/Algolia spinner */ @keyframes search-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } .amsearch-loader, .aa-LoadingIndicator svg { animation: search-pulse 1.2s ease-in-out infinite; } /* ------------------------------------------------------------------ 4. NO-RESULTS STATE ------------------------------------------------------------------ */ .amsearch-result-section:empty::after, .aa-Panel[aria-hidden="false"]:empty::after { content: 'No results found. Try a different search term.'; display: block; padding: 24px 20px; text-align: center; color: #888; font-size: 14px; } /* ------------------------------------------------------------------ 5. MOBILE: FULL-SCREEN OVERLAY (< 992px) ------------------------------------------------------------------ */ @media (max-width: 991px) { /* When -search-mobile-open is on , freeze the page and expand the search wrapper to fill the viewport. */ body.-search-mobile-open { overflow: hidden; } body.-search-mobile-open .page-header .header-content .amsearch-wrapper-block, body.-search-mobile-open .page-header .block-search { display: block !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0; bottom: 0; width: 100% !important; max-width: 100% !important; height: 100vh; z-index: 9999; background: #fff; padding: 60px 15px 15px; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Sticky input inside the overlay */ body.-search-mobile-open .amsearch-input-wrapper, body.-search-mobile-open .field.search { position: sticky; top: 0; z-index: 10; background: #fff; padding-bottom: 10px; } /* Mobile close "X" button (created by JS via mobile__search__btn toggle). When the overlay is open, re-style the button as a fixed X. */ body.-search-mobile-open .mobile__search__btn { position: fixed; top: 12px; right: 12px; z-index: 10000; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.12); border: 1px solid #ddd; } body.-search-mobile-open .mobile__search__btn .mobile__search__icon { /* Replace the search icon visually with an X via CSS */ position: relative; width: 20px; height: 20px; } body.-search-mobile-open .mobile__search__btn .mobile__search__icon img { display: none; } body.-search-mobile-open .mobile__search__btn .mobile__search__icon::before, body.-search-mobile-open .mobile__search__btn .mobile__search__icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; background-color: #333; border-radius: 1px; } body.-search-mobile-open .mobile__search__btn .mobile__search__icon::before { transform: translate(-50%, -50%) rotate(45deg); } body.-search-mobile-open .mobile__search__btn .mobile__search__icon::after { transform: translate(-50%, -50%) rotate(-45deg); } /* Results fill the remaining space */ body.-search-mobile-open .amsearch-result-section { position: static !important; max-height: none !important; width: 100% !important; box-shadow: none !important; } /* Touch targets: all result items at least 44px tall */ .amsearch-item a, .aa-Item, #search_autocomplete li { min-height: 44px; display: flex; align-items: center; } } /* ------------------------------------------------------------------ 6. ACCESSIBILITY: FOCUS RINGS ------------------------------------------------------------------ */ .amsearch-input:focus-visible, .aa-Input:focus-visible, #search:focus-visible { outline: 2px solid #3a7bd5; outline-offset: -1px; box-shadow: 0 0 0 3px rgba(58, 123, 213, 0.15); } .search-recent-item a:focus-visible { outline: 2px solid #3a7bd5; outline-offset: -2px; } /* ------------------------------------------------------------------ 7. HIGHLIGHT MATCHING TEXT IN RESULTS This uses the standard or tags that Amasty/Algolia wrap around matching terms in their rendered results. ------------------------------------------------------------------ */ .amsearch-result-section em, .amsearch-result-section mark, .aa-Item em, .aa-Item mark, #search_autocomplete li .qs-option-name em { font-style: normal; font-weight: 700; background-color: transparent; color: inherit; } /* ------------------------------------------------------------------ 8. SMOOTH TRANSITIONS ------------------------------------------------------------------ */ .amsearch-result-section, .aa-Panel, #search_autocomplete { transition: opacity 0.15s ease, transform 0.15s ease; }