@layer components {
  .zentrila-search-form { position: relative; width: 100%; }
  .zentrila-search-form input[type="search"] { width: 100%; height: 50px; border: 2px solid transparent; border-radius: 999px; background: #fff; color: var(--z-color-ink); padding: 0 4rem 0 1.25rem; outline: none; }
  .zentrila-search-form input[type="search"]:focus { border-color: var(--z-color-accent); box-shadow: 0 0 0 4px rgb(255 191 47 / .22); }
  .zentrila-search-form button { position: absolute; inset: 5px 5px 5px auto; width: 40px; min-height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--z-color-accent); color: var(--z-color-navy); padding: 0; }
  .zentrila-search-form svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
}