.thss-search {
  --thss-radius: var(--radius-l, 999px);
  --thss-action: var(--action, var(--primary, #1f6f5b));
  --thss-bg: var(--base, #fff);
  --thss-text: var(--base-ultra-dark, #111827);
  --thss-muted: var(--shade-medium, #6b7280);
  --thss-border: var(--shade-light, #e5e7eb);
  --thss-shadow: 0 18px 45px rgba(0, 0, 0, .12);
  position: relative;
  width: 100%;
  max-width: 720px;
}

.thss-search__form { position: relative; margin: 0; }

.thss-search__bar {
  display: flex;
  align-items: center;
  gap: var(--space-xs, .5rem);
  background: var(--thss-bg);
  border: 1px solid var(--thss-border);
  border-radius: var(--thss-radius);
  padding: .45rem .45rem .45rem 1.25rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.thss-search__input {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--thss-text);
  font-size: var(--text-m, 1rem);
  line-height: 1.2;
  padding: .8rem 0;
}

.thss-search__input::placeholder { color: var(--thss-muted); opacity: 1; }

.thss-search__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 999px;
  background: var(--thss-action);
  color: #fff;
  cursor: pointer;
  transition: transform .16s ease, opacity .16s ease;
  flex: 0 0 auto;
}

.thss-search__button:hover,
.thss-search__button:focus-visible { transform: scale(1.03); opacity: .94; }

.thss-search__button-fallback {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.thss-search__dropdown {
  position: absolute;
  top: calc(100% + .55rem);
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--thss-bg);
  border: 1px solid var(--thss-border);
  border-radius: var(--radius-m, 1rem);
  box-shadow: var(--thss-shadow);
  overflow: hidden;
  padding: .45rem;
}

.thss-search__suggestion {
  display: block;
  color: var(--thss-text);
  text-decoration: none;
  font-size: var(--text-s, .95rem);
  line-height: 1.25;
  padding: .85rem 1rem;
  border-radius: var(--radius-s, .65rem);
}

.thss-search__suggestion:hover,
.thss-search__suggestion:focus,
.thss-search__suggestion.is-active {
  background: var(--shade-ultra-light, #f3f4f6);
  color: var(--thss-text);
}

@media (max-width: 480px) {
  .thss-search__bar { padding-left: 1rem; }
  .thss-search__button { width: 2.75rem; height: 2.75rem; }
  .thss-search__input { font-size: 1rem; }
}