/* Blocksy's own native "live results" dropdown (data-live-results on .ct-search-form) renders in parallel with ours and can't be reliably disabled from one Customizer toggle — it's configured per search-form instance in more than one place. Suppressing its container here is simpler and self-contained than chasing every theme setting. */ .ct-search-results { display: none !important; } .nkalgolia-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #e2e2e2; border-radius: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); z-index: 9999; max-height: 420px; overflow-y: auto; margin-top: 4px; } .nkalgolia-dropdown.is-open { display: block; } /* color: ... !important below — a plain class selector (0,1,0 specificity) loses to the browser's default a:visited rule (0,1,1) once a visitor has actually clicked through to a product, making already-visited results render in the browser's muted visited-link color instead of matching unvisited ones. !important is the correct tool here: this is overriding a user-agent default pseudo-class style, not fighting page-author CSS. */ .nkalgolia-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; text-decoration: none; color: #1c1c1c !important; border-bottom: 1px solid #f0f0f0; } .nkalgolia-item:last-child { border-bottom: none; } .nkalgolia-item:hover { background: #f7f7f7; } .nkalgolia-thumb { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; background: #fafafa; } .nkalgolia-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .nkalgolia-name { font-size: 13px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nkalgolia-price { font-size: 12px; font-weight: 600; opacity: 0.8; } .nkalgolia-oos .nkalgolia-price { opacity: 0.6; } .nkalgolia-price .nkalgolia-price-sale { color: #b8452f; } .nkalgolia-price .nkalgolia-price-regular { font-weight: 400; text-decoration: line-through; opacity: 0.6; } .nkalgolia-empty { padding: 12px; font-size: 13px; opacity: 0.7; } .nkalgolia-more { display: block; padding: 10px 12px; text-align: center; font-size: 13px; font-weight: 600; text-decoration: none; color: #1c1c1c !important; /* see the comment on .nkalgolia-item re: a:visited */ border-top: 1px solid #f0f0f0; } .nkalgolia-more:hover { background: #f7f7f7; } /* Full search-results page. The class lives on , not — it's added by a synchronous inline script in (see the PHP's wp_head hook) so native output is hidden before first paint, not after search-results.js gets around to it in the footer. search-results.js still owns REMOVING this class (and its container) if Algolia fails — see that file for the fail-safe fallback. */ html.nkalgolia-results-active ul.products, html.nkalgolia-results-active .woocommerce-info, html.nkalgolia-results-active .woocommerce-no-products-found, html.nkalgolia-results-active nav.woocommerce-pagination, html.nkalgolia-results-active .page-description, html.nkalgolia-results-active .ct-filters-loading, html.nkalgolia-results-active .woocommerce-ordering, html.nkalgolia-results-active .woocommerce-result-count { display: none !important; } .nkalgolia-results-container { margin: 24px 0; } .nkalgolia-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; } .nkalgolia-result-card { display: flex; flex-direction: column; } .nkalgolia-result-link { display: flex; flex-direction: column; text-decoration: none; color: #1c1c1c !important; /* see the comment on .nkalgolia-item re: a:visited */ flex: 1; } /* Deliberately NOT styling color/background/border-radius/padding here — the button already carries the theme's own .button.add_to_cart_button classes (same ones its native product loop uses), so the site's existing CSS styles it identically to every other add-to-cart button on the site automatically. Only the spacing needed for grid layout lives here. */ .nkalgolia-result-card .add_to_cart_button { margin-top: 8px; text-align: center; } .nkalgolia-result-card .add_to_cart_button.added::after { content: ' ✓'; } .nkalgolia-result-image { position: relative; aspect-ratio: 1 / 1; background: #fafafa; border: 1px solid #eee; border-radius: 4px; overflow: hidden; margin-bottom: 8px; } .nkalgolia-result-image img { width: 100%; height: 100%; object-fit: contain; } .nkalgolia-stock-badge { position: absolute; top: 8px; left: 8px; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 3px; } .nkalgolia-sale-badge { position: absolute; top: 8px; right: 8px; background: #b8452f; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 3px; } .nkalgolia-result-body { display: flex; flex-direction: column; gap: 4px; } .nkalgolia-result-name { font-size: 14px; line-height: 1.4; } .nkalgolia-result-price { font-size: 15px; font-weight: 700; } .nkalgolia-has-sale .nkalgolia-price-sale { color: #b8452f; } .nkalgolia-has-sale .nkalgolia-price-regular { margin-left: 6px; font-size: 13px; font-weight: 400; text-decoration: line-through; opacity: 0.6; } .nkalgolia-oos .nkalgolia-result-name, .nkalgolia-oos .nkalgolia-result-price { opacity: 0.55; } .nkalgolia-results-empty { padding: 32px 0; font-size: 15px; opacity: 0.75; } .nkalgolia-results-loading { min-height: 200px; opacity: 0.4; animation: nkalgolia-pulse 1.2s ease-in-out infinite; } @keyframes nkalgolia-pulse { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.45; } } .nkalgolia-pagination { display: flex; gap: 8px; margin-top: 32px; flex-wrap: wrap; } .nkalgolia-pagination a, .nkalgolia-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 4px; font-size: 14px; text-decoration: none; color: #1c1c1c !important; /* see the comment on .nkalgolia-item re: a:visited */ } .nkalgolia-pagination a { border: 1px solid #e2e2e2; } .nkalgolia-pagination a:hover { background: #f7f7f7; } .nkalgolia-pagination .nkalgolia-page-current { font-weight: 700; }