/* ========================================================================== 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; } /* Magento's native mobile search hides #search off-canvas until the default label toggle opens it. This theme uses its own icon button, so restore the native minisearch field inside our overlay. */ body.-search-mobile-open .page-header .block-search .form.minisearch, body.-search-mobile-open .page-header .block-search .block-content, body.-search-mobile-open .page-header .block-search .field.search, body.-search-mobile-open .page-header .block-search .control { display: block !important; width: 100% !important; } body.-search-mobile-open .page-header .block-search .control { border: 0 !important; clear: none !important; margin: 0 !important; padding: 0 !important; position: static !important; } body.-search-mobile-open .page-header .block-search .input-text, body.-search-mobile-open .page-header .block-search #search { height: 50px; left: auto !important; margin: 0 !important; opacity: 1 !important; position: static !important; visibility: visible !important; width: 100% !important; } /* 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); } /* Force the form block to stack vertically in the overlay. Without this, amsearch-form-block is display:flex with flex-direction:row, so the static-positioned results sit beside the input instead of below it. */ body.-search-mobile-open .amsearch-form-block { flex-direction: column !important; align-items: stretch !important; width: 100% !important; } /* Input wrapper fills full width of the column */ body.-search-mobile-open .amsearch-input-wrapper { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* Results fill the remaining space below the input */ body.-search-mobile-open .amsearch-result-section { position: static !important; max-height: none !important; width: 100% !important; box-shadow: none !important; border: none !important; margin-top: 0 !important; } /* Force single-column product grid on mobile. Vendor default is max-width: 50% which creates a two-column layout that overflows narrow mobile screens. */ .amsearch-products-section.-grid:not(.-slider) .amsearch-item { max-width: 100% !important; width: 100% !important; } /* Stack the result section into a single column — the vendor uses flex-wrap: nowrap on larger popups which places the sidebar beside products. Force wrapping so everything stacks vertically. */ .amsearch-result-section { flex-wrap: wrap !important; } .amsearch-result-section .amsearch-result-block { width: 100% !important; max-width: 100% !important; } /* Popup anchored below search input — full screen width, scrollable */ .amsearch-result-section:not(:empty) { left: 0 !important; right: 0 !important; max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Constrain product thumbnails for single-column list appearance */ .amsearch-products-section.-grid .amsearch-image { max-width: 80px; width: 80px; flex-shrink: 0; } .amsearch-products-section.-grid .amsearch-item { flex-wrap: nowrap; align-items: flex-start; gap: 10px; } .amsearch-products-section.-grid .product-item-details { min-height: auto; } /* 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; } /* ------------------------------------------------------------------ 9. ALGOLIA AUTOCOMPLETE: ECOMMERCE FLYOUT ------------------------------------------------------------------ */ :root { --verve-search-accent: #4f91cd; --verve-search-border: #dfe5ee; --verve-search-muted: #667085; --verve-search-text: #1d2733; --verve-search-soft: #f6f8fb; } .aa-Panel { border: 1px solid var(--verve-search-border) !important; border-top: 3px solid var(--nlg-primary, var(--isuzu-primary, var(--verve-search-accent))) !important; border-radius: 10px !important; box-sizing: border-box; box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22); color: var(--verve-search-text); font-family: Poppins, Montserrat, Arial, sans-serif; margin-top: 10px !important; overflow: hidden; z-index: 10001 !important; } .aa-Panel *, .aa-Panel *::before, .aa-Panel *::after { box-sizing: border-box; } .aa-Panel ul, .aa-Panel ol { list-style: none; margin: 0 !important; padding: 0 !important; } .aa-Panel .aa-PanelLayout { background: #fff; max-height: min(74vh, 760px); overflow: hidden; } .aa-Panel .aa-PanelLayout.with-grid { display: grid !important; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) !important; min-height: 430px !important; width: min(1180px, calc(100vw - 48px)) !important; } .aa-Panel .aa-PanelLayout section { padding: 18px !important; } .aa-Panel .aa-PanelLayout.with-grid section:not([data-autocomplete-source-id="products"]) { background: var(--verve-search-soft); border-right: 1px solid var(--verve-search-border); grid-column: 1 !important; } .aa-Panel .aa-PanelLayout section .aa-SourceHeader { color: var(--verve-search-text) !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: 0 !important; line-height: 1.2; padding: 0 0 10px !important; text-transform: none !important; } .aa-Panel .aa-PanelLayout section:not([data-autocomplete-source-id="products"]) .aa-List { display: grid; gap: 4px; } .aa-Panel .aa-PanelLayout section:not([data-autocomplete-source-id="products"]) .algoliasearch-autocomplete-hit, .aa-Panel .aa-PanelLayout section:not([data-autocomplete-source-id="products"]) .aa-ItemLink { border-radius: 7px; color: var(--verve-search-text); display: block !important; font-size: 14px; font-weight: 500; line-height: 1.35; padding: 9px 10px !important; text-decoration: none; width: 100%; } .aa-Panel .aa-PanelLayout section:not([data-autocomplete-source-id="products"]) .algoliasearch-autocomplete-hit:hover, .aa-Panel .aa-PanelLayout section:not([data-autocomplete-source-id="products"]) .aa-ItemLink:hover, .aa-Panel .aa-PanelLayout section:not([data-autocomplete-source-id="products"]) .aa-cursor .algoliasearch-autocomplete-hit { background: #fff; color: var(--nlg-primary, var(--isuzu-primary, var(--verve-search-accent))); } .aa-Panel .info-without-thumb .details { color: var(--verve-search-muted) !important; display: -webkit-box !important; font-size: 12px !important; height: auto !important; line-height: 1.4; margin-top: 4px; max-height: 34px !important; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .aa-Panel .aa-PanelLayout.with-grid section[data-autocomplete-source-id="products"] { background: #fff; border-left: 0 !important; grid-column: 2 !important; grid-row: 1 / 999 !important; min-width: 0; padding: 20px 22px 18px !important; } .aa-Panel .aa-PanelLayout.with-grid section[data-autocomplete-source-id="products"]::before { color: var(--verve-search-text); content: "Products"; display: block; font-size: 18px; font-weight: 700; line-height: 1.2; margin-bottom: 14px; } .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .aa-List { display: grid !important; gap: 16px !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; max-height: calc(min(74vh, 760px) - 86px) !important; overflow-y: auto; padding-right: 4px !important; } .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .aa-Item { min-width: 0; overflow: visible !important; } .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .algoliasearch-autocomplete-hit { background: #fff; border: 1px solid var(--verve-search-border); border-radius: 8px; color: var(--verve-search-text); display: flex !important; flex-direction: column; height: 100%; min-height: 354px; overflow: hidden !important; padding: 0 !important; text-decoration: none; transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; width: 100%; } .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .algoliasearch-autocomplete-hit:hover, .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .aa-cursor .algoliasearch-autocomplete-hit { border-color: var(--nlg-primary, var(--isuzu-primary, var(--verve-search-accent))); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12); transform: translateY(-1px); } .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .thumb { align-items: center; aspect-ratio: 4 / 3; background: #eef2f6; display: flex; float: none !important; justify-content: center; margin: 0 !important; overflow: hidden; width: 100%; } .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .thumb img { display: block; height: 100% !important; object-fit: contain; width: 100% !important; } .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .info { color: var(--verve-search-text); display: flex; flex: 1 1 auto; flex-direction: column; font-size: 15px; font-weight: 700; gap: 7px; line-height: 1.35; margin: 0 !important; min-height: 0; overflow: visible !important; padding: 13px 14px 14px; text-overflow: clip !important; white-space: normal !important; } .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .info > span:first-child, .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .info > mark:first-child { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .aa-Panel .algoliasearch-autocomplete-hit em, .aa-Panel .algoliasearch-autocomplete-hit mark { color: var(--nlg-primary, var(--isuzu-primary, var(--verve-search-accent))); font-style: normal; font-weight: 800; } .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .algoliasearch-autocomplete-category { color: var(--verve-search-muted) !important; display: -webkit-box; font-size: 12px !important; font-weight: 500; line-height: 1.35; margin-top: 0; max-height: none !important; overflow: hidden; text-overflow: clip !important; white-space: normal !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .algoliasearch-autocomplete-price { color: var(--verve-search-text) !important; font-size: 17px !important; font-weight: 800; height: auto !important; line-height: 1.2; margin-top: auto; } .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .price-box, .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .price-wrapper, .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .price { color: var(--verve-search-text) !important; font-size: 17px !important; font-weight: 800 !important; line-height: 1.2; } .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .before_special { color: #98a2b3; display: block; font-size: 12px; font-weight: 600; margin-top: 2px; } .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .green, .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .orange, .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .red, .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .stock, .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .available, .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .unavailable, .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .preorder { align-items: center; display: inline-flex; font-size: 13px; font-weight: 800; gap: 5px; line-height: 1.1; margin-top: 2px; } .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .green { color: #18a957; } .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .orange, .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .red, .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .unavailable, .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .preorder { color: #cf3d2f; } .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .product-item-actions, .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .actions-primary, .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .amsearch-actions { align-items: center; display: flex; gap: 9px; justify-content: space-between; margin-top: auto; width: 100%; } .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] button, .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .action.primary, .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .tocart { align-items: center; background: var(--nlg-primary, var(--isuzu-primary, var(--verve-search-accent))) !important; border: 0 !important; border-radius: 5px !important; box-shadow: none !important; color: #fff !important; display: inline-flex; font-size: 13px !important; font-weight: 700 !important; justify-content: center; line-height: 1.1 !important; min-height: 38px; padding: 10px 14px !important; text-decoration: none !important; text-transform: none !important; } #autocomplete-products-footer { background: #f8fafc !important; border-top: 1px solid var(--verve-search-border); color: var(--verve-search-muted); font-size: 13px; left: 0; padding: 11px 16px !important; right: 0; } #autocomplete-products-footer a, #autocomplete-products-footer span { color: var(--nlg-primary, var(--isuzu-primary, var(--verve-search-accent))) !important; font-weight: 700; text-decoration: none; } #autocomplete-products-footer a:hover { text-decoration: underline; } #algoliaAutocomplete .aa-Form { border-radius: 6px; } #algoliaAutocomplete .aa-ClearButton { border-radius: 0 6px 6px 0; } #algoliaAutocomplete .aa-Input:focus { border-color: var(--nlg-primary, var(--isuzu-primary, var(--verve-search-accent))) !important; } #search_autocomplete { background: #fff; border: 1px solid var(--verve-search-border); border-radius: 8px; box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18); margin-top: 8px; overflow: hidden; width: min(520px, calc(100vw - 32px)) !important; } #search_autocomplete ul:not(:empty) { border: 0; } #search_autocomplete ul li { border-top: 1px solid #eef2f6; color: var(--verve-search-text); font-size: 14px; line-height: 1.35; min-height: 46px; padding: 11px 48px 11px 14px; } @media (min-width: 1181px) { .aa-Panel { left: auto !important; right: 0 !important; transform: none; width: min(1180px, calc(100vw - 48px)) !important; } } @media (max-width: 1180px) and (min-width: 769px) { .aa-Panel { left: 24px !important; right: 24px !important; transform: none; width: calc(100vw - 48px) !important; } .aa-Panel .aa-PanelLayout.with-grid { width: 100% !important; } .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .aa-List { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 768px) { .aa-Panel { border-radius: 0 !important; left: 0 !important; margin-top: 0 !important; right: 0 !important; transform: none; width: 100vw !important; } .aa-Panel .aa-PanelLayout, .aa-Panel .aa-PanelLayout.with-grid { display: flex !important; flex-direction: column !important; max-height: calc(100vh - 86px); min-height: 0 !important; overflow-y: auto; width: 100% !important; } .aa-Panel .aa-PanelLayout.with-grid section:not([data-autocomplete-source-id="products"]) { border-right: 0; border-bottom: 1px solid var(--verve-search-border); } .aa-Panel .aa-PanelLayout.with-grid section[data-autocomplete-source-id="products"] { padding: 16px !important; } .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .aa-List { display: grid !important; grid-template-columns: 1fr !important; max-height: none !important; overflow: visible; padding-right: 0 !important; } .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .algoliasearch-autocomplete-hit { display: grid !important; grid-template-columns: 96px minmax(0, 1fr); min-height: 0; } .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .thumb { aspect-ratio: auto; height: 100%; min-height: 120px; } .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id="products"] .info { padding: 12px; } }