/* ===========================================================================
   public/css/search.css                                          [agent-08]

   Owns: the /search page (.srch*), the autocomplete panel (.sg*), the search
   scrim and the facet controls (.facet*). Nothing else. components.css already
   styles .searchbox, .card, .grid, .pager, .pill, .empty and .btn, so this file
   only adds what those do not cover.

   Tokens only, no hardcoded colour or font. Mobile first. Checked at 375 and
   1440. Nothing here may cause horizontal body scroll.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. AUTOCOMPLETE PANEL
   Lives inside .searchbox__results, which components.css already positions.
   --------------------------------------------------------------------------- */

/* The scrim sits BELOW the header, not above it.
   --------------------------------------------------------------------------
   The site header is `position: sticky; z-index: var(--z-header)`, which makes
   it a stacking context. The autocomplete panel lives inside that header, so
   its own z-index (--z-drawer, 200) is scoped to the header and can never
   paint above 100 however large a number it names. A body level scrim at 198
   therefore covered the panel: it looked greyed out, and worse,
   elementFromPoint at the centre of the panel returned the scrim, so a mouse
   click on a suggestion hit the scrim's close handler instead of the link.
   Autocomplete was unusable with a mouse on every page.
   The fix is the ordinary pattern: dim the PAGE and leave the header, which is
   where the search box and its panel live, above the dim. */
.search-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header, 100) - 10);
  background: rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur, 240ms) var(--ease, ease), visibility var(--dur, 240ms) var(--ease, ease);
}
.search-scrim.is-on { opacity: 1; visibility: visible; }

/* Inside the header, the open box and its panel still outrank their siblings
   (the nav, the cart button) so nothing overlaps the suggestions. */
.searchbox.is-open { z-index: calc(var(--z-drawer, 60) - 1); }

/* components.css pins the panel to the input width (inset-inline: 0). The
   header input is deliberately narrow, so product rows would collapse to
   "Kevi M...". From the tablet breakpoint up, let the panel be wider than its
   input and hang off the end. Below that the input is already full width. */
@media (min-width: 770px) {
  .searchbox__results {
    inset-inline-start: auto;
    inset-inline-end: 0;
    width: min(440px, calc(100vw - (var(--gutter) * 2)));
  }
}

.sg__group + .sg__group { border-block-start: 1px solid var(--line-soft); margin-block-start: var(--sp-2); padding-block-start: var(--sp-2); }

.sg__head {
  margin: 0;
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
  color: var(--fg-muted);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold, 700);
  letter-spacing: var(--ls-caps, 0.05em);
  text-transform: uppercase;
}

.sg__list { margin: 0; padding: 0; list-style: none; }

.sg__opt {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm, 2px);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-tight, 1.25);
  text-decoration: none;
  cursor: pointer;
}
.sg__opt:hover,
.sg__opt.is-active,
.sg__opt[aria-selected='true'] { background: var(--bg-soft); }
.sg__opt:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

.sg__thumb {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm, 2px);
  background: var(--bg-soft);
  object-fit: cover;
}
.sg__thumb--none { display: block; }

.sg__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }

.sg__brand {
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps, 0.05em);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sg__title {
  color: var(--fg);
  font-size: var(--fs-md);
  /* two lines maximum, then ellipsis, so a long title never blows the panel */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sg__price { flex: 0 0 auto; text-align: end; font-size: var(--fs-sm); white-space: nowrap; }
.sg__price-now { color: var(--fg); }
.sg__price-now--sale { color: var(--sale); }
.sg__price-was { color: var(--fg-muted); margin-inline-start: var(--sp-1); }

.sg__count { flex: 0 0 auto; color: var(--fg-muted); font-size: var(--fs-sm); }
.sg__oos {
  display: block;
  margin-block-start: 2px;
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps, 0.05em);
  text-transform: uppercase;
  white-space: nowrap;
}

.sg__opt--all {
  justify-content: center;
  margin-block-start: var(--sp-2);
  border-block-start: 1px solid var(--line-soft);
  border-radius: 0;
  padding-block: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold, 700);
  text-align: center;
}

.sg__note,
.sg__empty,
.sg__loading {
  margin: 0;
  padding: var(--sp-3);
  color: var(--fg-muted);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-body, 1.5);
}
.sg__empty strong, .sg__note strong { color: var(--fg); }

