.tsmb-foot, .tsmb-foot:hover { color: var(--ats-accent, #175cd3); }
.tsmb-foot::before, .tsmb-foot::after { content: none; }

.ts-search-shell-wrap {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  vertical-align: middle;
  justify-content: center;
}

.ts-search-shell {
  position: relative;
  width: var(--ats-width, 320px);
  max-width: 100%;
  margin: 0.5rem auto;
  min-width: 0;
}

.ts-search-shell typesense-minibar,
.ts-search-shell .tsmb-form {
  --tsmb-size-base: var(--ats-font-size, 16px);
  --tsmb-size-sm: calc(var(--tsmb-size-base) * 0.8);
  --tsmb-size-radius: var(--ats-radius, 7px);
  --tsmb-size-edge: var(--ats-border-width, 1px);
  --tsmb-size-listbox-width: min(var(--ats-results-width, 448px), calc(100vw - 40px));
  --tsmb-color-base-background: var(--ats-background, #fff);
  --tsmb-color-base30: var(--ats-text, #101828);
  --tsmb-color-base50: var(--ats-placeholder, #63676d);
  --tsmb-color-base90: var(--ats-border, #98a2b3);
  --tsmb-color-focus-background: var(--ats-results-background, #fff);
  --tsmb-color-focus30: var(--ats-results-text, #475467);
  --tsmb-color-focus50: var(--ats-results-text, #475467);
  --tsmb-color-focus90: var(--ats-border, #98a2b3);
  --tsmb-color-primary30: var(--ats-results-title, #101828);
  --tsmb-color-primary50: var(--ats-accent, #175cd3);
  --tsmb-color-primary90: var(--ats-highlight, #eff8ff);
  width: 100%;
  font-family: var(--ats-font-family, inherit);
  font-size: var(--ats-font-size, 16px);
}

.ts-search-shell input[type=search] {
  font-family: inherit;
  padding: var(--ats-padding, 12px) calc(var(--tsmb-size-base) * 2.5) var(--ats-padding, 12px) calc(var(--tsmb-size-base) + var(--ats-padding, 12px) * 2);
}

.ts-search-shell .tsmb-form:focus-within input[type=search] {
  color: var(--ats-focus-text, #101828);
  background: var(--ats-focus-background, #fff);
  outline: 2px solid var(--ats-accent, #175cd3);
  outline-offset: 2px;
}

.ts-search-shell .tsmb-form::before {
  top: calc(var(--ats-border-width, 1px) + var(--ats-padding, 12px));
  left: var(--ats-padding, 12px);
}

.ts-search-shell .tsmb-icon-close {
  top: calc(var(--ats-border-width, 1px) + var(--ats-padding, 12px) + var(--tsmb-size-input) / 2 - var(--tsmb-size-base) / 2);
}

.ts-search-shell [role=listbox] {
  box-sizing: border-box;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.ts-search-shell .screen-reader-text,
.ts-search-shell .ats-search-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Results live outside the menu so they cannot resize or be clipped by it. */
.ts-search-shell.ats-results-overlay {
  box-sizing: border-box;
  position: fixed;
  inset: auto;
  z-index: 2147483647;
  margin: 0;
  padding: 0;
  min-width: 0;
  max-width: none;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--tsmb-color-focus-background, #fff);
  color: var(--tsmb-color-focus30, #475467);
  border: var(--tsmb-size-edge, 1px) solid var(--tsmb-color-focus90, #98a2b3);
  border-radius: var(--tsmb-size-radius, 7px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.ts-search-shell.ats-results-overlay[hidden] { display: none !important; }
.ts-search-shell.ats-results-overlay::backdrop { background: transparent; pointer-events: none; }

.ts-search-shell.ats-results-overlay [role=listbox] {
  position: static;
  box-sizing: border-box;
  transform: none;
  width: 100%;
  min-width: 0;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.ats-results-overlay [role=option] a {
  padding: var(--tsmb-size-base, 16px);
  text-decoration: none;
  border-left: var(--tsmb-size-highlight, 2px) solid transparent;
}
.ats-results-overlay [role=option] + [role=option] a { border-top: 1px solid var(--tsmb-color-focus90, #98a2b3); }
.ats-results-overlay [role=option] a:hover,
.ats-results-overlay [role=option][aria-selected=true] a {
  background: var(--tsmb-color-primary90, #eff8ff);
  border-left-color: var(--tsmb-color-primary50, #175cd3);
}
.ats-results-overlay [role=option] mark { background: none; color: inherit; font-style: normal; font-weight: bold; }
.ats-results-overlay[data-group=true] [role=option] a { margin: 0 var(--tsmb-size-base, 16px); padding: var(--tsmb-size-sm, 12.8px); }
.ats-results-overlay[data-group=true] .tsmb-suggestion_title { font-weight: bold; font-size: var(--tsmb-size-sm, 12.8px); }

.ts-search-shell .tsmb-icon-close {
  padding: 0;
  min-width: 0;
  background: transparent;
  color: inherit;
  line-height: 1;
}
.ts-search-shell .tsmb-icon-close svg { display: block; width: 100%; height: 100%; }
.ts-search-shell .tsmb-icon-close:focus-visible { outline: 2px solid var(--ats-accent, #175cd3); outline-offset: 3px; }

.ts-search-shell [role=option] .ats-result { display: flex; gap: 12px; align-items: flex-start; }
.ats-result-body { min-width: 0; flex: 1; }
.ts-search-shell .ats-result-image {
  width: var(--ats-image-size, 64px);
  height: var(--ats-image-size, 64px);
  flex: 0 0 var(--ats-image-size, 64px);
  object-fit: var(--ats-image-fit, contain);
  border-radius: var(--ats-image-radius, 6px);
}
.ats-result-subtitle, .ats-result-sku { color: var(--ats-results-text, #475467); font-size: 0.8em; overflow-wrap: anywhere; }
.ats-result-metadata { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 6px; }
.ats-result-price { color: var(--ats-results-title, #101828); font-weight: 600; }
.ats-result--product .tsmb-suggestion_content { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }