/**
 * jensik — Search UI
 * =====================
 * The results panel shared by the desktop dropdown and the mobile full-screen
 * overlay, the result row, the facet groups and the active-filter chips.
 *
 * One markup shape, two presentations. The panel is a dropdown card under the
 * header field from 1024px, and the whole screen below it — see .nk-search-root
 * and .nk-search-overlay in components/layout.css for the two containers.
 *
 * Loaded after layout.css: the search surfaces sit inside the header and the
 * overlay, so they must be able to override them.
 */

/* =======================================================================
 * PANEL — .nk-search-panel
 * ===================================================================== */

.nk-search-root { position: relative; }

.nk-search-panel {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-3);
}
.nk-search-panel[hidden] { display: none; }

/* Desktop: a dropdown card hanging off the field. */
@media (min-width: 1024px) {
  .nk-search-panel {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(100% + var(--nk-space-2));
    z-index: var(--nk-z-dropdown);
    /* Never taller than the viewport under the header, so the page behind it
       stays reachable and the list scrolls inside itself. */
    max-block-size: min(70vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--nk-space-3);
    background-color: var(--nk-surface-raised);
    border: var(--nk-border-width) solid var(--nk-border-subtle);
    border-radius: var(--nk-radius-lg);
    box-shadow: var(--nk-shadow-lg);
  }
}

/* Mobile: the panel is simply the rest of the overlay screen. */
.nk-search-overlay .nk-search-panel {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Clears the bottom nav, which stays visible behind the overlay. */
  padding-block-end: var(--nk-bottom-nav-space);
}

.nk-search-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nk-space-3);
  padding-inline: var(--nk-space-2);
}
.nk-search-panel__label {
  display: inline-flex;
  align-items: center;
  gap: var(--nk-space-2);
  font-size: var(--nk-text-sm);
  font-weight: var(--nk-weight-semibold);
  color: var(--nk-text-muted);
}

.nk-search-panel__idle[hidden],
.nk-search-panel__facets[hidden],
.nk-search-panel__foot[hidden] { display: none; }

.nk-search-panel__body { display: grid; gap: var(--nk-space-1); }

.nk-search-panel__foot {
  padding-block-start: var(--nk-space-2);
  border-block-start: var(--nk-border-hairline);
}

/* =======================================================================
 * RESULT ROW — .nk-search-result
 * Thumbnail, title, category, price, stock. Deliberately not a product card:
 * a card is a browsing surface, a row is a scanning one.
 * ===================================================================== */

.nk-search-result {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--nk-space-3);
  align-items: center;
  padding: var(--nk-space-2);
  min-block-size: var(--nk-touch-target-lg);
  border-radius: var(--nk-radius-md);
  color: var(--nk-text-default);
  text-decoration: none;
  transition: background-color var(--nk-transition-base);
}
.nk-search-result[aria-selected="true"] { background-color: var(--nk-navy-50); }
@media (hover: hover) {
  .nk-search-result:hover { background-color: var(--nk-navy-50); }
}
.nk-search-result:active { background-color: var(--nk-navy-100); }

.nk-search-result__media {
  aspect-ratio: var(--nk-ratio-product);
  inline-size: 56px;
  border-radius: var(--nk-radius-sm);
  overflow: hidden;
  background-color: var(--nk-surface-sunken);
  display: grid;
  place-items: center;
  color: var(--nk-text-subtle);
}
.nk-search-result__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.nk-search-result__body { display: grid; gap: var(--nk-space-half); min-inline-size: 0; }

.nk-search-result__title {
  font-size: var(--nk-text-base);
  font-weight: var(--nk-weight-medium);
  color: var(--nk-text-strong);
  /* Two lines keeps every row the same height, so the list does not jitter as
     results stream in. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* The matched substring, marked server-side-safe by the renderer. */
.nk-search-result__title mark {
  background: none;
  color: var(--nk-text-accent);
  font-weight: var(--nk-weight-semibold);
}

.nk-search-result__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--nk-space-1) var(--nk-space-2);
  font-size: var(--nk-text-xs);
  color: var(--nk-text-muted);
}
.nk-search-result__meta > * { min-inline-size: 0; }

.nk-search-result__price {
  display: flex;
  align-items: baseline;
  gap: var(--nk-space-2);
  font-family: var(--nk-font-numeric);
  font-size: var(--nk-text-base);
  font-weight: var(--nk-weight-semibold);
  color: var(--nk-text-strong);
}
.nk-search-result__price--sale { color: var(--nk-text-accent); }
.nk-search-result__old {
  font-size: var(--nk-text-xs);
  font-weight: var(--nk-weight-regular);
  color: var(--nk-text-subtle);
  text-decoration: line-through;
}

/* =======================================================================
 * FACETS — .nk-facet
 * Inline in the desktop panel, inside the bottom sheet on mobile. Same
 * markup either way; only the container changes.
 * ===================================================================== */

.nk-facet + .nk-facet {
  margin-block-start: var(--nk-space-4);
  padding-block-start: var(--nk-space-4);
  border-block-start: var(--nk-border-hairline);
}
.nk-facet__title {
  font-size: var(--nk-text-sm);
  font-weight: var(--nk-weight-semibold);
  color: var(--nk-text-muted);
  margin-block-end: var(--nk-space-2);
}
.nk-facet__options { display: flex; flex-wrap: wrap; gap: var(--nk-space-2); }

/**
 * Desktop: the whole facet block collapses to ONE scrolling row.
 *
 * Stacked groups are right for the mobile sheet, which has a screen to spend.
 * In a 480px dropdown three stacked groups filled the panel and pushed the
 * products below the fold — which inverts the point of the panel. Here each
 * group is a label followed by its chips, all on one line that scrolls.
 */