.sg__loading { display: flex; align-items: center; gap: var(--sp-2); }
.sg__spinner {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 2px solid var(--line);
  border-block-start-color: var(--fg);
  border-radius: 50%;
  animation: sg-spin 640ms linear infinite;
}
@keyframes sg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .sg__spinner { animation-duration: 2s; }
  .search-scrim { transition: none; }
}

.sg__clear {
  display: block;
  width: 100%;
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  background: none;
  color: var(--fg-muted);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-align: start;
  text-decoration: underline;
  cursor: pointer;
}
.sg__clear:hover { color: var(--fg); }

/* ---------------------------------------------------------------------------
   2. SEARCH PAGE SHELL
   --------------------------------------------------------------------------- */

.srch { padding-block: var(--sp-6) var(--sp-11); }

.srch__head { margin-block: var(--sp-5) var(--sp-4); }

.srch__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold, 700);
  line-height: var(--lh-tight, 1.25);
  letter-spacing: var(--ls-tight, -0.01em);
  overflow-wrap: anywhere;
}
.srch__q { font-style: normal; }

.srch__sub,
.srch__count {
  margin: var(--sp-2) 0 0;
  color: var(--fg-muted);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
}

.srch__notice {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-inline-start: 2px solid var(--line-strong);
  background: var(--bg-soft);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-body, 1.5);
}
.srch__notice a { color: inherit; }

/* --- toolbar --- */

.srch__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-block: var(--sp-4);
  padding-block: var(--sp-3);
  border-block: 1px solid var(--line);
}

.srch__filters-open { display: inline-flex; align-items: center; gap: var(--sp-2); }
.srch__filters-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill, 999px);
  background: var(--accent);
  color: var(--accent-fg);
  font-size: var(--fs-xs);
  line-height: 1;
}

.srch__sort { display: flex; align-items: center; gap: var(--sp-2); margin: 0; }
.srch__sort-label {
  color: var(--fg-muted);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps, 0.05em);
  text-transform: uppercase;
}
.srch__sort-select {
  min-height: var(--btn-h-sm, 35px);
  max-width: 190px;
  padding-block: var(--sp-1);
  padding-inline: var(--sp-3) var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 2px);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
}
/* JS submits on change, so the Go button is only for a no-JS visitor */
.srch__sort.is-live .srch__sort-go { display: none; }

/* --- active filter chips --- */

.srch__active {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-end: var(--sp-4);
}
.srch__active-label {
  color: var(--fg-muted);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps, 0.05em);
  text-transform: uppercase;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 100%;
  padding: 6px var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill, 999px);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.chip:hover { background: var(--bg-soft); }
.chip__x { display: inline-flex; color: var(--fg-muted); }
.chip:hover .chip__x { color: var(--fg); }
.chip--clear { border-style: dashed; color: var(--fg-muted); }

/* --- layout --- */

.srch__layout { display: block; }
.srch__results { min-width: 0; }

/* ---------------------------------------------------------------------------
   3. FILTERS
   Mobile: an off-canvas panel. Desktop: a static sidebar column.
   --------------------------------------------------------------------------- */

.srch__side {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: var(--z-drawer, 60);
  width: min(88vw, 340px);
  background: var(--bg);
  box-shadow: var(--shadow-md);
  transform: translateX(-102%);
  visibility: hidden;
  transition: transform var(--dur, 240ms) var(--ease, ease), visibility var(--dur, 240ms) var(--ease, ease);
}
.srch__side.is-open { transform: translateX(0); visibility: visible; }
@media (prefers-reduced-motion: reduce) { .srch__side { transition: none; } }

.srch__filters { display: flex; flex-direction: column; height: 100%; margin: 0; }

.srch__filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-block-end: 1px solid var(--line);
}
.srch__filters-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold, 700);
}
.srch__filters-close {
  display: inline-flex;
  padding: var(--sp-2);
  border: 0;
  background: none;
  color: var(--fg);
  cursor: pointer;
}

.srch__filters-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-inline: var(--sp-5);
}

.srch__filters-foot {
  flex: 0 0 auto;
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-block-start: 1px solid var(--line);
  background: var(--bg);
}
.srch__clear {
  color: var(--fg-muted);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  text-align: center;
}

/* --- one facet group --- */

.facet { border-block-end: 1px solid var(--line-soft); }
.facet:last-child { border-block-end: 0; }

