:root {
  --flexcase-content-width: 60vw;
  --flexcase-focus: #b08d57;
  --flexcase-focus-ring: rgba(176, 141, 87, 0.18);
  --flexcase-site-header-offset: 98px;
}

input,
select,
textarea {
  caret-color: var(--flexcase-focus);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--flexcase-focus);
  box-shadow: 0 0 0 3px var(--flexcase-focus-ring);
}

@media (max-width: 980px) {
  :root {
    --flexcase-content-width: 88vw;
  }

  body {
    padding-left: 0;
    padding-right: 0;
    max-width: 100vw;
  }

  /* iOS Safari zooms focused inputs below 16px */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
  select,
  textarea {
    font-size: 16px;
  }

  .catalog-toolbar .catalog-chip {
    font-size: 0.9rem;
  }
}

main {
  width: var(--flexcase-content-width);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  overflow: visible;
}

/* Touch: no sticky :hover flash; form focus ring only for keyboard (:focus-visible) */
@media (hover: none), (pointer: coarse) {
  button,
  input,
  select,
  textarea,
  a,
  summary,
  [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }

  input:focus:not(:focus-visible),
  select:focus:not(:focus-visible),
  textarea:focus:not(:focus-visible),
  button:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
  }
}