/*
 * Site search: the header trigger and the panel it opens.
 *
 * Self-contained on purpose, down to the colours.
 *
 * The shop pages load catalog.css and nothing else; the landing page loads
 * styles-*.css and not catalog.css. There is no stylesheet common to both, and
 * the two do not even agree on their own tokens -- --ink is #111015 on the shop
 * and #0c0b0e on the landing. Search is the first control that has to look the
 * same on both, so it brings its own values rather than reading tokens that are
 * missing on half the pages it appears on. .cart-icon is duplicated between the
 * two stylesheets for exactly this reason; a third file is the better answer
 * once a thing is genuinely shared.
 */

:root {
  --search-ink: #0e0d11;
  --search-paper: #f1eee7;
  --search-line: rgba(255, 255, 255, .46);
  --search-brand: #877ebc;
}

/* --- the header trigger --------------------------------------------------- */

/*
 * Shaped after the cart and wishlist chips it sits beside. It cannot inherit
 * from either -- .shop-cart and .header-cart are different rules in different
 * stylesheets -- so the shared measurements are restated here and the two
 * shells' own paddings are left to differ where they already do.
 */
.site-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  color: inherit;
  background: none;
  border: 1px solid var(--search-line);
  border-radius: 999px;
  font: inherit;
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
}
.site-search-trigger:hover { border-color: currentColor; }

.site-search-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/*
 * Below 560px the word goes and the icon holds a 44px target on its own, the
 * same swap the cart and wishlist chips make at the same width. Without the
 * minimums the button collapses to the icon's 18px box and stops being
 * tappable.
 */
@media (max-width: 560px) {
  .site-search-trigger { min-width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .site-search-trigger-word { display: none; }
}

/* --- the panel ------------------------------------------------------------ */

.site-search-root {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  align-items: start;
  justify-items: center;
}
.site-search-root[hidden] { display: none; }

.site-search-overlay {
  position: absolute;
  inset: 0;
  background: rgba(9, 8, 11, .72);
  opacity: 0;
  transition: opacity .2s ease;
}
.site-search-root.is-open .site-search-overlay { opacity: 1; }

.site-search-panel {
  position: relative;
  width: min(560px, calc(100vw - 24px));
  margin-top: min(12vh, 90px);
  padding: 14px;
  color: var(--search-paper);
  background: var(--search-ink);
  border: 2px solid var(--search-paper);
  box-shadow: 8px 10px 0 rgba(0, 0, 0, .5);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .2s ease, transform .2s ease;
}
.site-search-root.is-open .site-search-panel {
  opacity: 1;
  transform: none;
}

/*
 * The panel slides and fades. Both are decoration on a control somebody opened
 * deliberately, so under reduced-motion it simply appears -- but it still has
 * to *appear*, which is why opacity is forced to 1 rather than the transition
 * merely being switched off.
 */
@media (prefers-reduced-motion: reduce) {
  .site-search-overlay,
  .site-search-panel {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

.site-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 2px solid var(--search-paper);
}
.site-search-field .site-search-icon { flex: none; }

.site-search-input {
  flex: 1;
  min-width: 0;
  /*
   * 16px is the floor, not a preference: iOS Safari zooms the whole page in on
   * a focused field with text smaller than this and does not zoom back out.
   * checkout-input-zoom.test.mjs guards the same rule on the checkout inputs.
   */
  min-height: 48px;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
}
.site-search-input:focus { outline: none; }
.site-search-field:focus-within { outline: 3px solid var(--search-brand); outline-offset: 2px; }
.site-search-input::placeholder { color: rgba(241, 238, 231, .55); }

.site-search-close {
  flex: none;
  min-height: 32px;
  padding: 0 10px;
  color: inherit;
  background: none;
  border: 1px solid var(--search-line);
  font: inherit;
  font-size: .62rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  cursor: pointer;
}
.site-search-close:hover { border-color: currentColor; }

.site-search-hint[hidden] { display: none; }
.site-search-hint,
.site-search-status {
  margin: 10px 2px 0;
  font-size: .72rem;
  font-weight: 700;
  color: rgba(241, 238, 231, .68);
}
.site-search-status:empty { display: none; }

.site-search-results {
  max-height: min(52vh, 420px);
  margin-top: 10px;
  overflow-y: auto;
}
.site-search-results[hidden] { display: none; }

.site-search-row {
  display: flex;
  align-items: center;
  gap: 12px;
  /* A row is a tap target before it is a list item. */
  min-height: 56px;
  padding: 8px 10px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(241, 238, 231, .16);
}
.site-search-row:last-child { border-bottom: 0; }

/*
 * `.is-active` is the arrow-key selection, which moves without focus moving --
 * focus stays in the input so somebody can keep typing while they look. That
 * means the row cannot rely on :focus-visible for its ring and has to draw its
 * own, and :hover has to look the same or the two selections disagree on
 * screen when a mouse and the keyboard are both in play.
 */
.site-search-row.is-active,
.site-search-row:hover,
.site-search-row:focus-visible {
  background: var(--search-brand);
  color: #0e0d11;
  outline: none;
}

.site-search-row-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.site-search-row-main strong {
  font-size: .92rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.site-search-row-main small {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .72;
}
/*
 * The dimming comes off on the selected row. .72 of near-black over the brand
 * purple measures 3.65:1, which fails AA for text this size -- against the
 * panel's own dark ground the same .72 measures 8.85, so the rule looked fine
 * everywhere except the one row somebody is actually looking at. Measured in
 * the browser, not estimated.
 */
.site-search-row.is-active .site-search-row-main small,
.site-search-row:hover .site-search-row-main small {
  opacity: 1;
}

.site-search-row-price {
  flex: none;
  font-size: .88rem;
  font-weight: 900;
}

.site-search-row-tag {
  flex: none;
  padding: 4px 8px;
  border: 1px solid currentColor;
  font-size: .58rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/*
 * An out-of-stock listing stays in the results and stays legible -- it is not
 * greyed out. Somebody searching a name off a jar is asking "is this yours",
 * and dimming the answer to the point of being hard to read turns a useful
 * "yes, not today" back into something that looks like a dead end.
 */
.site-search-row.is-out .site-search-row-main strong { text-decoration: line-through; }

/* The page behind must not scroll under an open panel. */
body.site-search-locked { overflow: hidden; }