.facet__summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-block: var(--sp-4);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold, 700);
  list-style: none;
  cursor: pointer;
}
.facet__summary::-webkit-details-marker { display: none; }
.facet__summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.facet__chev { margin-inline-start: auto; transition: transform var(--dur-fast, 140ms) var(--ease, ease); }
.facet[open] .facet__chev { transform: rotate(180deg); }
.facet__on {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill, 999px);
  background: var(--accent);
  color: var(--accent-fg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular, 400);
  line-height: 1;
}

.facet__body { padding-block-end: var(--sp-3); }

.facet__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: 7px;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-tight, 1.25);
  cursor: pointer;
}
.facet__row:has(input:disabled) { color: var(--fg-subtle); cursor: default; }
.facet__box {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}
.facet__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.facet__count { flex: 0 0 auto; color: var(--fg-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

.facet__toggle {
  margin-block-start: var(--sp-2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  text-decoration: underline;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   4. ZERO RESULTS AND BROWSE RAILS
   --------------------------------------------------------------------------- */

.srch__zero { max-width: var(--container-prose, 1200px); margin-block: var(--sp-6); }
.srch__zero-lead {
  margin: 0 0 var(--sp-5);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-prose);
  line-height: var(--lh-body, 1.5);
  overflow-wrap: anywhere;
}
.srch__zero-help {
  margin-block-start: var(--sp-8);
  color: var(--fg-muted);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
}

.srch__box {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  position: relative;
  max-width: 640px;
  margin-block-end: var(--sp-8);
}
.srch__box-icon {
  position: absolute;
  inset-inline-start: var(--sp-4);
  display: inline-flex;
  color: var(--fg-muted);
  pointer-events: none;
}
/* base.css styles bare inputs through
   `input:not([type=checkbox]):not([type=radio])...` which is specificity
   (0,7,1). No component class can outrank that, and it sets
   `padding: 0 var(--input-px)`, which would drop the placeholder straight
   under the magnifier. The id selector is the smallest thing that wins.
   Both places this box is rendered use this same id and only one is ever on
   a page. See _handoff/agent-08.md, agent-02 may want to lower that reset. */
#search-page-input.srch__box-input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  min-height: var(--btn-h, 45px);
  padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-10);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill, 999px);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-prose);
  appearance: none;
}
.srch__box-input::-webkit-search-cancel-button { appearance: none; }
.srch__box-go { flex: 0 0 auto; }

.srch__rail { margin-block-end: var(--sp-7); }
.srch__rail-title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold, 700);
  letter-spacing: var(--ls-caps, 0.05em);
  text-transform: uppercase;
}
.srch__rail-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pill__count { color: var(--fg-muted); font-size: var(--fs-xs); margin-inline-start: var(--sp-1); }

.srch__recent { margin-block-end: var(--sp-7); }
.srch__recent[hidden] { display: none; }
.srch__recent-clear {
  margin-block-start: var(--sp-3);
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg-muted);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-decoration: underline;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   5. DESKTOP
   --------------------------------------------------------------------------- */

@media (min-width: 770px) {
  .srch__head { margin-block: var(--sp-7) var(--sp-5); }
  .srch__title { font-size: var(--fs-3xl); }

  /* the filter button is the mobile affordance; the sidebar replaces it here */
  .srch__filters-open { display: none; }
  .srch__sort { margin-inline-start: auto; }

  .srch__layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: start;
  }

  .srch__side {
    position: sticky;
    inset-block-start: var(--sp-6);
    inset-inline-start: auto;
    z-index: 1;
    width: auto;
    max-height: calc(100vh - var(--sp-10));
    background: none;
    box-shadow: none;
    transform: none;
    visibility: visible;
    transition: none;
  }
  .srch__filters-head,
  .srch__filters-foot { padding-inline: 0; }
  .srch__filters-close { display: none; }
  .srch__filters-body { padding-inline: 0; }
  /* JS applies on change, so Apply is only needed without JS */
  .srch__filters.is-live .srch__filters-foot .btn { display: none; }
  .srch__filters.is-live .srch__filters-foot { border-block-start: 0; padding-block-start: var(--sp-3); }
}

@media (min-width: 1024px) {
  .srch__layout { grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-9); }
}

/* the off-canvas panel must not leave a scrollable body behind it */
.is-filtering { overflow: hidden; }
@media (min-width: 770px) { .is-filtering { overflow: auto; } }