@media (min-width: 1024px) {
  .nk-search-panel__facets {
    display: flex;
    gap: var(--nk-space-4);
    overflow-x: auto;
    scrollbar-width: none;
    padding-block-end: var(--nk-space-2);
    border-block-end: var(--nk-border-hairline);
  }
  .nk-search-panel__facets::-webkit-scrollbar { display: none; }

  .nk-search-panel__facets .nk-facet {
    display: flex;
    align-items: center;
    gap: var(--nk-space-2);
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .nk-search-panel__facets .nk-facet__title { margin: 0; white-space: nowrap; }
  .nk-search-panel__facets .nk-facet__options { flex-wrap: nowrap; }
}

/* =======================================================================
 * OVERLAY CHROME
 * ===================================================================== */

.nk-search-overlay__toolbar {
  display: flex;
  align-items: center;
  gap: var(--nk-space-2);
  /* The chips scroll; the filter button must not shrink away with them. */
  min-inline-size: 0;
}
.nk-search-overlay__toolbar[hidden] { display: none; }
.nk-search-overlay__toolbar > .nk-btn { flex: 0 0 auto; }
.nk-search-overlay__toolbar .nk-chip-row { flex: 1 1 auto; min-inline-size: 0; }

.nk-search-overlay__head .nk-search-root { flex: 1; }

/* =======================================================================
 * STATES
 * Skeletons match the result row box exactly, so nothing shifts when the
 * real rows arrive.
 * ===================================================================== */

.nk-search-skeleton {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--nk-space-3);
  align-items: center;
  padding: var(--nk-space-2);
}
.nk-search-skeleton__media {
  inline-size: 56px;
  aspect-ratio: var(--nk-ratio-product);
  border-radius: var(--nk-radius-sm);
}
.nk-search-skeleton__lines { display: grid; gap: var(--nk-space-2); }

.nk-search-count {
  font-size: var(--nk-text-sm);
  color: var(--nk-text-muted);
  padding-inline: var(--nk-space-2);
}

/* "See all N results" — the bridge from the panel to the full results page. */
.nk-search-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--nk-space-2);
  min-block-size: var(--nk-touch-target);
  border-radius: var(--nk-radius-md);
  font-size: var(--nk-text-base);
  font-weight: var(--nk-weight-semibold);
  color: var(--nk-text-accent);
  text-decoration: none;
}
@media (hover: hover) {
  .nk-search-more:hover { background-color: var(--nk-action-primary-subtle); }
}

/* =======================================================================
 * SEARCH RESULTS ON THE FULL-SCREEN OVERLAY
 *
 * The row above is a dropdown row: 56px thumb, dense, correct under a desktop
 * field where the list hangs over the page. On the mobile overlay the same
 * markup owns the entire screen, and there it read as a settings list — the
 * thumbnail was too small to judge a garment by, which is the one thing a
 * search result exists for.
 *
 * Same DOM, promoted to a card. Scoped to the overlay so the desktop dropdown
 * keeps its density.
 * ===================================================================== */

.nk-search-overlay .nk-search-panel__body { gap: var(--nk-space-3); }

.nk-search-overlay .nk-search-result {
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--nk-space-3);
  align-items: stretch;
  padding: var(--nk-space-2);
  border: var(--nk-border-width) solid var(--nk-border-subtle);
  border-radius: var(--nk-radius-lg);
  background-color: var(--nk-surface-raised);
  box-shadow: var(--nk-shadow-xs);
  transition: border-color var(--nk-transition-base), box-shadow var(--nk-transition-base),
    transform var(--nk-transition-base);
}
/* A press that moves is the only feedback a touch device gets — there is no
   hover state under a finger. */
.nk-search-overlay .nk-search-result:active { transform: scale(0.99); }
.nk-search-overlay .nk-search-result[aria-selected="true"] {
  background-color: var(--nk-surface-raised);
  border-color: var(--nk-border-accent);
  box-shadow: var(--nk-shadow-sm);
}
@media (hover: hover) {
  .nk-search-overlay .nk-search-result:hover {
    background-color: var(--nk-surface-raised);
    border-color: var(--nk-border-accent);
    box-shadow: var(--nk-shadow-sm);
  }
}

/* Big enough to judge a garment by. 92px at the 3:4 product ratio is 123px
   tall, which also sets the card height — so every row is identical and the
   list cannot jitter as results stream in. */
.nk-search-overlay .nk-search-result__media {
  inline-size: 92px;
  border-radius: var(--nk-radius-md);
}

.nk-search-overlay .nk-search-result__body {
  align-content: center;
  gap: var(--nk-space-1);
  padding-block: var(--nk-space-1);
  padding-inline-end: var(--nk-space-1);
}
.nk-search-overlay .nk-search-result__title { font-size: var(--nk-text-md); }
.nk-search-overlay .nk-search-result__price { font-size: var(--nk-text-lg); }

/* The department line sits under the price as a quiet chip rather than loose
   text, so the card has three clear ranks: name, price, where it lives. */
.nk-search-overlay .nk-search-result__meta > * {
  padding-inline: var(--nk-space-2);
  padding-block: 2px;
  border-radius: var(--nk-radius-pill);
  background-color: var(--nk-surface-sunken);
}

/* The overlay's idle state carries the category cards, which are their own
   component. They only need the gap resetting from the panel's dense default. */
.nk-search-overlay .nk-catcards { margin-block-start: var(--nk-space-2); }

@media (min-width: 768px) {
  .nk-search-overlay .nk-search-result { grid-template-columns: 104px minmax(0, 1fr); }
  .nk-search-overlay .nk-search-result__media { inline-size: 104px; }
}