/**
 * Instant search overlay.
 *
 * Its own `catnip-search-*` namespace rather than the mockup's `.search-*`
 * one: components.css already carries a ported `.search-overlay` block whose
 * `.search-results` and `.search-empty` rules collide with the markup
 * search.php renders. A second consumer of those names would make the collision
 * load-bearing. The visual language below is that block's, unchanged — panel
 * width and drop, row rhythm, thumbnail size, hover fill.
 *
 * Motion, backdrop and dialog conventions match assets/css/woo/cart-drawer.css
 * so the two overlays read as one system. Tokens only: hairlines use the `thin`
 * keyword, fixed dimensions use rem.
 */

/* --- Shell ---------------------------------------------------------------- */

.catnip-search {
  position: fixed;
  inset: 0;
  z-index: 200;
}

.catnip-search[hidden] {
  display: none;
}

.catnip-search-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--deep-ocean) 35%, transparent);
  backdrop-filter: blur(0.1875rem);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.catnip-search.is-open .catnip-search-backdrop {
  opacity: 1;
}

.catnip-search-panel {
  position: relative;
  width: min(47.5rem, calc(100% - 2 * var(--space-gutter)));
  max-height: min(72vh, 41.25rem);
  margin: clamp(2.5rem, 9vh, 6.875rem) auto 0;
  display: flex;
  flex-direction: column;
  background: var(--off-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-0.75rem);
  transition:
    opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
}

.catnip-search.is-open .catnip-search-panel {
  opacity: 1;
  transform: none;
}

.catnip-search-panel:focus {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .catnip-search-panel,
  .catnip-search-backdrop {
    transition: none;
  }
}

/* Background scroll lock while the overlay is open. */
.catnip-search-lock {
  overflow: hidden;
}

/* --- Search bar ----------------------------------------------------------- */

.catnip-search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-m);
  border-bottom: thin solid var(--hairline);
}

.catnip-search-bar > .material-symbols-outlined {
  flex-shrink: 0;
  font-size: 1.625rem;
  color: var(--deep-ocean);
}

.catnip-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h3);
  color: var(--charcoal);
  appearance: none;
}

.catnip-search-input::placeholder {
  color: var(--graphite);
  font-weight: 500;
}

.catnip-search-input::-webkit-search-cancel-button {
  appearance: none;
}

.catnip-search-close {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  color: var(--graphite);
  transition:
    background var(--duration-fast),
    color var(--duration-fast);
}

.catnip-search-close:hover {
  background: var(--pebble);
  color: var(--charcoal);
}

/* --- Region --------------------------------------------------------------- */

.catnip-search-region {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-2xs) var(--space-s) var(--space-s);
  transition: opacity var(--duration-fast);
}

.catnip-search-region.is-busy {
  opacity: 0.55;
}

.catnip-search-meta {
  padding: var(--space-2xs) var(--space-s);
  font-size: var(--text-small);
  color: var(--graphite);
}

/* --- Groups and rows ------------------------------------------------------ */

.catnip-search-group + .catnip-search-group {
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: thin solid var(--hairline);
}

.catnip-search-group-label {
  display: block;
  padding: var(--space-3xs) var(--space-s) var(--space-2xs);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
}

.catnip-search-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-2xs) var(--space-s);
  border-radius: var(--radius-md);
  transition: background var(--duration-fast);
}

.catnip-search-item:hover,
.catnip-search-item.is-active {
  background: var(--pebble);
  box-shadow: inset 0.1875rem 0 0 var(--deep-ocean);
  outline: none;
}

.catnip-search-thumb {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--coastal-soft);
  color: var(--deep-ocean);
}

.catnip-search-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catnip-search-thumb .material-symbols-outlined {
  font-size: 1.375rem;
}

.catnip-search-item-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-width: 0;
}

.catnip-search-item-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-small);
  line-height: 1.3;
  color: var(--deep-ocean);
}

