/* Shared storefront field focus. Keep in sync with the header search. */
:root {
  --field-focus-color: #687991;
  --field-focus-shadow: 0 0 0 1px var(--field-focus-color);
}

/* Important overrides section styles that may be loaded after the layout. */
input:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='range']):not([type='submit']):not([type='reset']):not([type='button']):not([type='image']):not([type='color']):is(:focus, :focus-visible),
textarea:is(:focus, :focus-visible),
select:is(:focus, :focus-visible) {
  border-color: var(--field-focus-color) !important;
  box-shadow: var(--field-focus-shadow) !important;
  outline: none !important;
}

/* Composite controls draw one border on their wrapper, not around each input. */
.m-vault-search:focus-within,
.m-quantity:has(input:focus) {
  border-color: var(--field-focus-color) !important;
  box-shadow: var(--field-focus-shadow) !important;
  outline: none !important;
}
.m-vault-search input:is(:focus, :focus-visible),
.m-quantity input:is(:focus, :focus-visible) {
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

@layer storefront-focus {
  input:is([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file']):focus-visible {
    outline: 2px solid var(--field-focus-color) !important;
    outline-offset: 3px !important;
  }
}