/** * studio K — Algolia autocomplete (native WPSWA typeahead) brand styling. * * Markup: child-theme/algolia/autocomplete.php (template override) — a post row * (thumbnail + title) and a term row (glyph + title). * Enqueued after the plugin's `algolia-autocomplete` stylesheet by * child-theme/includes/algolia/autocomplete.php, so equal-specificity rules * here win on source order. * * The dropdown is appended to and positioned with inline top/left/width * by autocomplete.js, so everything is scoped at body level under * `.algolia-autocomplete` (the wrapper) → `.aa-dropdown-menu` (the panel). * House style mirrors facets.css: Barlow, --e-global-color-* vars, square corners. */ .algolia-autocomplete { max-width: calc(100vw - 20px); } .algolia-autocomplete .aa-dropdown-menu { font-family: "Barlow", sans-serif; background: #fff; color: var(--e-global-color-text, #1f1c17); font-size: 14px; border: 1px solid #cfd6e6; border-radius: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); margin-top: 6px; padding: 0; max-height: 70vh; overflow-y: auto; width: calc(100vw - 20px); max-width: 260px; } .algolia-autocomplete .aa-dropdown-menu a { font-size: 14px; color: var(--e-global-color-text, #1f1c17); } /* Section header — the index label (e.g. "Produkte"). Uppercase Barlow caption matching .algolia-facet__heading. */ .algolia-autocomplete .autocomplete-header { margin: 0; padding: 12px 16px 6px; line-height: 1.2; border-bottom: 1px solid rgba(0, 0, 0, .06); } .algolia-autocomplete .autocomplete-header-title { float: none; font-family: "Barlow", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--e-global-color-text, #1f1c17); opacity: .6; } /* "Alle Ergebnisse" — the action pinned to the top of the dropdown (synthetic first source). Brand-colored, bold, with a trailing arrow; sits above the first index section. Both classes are used in the selectors so these win over the generic `.suggestion-link` rules that follow in this file. */ .algolia-autocomplete a.suggestion-link.suggestion-link--allresults { justify-content: space-between; gap: 8px; font-weight: 600; font-size: 13px; color: var(--e-global-color-text, #1f1c17); } .algolia-autocomplete .suggestion-allresults-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .algolia-autocomplete a.suggestion-link.suggestion-link--allresults svg { flex: 0 0 auto; fill: none; opacity: .9; } /* Result rows */ .algolia-autocomplete .aa-suggestion { padding: 0; border-bottom: 1px solid rgba(0, 0, 0, .05); } .algolia-autocomplete .aa-suggestion:last-child { border-bottom: 0; } .algolia-autocomplete a.suggestion-link { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: var(--e-global-color-text, #1f1c17); text-decoration: none; } /* Product thumbnail — portrait crop, matching the .product-card image ratio. */ .algolia-autocomplete .suggestion-post-thumbnail { flex: 0 0 auto; width: 48px; height: 60px; margin: 0; border-radius: 0; object-fit: cover; background: #f6f6f6; float: none; } /* Title column. min-width:0 lets the title ellipsize instead of stretching the row. */ .algolia-autocomplete .suggestion-post-attributes { display: flex; flex-direction: column; min-width: 0; flex: 1; } .algolia-autocomplete .aa-suggestion .suggestion-post-title { font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Product-category path prefix ("Damen > "): muted so the matched leaf name that follows it stands out. */ .algolia-autocomplete .suggestion-cat-parents { opacity: .55; } /* Active row (mouse hover + keyboard cursor). */ .algolia-autocomplete .aa-suggestion.aa-cursor, .algolia-autocomplete .aa-suggestion:hover { background: #f6f6f6; } /* Matched-term highlight — brand accent instead of the plugin's default blue. */ .algolia-autocomplete .aa-suggestion em { font-style: normal; font-weight: 600; color: var(--e-global-color-primary, #174d8c); background: transparent; } /* Empty state. */ .algolia-autocomplete .autocomplete-empty { padding: 16px; font-size: 14px; color: var(--e-global-color-text, #1f1c17); } .algolia-autocomplete .autocomplete-empty .empty-query { font-weight: 600; }