/* CRS.HybridSearch: Instant search UI enhancements */

/* KI badge for vector-search results on search result pages */
.hs-ki-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: 0.03em;
    vertical-align: middle;
    margin-left: 4px;
    white-space: nowrap;
}
.hs-ki-badge i { font-size: 0.55rem; }
/* Double-hit badge: Lucene + KI confirmed (highest relevance) */
.hs-ki-badge.hs-ki-double {
    background: linear-gradient(135deg, #059669, #10b981);
}

/* Single-column product list in instant search */
.instasearch-hits.has-thumbs {
    columns: 1;
    column-gap: 0;
}
.instasearch-hits.has-thumbs > li {
    break-inside: avoid;
}
/* Keep hit groups (categories, manufacturers, "did you mean") single-column */
.instasearch-col:last-child .instasearch-hits {
    columns: 1;
}

/* Larger thumbnails in instant search (~25% bigger than default 48x36) */
.instasearch-hit-thumb {
    width: 60px;
    min-width: 60px;
    max-height: 45px;
}

/* 1. SpellCheck suggestions: more spacing between items */
.hs-spellcheck-item {
    margin-right: 0.8rem;
}

/* 2. Category and Manufacturer results: 25% larger font */
.instasearch-col .instasearch-hit {
    font-size: 1.05rem;
}
.instasearch-col .instasearch-hit-tag {
    font-size: 1.0rem;
}
.instasearch-col .instasearch-group-header {
    font-size: 1.15rem;
}

/* 3. All result items in header: light gray background, full width, entire row clickable */
.instasearch-col .instasearch-hit {
    display: block;
    background-color: #f5f5f5;
    padding: 6px 12px;
    margin: 2px 0;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.15s;
}
.instasearch-col .instasearch-hit:hover {
    background-color: #eaeaea;
}

/* Instant search dropdown width is set dynamically by facet-fix.js
   to stretch to right edge of .container */

/* Search icon clickable - Core sets pointer-events:none on .input-group-icon */
.input-group-icon button {
    pointer-events: auto;
    cursor: pointer;
}

/* Responsive: hit groups (categories, manufacturers, "did you mean") layout */
@media (max-width: 549px) {
    .instasearch-col:last-child {
        columns: 2;
        column-gap: 0.5rem;
    }
    .instasearch-col:last-child .instasearch-group-header,
    .instasearch-col:last-child .instasearch-hits {
        break-inside: avoid;
    }
    .instasearch-hits.has-thumbs {
        columns: 1;
    }
}

@media (max-width: 379px) {
    .instasearch-col:last-child {
        columns: 1;
    }
}