/* Typesense storefront search box — scoped, theme-friendly, modern look. */
.typesense-searchbox {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0 20px;
    width: 100%;
    max-width: 1024px;
}

.typesense-searchbox .ts-search-input {
    flex: 1 1 auto;
    height: 42px;
    padding: 6px 16px;
    border: 1px solid var(--color-border, #dcdcdc);
    border-right: 0;
    border-radius: 22px 0 0 22px;
    outline: none;
    font-size: 0.95rem;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.typesense-searchbox .ts-search-input::placeholder { color: #9aa0a6; }
.typesense-searchbox .ts-search-input:focus {
    border-color: var(--color-brand-primary, #c8102e);
    box-shadow: 0 0 0 3px rgba(200,16,46,0.10);
}

.typesense-searchbox .ts-search-button {
    height: 42px;
    width: 50px;
    min-width: 50px;
    padding: 0;
    border: 0;
    background: var(--color-brand-primary, #c8102e);
    color: var(--color-bg, #fff);
    border-radius: 0 22px 22px 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: filter .15s ease;
}
.typesense-searchbox .ts-search-button:hover { filter: brightness(1.08); }

.typesense-searchbox .ts-suggestions {
    position: absolute;
    z-index: 1001;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    padding: 8px;
    max-height: 70vh;
    overflow: auto;
}

/* Did you mean */
.typesense-searchbox .ts-dym {
    padding: 8px 12px;
    margin-bottom: 6px;
    background: #fafafa;
    border: 1px dashed #e2e2e2;
    border-radius: 10px;
    color: #444;
    font-size: 0.9rem;
}
.typesense-searchbox .ts-dym a { color: var(--color-brand-primary, #c8102e); text-decoration: none; font-weight: 600; }
.typesense-searchbox .ts-dym a:hover { text-decoration: underline; }

/* Groups */
.typesense-searchbox .ts-group { padding: 4px 0; }
.typesense-searchbox .ts-group + .ts-group { border-top: 1px solid #f0f0f0; margin-top: 4px; padding-top: 8px; }
.typesense-searchbox .ts-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #9aa0a6;
    padding: 4px 12px 6px;
}

/* Generic item (categories / brands) */
.typesense-searchbox .ts-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    color: #222;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.92rem;
}
.typesense-searchbox .ts-item > i { color: #b6bcc3; width: 18px; text-align: center; flex-shrink: 0; }
.typesense-searchbox .ts-item:hover,
.typesense-searchbox .ts-item.active {
    background: rgba(200,16,46,0.06);
}
.typesense-searchbox .ts-item mark {
    background: transparent;
    color: var(--color-brand-primary, #c8102e);
    font-weight: 800;
    padding: 0;
}

/* Product rows */
.typesense-searchbox .ts-product-item { padding: 8px 12px; }
.typesense-searchbox .ts-product-thumb,
.typesense-searchbox .ts-product-icon {
    width: 46px; height: 46px;
    border-radius: 8px;
    border: 1px solid #ececec;
    flex-shrink: 0;
    object-fit: cover;
    background: #f7f8fa;
}
.typesense-searchbox .ts-product-icon {
    display: inline-flex; align-items: center; justify-content: center;
    color: #b6bcc3; font-size: 18px;
}
.typesense-searchbox .ts-product-info { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.typesense-searchbox .ts-product-name {
    font-weight: 600; font-size: 0.92rem; color: #222;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.typesense-searchbox .ts-product-sku {
    font-size: 0.75rem; color: #9aa0a6; font-variant-numeric: tabular-nums;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.typesense-searchbox .ts-product-sku mark {
    background: transparent; color: #5f6368; font-weight: 700; padding: 0;
}
.typesense-searchbox .ts-product-price { font-weight: 800; font-size: 0.9rem; color: var(--color-brand-primary, #c8102e); }

.typesense-searchbox .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (max-width: 767.98px) {
    .typesense-searchbox { width: 100%; margin: 0; order: 250; }
    .typesense-searchbox .ts-search-input { height: 44px; }
    .typesense-searchbox .ts-search-button { height: 44px; }
    .typesense-searchbox .ts-suggestions { max-height: 60vh; }
}