/* ============================================================
   GRAINATION — Shop search field contrast + clear control
   WEB-SHOP-SEARCH-001

   WHY THIS FILE EXISTS. gn-shop.css:24 sets only `color:var(--gn-ink)` on the
   Shop search field. That is not enough to guarantee legible text:

     * `color-scheme` is declared NOWHERE in any gn2 stylesheet or on any rendered
       page, so a user agent in dark mode applies its own dark form-control
       heuristics to <input type="search">;
     * `-webkit-text-fill-color` is never set, and where the UA or autofill sets it,
       it WINS over `color` — this is the documented path to white-on-white text;
     * `caret-color` is never set, so the caret can be painted invisibly;
     * `::placeholder` has no rule at all, so the placeholder falls back to a UA
       colour that is not guaranteed to meet contrast on white.

   Every rule below is scoped under `.sh-search`. There is deliberately no global
   `input`, `input[type=search]` or `:root` rule: a broad rule would repaint form
   fields on dark surfaces elsewhere on the site (the dark hero variants, the
   account and booking chrome), which is exactly the regression this must not cause.

   Commerce background stays pure white (--gn-paper -> #FFFFFF), per the canonical
   decision. The values below are the resolved token values, written literally so
   the field stays legible even on a page where gn2-base.css has not loaded or has
   been served stale from a long-lived browser cache — the failure mode that made
   this bug intermittent in the first place.
   ============================================================ */

.sh-search {
  background: #fff;
  color-scheme: light;              /* stop dark-mode UA heuristics repainting the field */
}

.sh-search input {
  color: #131313;
  -webkit-text-fill-color: #131313; /* wins over `color` in WebKit/Blink; must be set explicitly */
  caret-color: #131313;
  background-color: transparent;    /* the .sh-search wrapper owns the white ground */
  color-scheme: light;
  opacity: 1;
}

.sh-search input::placeholder {
  color: #757575;                   /* 4.6:1 on #fff — visible, clearly secondary */
  -webkit-text-fill-color: #757575;
  opacity: 1;                       /* Firefox applies a default opacity to placeholders */
}
.sh-search input::-webkit-input-placeholder { color: #757575; -webkit-text-fill-color: #757575; opacity: 1; }
.sh-search input::-moz-placeholder { color: #757575; opacity: 1; }

/* Autofill repaints both the background and the fill colour; only these two
   properties can override it, and the inset shadow is the only way to restore white. */
.sh-search input:-webkit-autofill,
.sh-search input:-webkit-autofill:hover,
.sh-search input:-webkit-autofill:focus {
  -webkit-text-fill-color: #131313;
  caret-color: #131313;
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  box-shadow: 0 0 0 1000px #fff inset;
}

/* Selection stays legible against the field. */
.sh-search input::selection { background: #131313; color: #fff; -webkit-text-fill-color: #fff; }

/* WebKit's native decorations sit awkwardly beside our own clear control. */
.sh-search input::-webkit-search-decoration,
.sh-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* ---------- clear control (added by gn2-shop-search.js) ---------- */
.sh-search .gn-search-clear {
  flex: none;
  border: 0;
  background: none;
  cursor: pointer;
  width: 28px;
  height: 28px;
  margin-right: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gn-sans, system-ui, sans-serif);
  font-size: 18px;
  line-height: 1;
  color: #6b6759;
  -webkit-text-fill-color: #6b6759;
  padding: 0;
}
.sh-search .gn-search-clear:hover { color: #131313; -webkit-text-fill-color: #131313; }
.sh-search .gn-search-clear:focus-visible { outline: 2px solid var(--gn-cobalt, #2b4cd8); outline-offset: 2px; }
.sh-search .gn-search-clear[hidden] { display: none; }

/* ---------- live region ---------- */
/* Announcements must reach assistive technology without occupying layout, and without
   `display:none` / `visibility:hidden`, which remove the node from the accessibility
   tree and would silence every result count. */
.gn-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* A card hidden by the in-page filter must not leave a grid gap behind. */
.sh-prods .gn-pc[hidden] { display: none; }