.catnip-search-item-name mark {
  background: var(--coastal-soft);
  color: inherit;
  border-radius: var(--radius-sm);
}

.catnip-search-item-meta {
  font-size: var(--text-small);
  color: var(--graphite);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catnip-search-item-price {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-small);
  color: var(--charcoal);
  white-space: nowrap;
}

/* --- Idle and empty states ------------------------------------------------ */

/* `display: flex` below outranks the user-agent's `[hidden] { display: none }`,
   so the hidden state has to be restated. Without this the suggestion chips
   stay in the tab order underneath a full set of results. */
.catnip-search-idle[hidden],
.catnip-search-empty[hidden],
.catnip-search-foot[hidden] {
  display: none;
}

.catnip-search-idle {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-s) var(--space-xs);
}

.catnip-search-idle-note {
  font-size: var(--text-small);
  color: var(--graphite);
  max-width: 46ch;
}

.catnip-search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.catnip-search-chips button {
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--coastal-soft);
  color: var(--deep-ocean);
  font-size: var(--text-small);
  font-weight: 600;
  transition:
    background var(--duration-fast),
    color var(--duration-fast);
}

.catnip-search-chips button:hover,
.catnip-search-chips button:focus-visible {
  background: var(--coastal-blue);
  color: var(--charcoal);
}

.catnip-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  text-align: center;
  padding: var(--space-l) var(--space-m);
}

.catnip-search-empty > .material-symbols-outlined {
  font-size: 2.75rem;
  color: var(--coastal-blue);
}

.catnip-search-empty-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-h4);
  color: var(--charcoal);
}

.catnip-search-empty-note {
  font-size: var(--text-small);
  color: var(--graphite);
  max-width: 36ch;
}

/* --- Footer --------------------------------------------------------------- */

.catnip-search-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  flex-wrap: wrap;
  padding: var(--space-xs) var(--space-m);
  border-top: thin solid var(--hairline);
  background: var(--white);
}

/* The one place terracotta appears in this overlay: the single forward action
   out of it. Everything else stays inside the Deep Ocean / Pebble band. */
.catnip-search-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-width: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-small);
  color: var(--deep-ocean);
  transition: color var(--duration-fast);
}

.catnip-search-all span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catnip-search-all .material-symbols-outlined {
  flex-shrink: 0;
  font-size: 1.125rem;
  color: var(--terracotta);
  transition: transform var(--duration-fast) var(--ease-out);
}

.catnip-search-all:hover,
.catnip-search-all:focus-visible {
  color: var(--terracotta-hover);
}

.catnip-search-all:hover .material-symbols-outlined {
  transform: translateX(var(--space-3xs));
}

@media (prefers-reduced-motion: reduce) {
  .catnip-search-all .material-symbols-outlined {
    transition: none;
  }

  .catnip-search-all:hover .material-symbols-outlined {
    transform: none;
  }
}

.catnip-search-keys {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--text-eyebrow);
  color: var(--graphite);
}

.catnip-search-keys kbd {
  padding: var(--space-3xs) var(--space-2xs);
  border: thin solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--off-white);
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  line-height: 1;
}

/* --- Small screens -------------------------------------------------------- */

@media (max-width: 767px) {
  .catnip-search-panel {
    max-height: min(84vh, 41.25rem);
    margin-top: var(--space-s);
  }

  .catnip-search-bar {
    padding: var(--space-xs) var(--space-s);
    gap: var(--space-2xs);
  }

  .catnip-search-foot {
    padding: var(--space-xs) var(--space-s);
  }

  /* Not a keyboard, and the row would wrap into a second line of chrome. */
  .catnip-search-keys {
    display: none;
  }

  .catnip-search-item {
    gap: var(--space-2xs);
    padding-inline: var(--space-2xs);
  }

  .catnip-search-thumb {
    width: 2.75rem;
    height: 2.75rem;
  }
}