/*!
 * Search+ 3.0 — suggestions / trending / recent block (CONTRACTS-WAVE3 §2).
 * Loaded after search-plus.css and scoped to .sp-root, so every colour comes
 * from the overlay's tokens (light + dark + .sp-dark hook come for free) and a
 * theme overrides us by setting those tokens. Depth is at most two classes.
 * Budget: this file <= 4352 bytes. No !important, no webfont, no image.
 * Degrades gracefully: without it the rows still render as ordinary overlay
 * rows — taller and glyph-less, but perfectly usable.
 */

/* Inside the overlay the block sits at the top of .sp-list, above the product
   rows; the rule under it is the only visual separation needed. */
.sp-root .sp-sug {
  display: block;
  border-bottom: 1px solid var(--sp-border);
}

.sp-root .sp-sug:last-child {
  border-bottom: 0;
}

/* The standalone dropdown used on desktop when the field is empty (the overlay
   panel does not open in that state). Width/left/top are set inline by the JS
   from the field's bounding box. */
.sp-root.sp-sug-fly {
  width: 320px;
  max-height: 60vh;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sp-root.sp-sug-fly .sp-sug {
  border-bottom: 0;
}

/* --------------------------------------------------------------- heading */

.sp-root .sp-sug-h {
  display: block;
  padding: 10px 14px 4px;
  color: var(--sp-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ rows */

/* Shorter than a product row (no thumbnail), but still a 44 px target: WCAG
   2.5.8 asks for 24, and these are tapped on phones. */
.sp-root .sp-sug-r {
  gap: 10px;
  min-height: 44px;
  padding: 10px 14px;
  border-bottom: 0;
}

.sp-root .sp-sug-r .sp-title {
  font-size: 14px;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

/* "Clear recent searches" — an option like any other, so it is reachable with
   the same arrow keys instead of being a focus trap inside a listbox. */
.sp-root .sp-sug-x {
  min-height: 40px;
}

.sp-root .sp-sug-x .sp-title {
  color: var(--sp-muted);
  font-size: 13px;
}

/* ----------------------------------------------------------------- glyphs */

/* Drawn with borders: no icon font, no SVG request, no emoji (whose rendering
   differs wildly between phones). Decorative only — aria-hidden in the DOM. */
.sp-root .sp-sug-i {
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: var(--sp-muted);
}

.sp-root .sp-sug-i::before,
.sp-root .sp-sug-i::after {
  content: "";
  position: absolute;
  border: 0 solid currentColor;
}

/* Suggestion: magnifier (circle + handle). */
.sp-i-q::before {
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-width: 1.5px;
  border-radius: 50%;
}

.sp-i-q::after {
  top: 12px;
  left: 11px;
  width: 5px;
  border-top-width: 1.5px;
  transform: rotate(45deg);
  transform-origin: left center;
}

/* Recent: clock (circle + hand). */
.sp-i-r::before {
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-width: 1.5px;
  border-radius: 50%;
}

.sp-i-r::after {
  top: 5px;
  left: 8px;
  width: 4px;
  height: 4px;
  border-bottom-width: 1.5px;
  border-left-width: 1.5px;
}

/* Trending: arrow head pointing up, on a stem. */
.sp-i-t::before {
  top: 3px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-top-width: 1.5px;
  border-right-width: 1.5px;
  transform: rotate(-45deg);
}

.sp-i-t::after {
  top: 4px;
  left: 8px;
  height: 11px;
  border-left-width: 1.5px;
}

/* Clear: ×. */
.sp-i-x::before,
.sp-i-x::after {
  top: 8px;
  left: 4px;
  width: 10px;
  border-top-width: 1.5px;
}

.sp-i-x::before {
  transform: rotate(45deg);
}

.sp-i-x::after {
  transform: rotate(-45deg);
}

/* ------------------------------------------------------------ mobile sheet */

.sp-sheet .sp-sug-r {
  min-height: 48px;
}

.sp-sheet .sp-sug-h {
  padding: 12px 14px 4px;
}

/* Very narrow viewports: the dropdown never exceeds the screen. */
@media (max-width: 480px) {
  .sp-root.sp-sug-fly {
    max-width: calc(100vw - 8px);
  }
}