/* Adapted from Maximinodotpy/thin-sheep-13 and Lakshay-art/curvy-earwig-22.
   Uiverse.io, MIT. Original sources and notices: third_party/uiverse/. */
.sj-field,
.sj-search {
  min-inline-size: 0;
  font-family: var(--sj-font-body);
  font-size: 16px;
  color: var(--sj-text);
}

.sj-field__shell { position: relative; }
.sj-control {
  appearance: none;
  box-sizing: border-box;
  display: block;
  inline-size: 100%;
  min-block-size: var(--sj-input-height);
  border: 2px solid var(--sj-border);
  border-radius: var(--sj-input-radius);
  padding: 16px 18px;
  background: var(--sj-surface);
  color: var(--sj-text);
  font: inherit;
  line-height: 1.5;
  caret-color: var(--sj-primary);
  transition: border-color var(--sj-input-motion);
}
.sj-control:hover:not(:disabled):not(:focus) { border-color: var(--sj-pink); }
.sj-control:is(:focus, :focus-visible) {
  border-color: var(--sj-primary);
  outline: 0;
  box-shadow: none;
}
.sj-field__label {
  position: absolute;
  inset-inline-start: 14px;
  inset-block-start: 50%;
  max-inline-size: calc(100% - 36px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-inline: 6px;
  transform: translateY(-50%);
  background: var(--sj-surface);
  color: var(--sj-muted);
  cursor: text;
  font-size: 1rem;
  line-height: 1.5;
  transition: inset-block-start var(--sj-input-motion), font-size var(--sj-input-motion), color var(--sj-input-motion);
}
.sj-field__required { color: var(--sj-primary); }
textarea.sj-control { min-block-size: 132px; resize: vertical; }
.sj-field__shell:has(textarea) .sj-field__label { inset-block-start: 28px; }
/* :valid floats empty optional fields; placeholder-shown reflects actual content. */
.sj-control:is(:focus, :not(:placeholder-shown), :autofill) ~ .sj-field__label {
  inset-block-start: 0;
  color: var(--sj-primary);
  font-size: .8125rem;
}
.sj-control:autofill {
  box-shadow: 0 0 0 1000px var(--sj-surface) inset;
  -webkit-text-fill-color: var(--sj-text);
}
.sj-control:disabled { cursor: not-allowed; background: var(--sj-disabled); color: var(--sj-muted); }
.sj-control:disabled ~ .sj-field__label { cursor: not-allowed; background: var(--sj-disabled); }
.sj-control[readonly] { background: var(--sj-disabled); }
.sj-control[readonly] ~ .sj-field__label { background: var(--sj-disabled); }
.sj-field--error .sj-control,
.sj-field--error .sj-control:hover,
.sj-field--error .sj-control:focus,
.sj-control[aria-invalid="true"],
.sj-control[aria-invalid="true"]:hover,
.sj-control[aria-invalid="true"]:focus { border-color: var(--sj-error); }
.sj-field--error .sj-control ~ .sj-field__label,
.sj-control[aria-invalid="true"] ~ .sj-field__label { color: var(--sj-error); }
.sj-field__help,
.sj-field__errors { margin: 10px 4px 0; font-size: .8125rem; line-height: 1.8; }
.sj-field__help { color: var(--sj-muted); }
.sj-field__errors { list-style: none; padding: 0; color: var(--sj-error); }
.sj-field__errors[hidden], .sj-form-errors[hidden] { display: none; }
.sj-form-errors { color: var(--sj-error); margin-block: 12px; overflow-wrap: anywhere; }
.sj-form-errors .errorlist { padding-inline-start: 20px; }
/* Recolor the existing border; don't add a second focus/error frame. */
select[aria-invalid="true"], .quantity-input[aria-invalid="true"] { border-color: var(--sj-error); }
:root form[data-sj-form] :is(select, .quantity-input)[aria-invalid="true"]:is(:focus, :focus-visible) {
  outline: 0; box-shadow: none;
}
.sj-search:has([aria-invalid="true"]) .sj-search__ring { background-color: var(--sj-error); }
.sj-field__errors { overflow-wrap: anywhere; }

/* Preserve the reference's layered light and rotating conic border, without
   the fixed width, text-obscuring mask or a nonfunctional filter control. */
.sj-search { position: relative; isolation: isolate; inline-size: 100%; padding: 3px; box-sizing: border-box; }
.sj-search__ring,
.sj-search__glow { position: absolute; pointer-events: none; border-radius: var(--sj-input-radius); }
.sj-search__ring { inset: 0; overflow: hidden; background: var(--sj-border); z-index: -1; }
.sj-search__glow { inset: -3px; overflow: hidden; filter: blur(13px); opacity: .2; z-index: -2; }
.sj-search__ring::before,
.sj-search__glow::before {
  content: "";
  position: absolute;
  inline-size: 200%;
  aspect-ratio: 1;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  background: conic-gradient(transparent 0deg, var(--sj-lilac) 30deg, transparent 75deg, transparent 170deg, var(--sj-pink) 215deg, transparent 260deg);
  transform: translate(50%, -50%) rotate(80deg);
  transition: transform 1100ms ease;
}
:dir(ltr) .sj-search__ring::before,
:dir(ltr) .sj-search__glow::before { transform: translate(-50%, -50%) rotate(80deg); }
.sj-search:is(:hover, :focus-within) .sj-search__ring::before,
.sj-search:is(:hover, :focus-within) .sj-search__glow::before { transform: translate(50%, -50%) rotate(250deg); }
:dir(ltr) .sj-search:is(:hover, :focus-within) .sj-search__ring::before,
:dir(ltr) .sj-search:is(:hover, :focus-within) .sj-search__glow::before { transform: translate(-50%, -50%) rotate(250deg); }
.sj-search__main { position: relative; border-radius: calc(var(--sj-input-radius) - 2px); background: var(--sj-surface); }
.sj-search__input {
  appearance: none;
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  block-size: var(--sj-input-height);
  padding-inline: 50px 62px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--sj-text);
  font: inherit;
  caret-color: var(--sj-primary);
}
.sj-search__input::placeholder { color: var(--sj-muted); opacity: 1; }
/* Keep one existing frame; outrank the page-wide :focus-visible rule too. */
.sj-search .sj-search__input:is(:focus, :focus-visible) { outline: 0; box-shadow: none; border: 0; }
.sj-search:focus-within { outline: 0; box-shadow: none; }
.sj-search:focus-within .sj-search__ring { background-color: var(--sj-primary); }
.sj-search__icon { position: absolute; inset-inline-start: 18px; inset-block-start: 18px; color: var(--sj-primary); pointer-events: none; }
.sj-search__submit {
  position: absolute;
  inset-inline-end: 7px;
  inset-block-start: 7px;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid color-mix(in srgb, var(--sj-primary) 22%, transparent);
  border-radius: 14px;
  background: var(--sj-soft);
  color: var(--sj-primary);
  cursor: pointer;
  transition: background-color var(--sj-input-motion);
}
.sj-search__submit:hover { background: color-mix(in srgb, var(--sj-soft) 78%, var(--sj-pink)); }
.sj-search .sj-search__submit:focus-visible { outline: none; background: var(--sj-primary); color: var(--sj-surface); border-color: var(--sj-primary); }
.sj-sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  .sj-control, .sj-field__label, .sj-search__submit,
  .sj-search__ring::before, .sj-search__glow::before { transition: none; animation: none; }
}
@media (forced-colors: active) {
  .sj-control { border: 2px solid CanvasText; }
  .sj-search { border: 2px solid CanvasText; }
  .sj-search__ring, .sj-search__glow { display: none; }
}