/* ============================================================================
   Header product search.
   The masthead is exactly 37px and the hero's y=74 depends on it, so the trigger
   is a 24px button and the field lives in a panel BELOW the bar.
   ============================================================================ */

/* NOT position:relative. The panel below is anchored right:0, and with the trigger as its
   containing block that meant "right edge of a 24px icon" — the comment there always said the
   header, but the CSS said the button, and the two only agreed while the icon happened to sit
   near the right edge. See .dp-search__panel. */
.dp-search { flex: 0 0 auto; display: flex; align-items: center; }

.dp-search__btn {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--dp-r-pill);
  background: none;
  color: var(--dp-ink);
  cursor: pointer;
  transition: color .18s var(--dp-ease-cta), background-color .18s var(--dp-ease-cta);
}
.dp-search__btn:hover { color: var(--dpx-fg-blue, var(--dp-blue)); }
.dp-search__btn:focus-visible { outline: 2px solid var(--dpx-fg-blue, var(--dp-blue)); outline-offset: 2px; }
.dp-search.is-open .dp-search__btn { color: var(--dpx-fg-blue, var(--dp-blue)); }

/* Anchored to the header row (.dp-head__in is the positioned ancestor) and inset by the
   content gutter, so its right edge lands on the same line as the cart and the page content
   below it — rather than dangling off a 24px icon. */
.dp-search__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: var(--dp-gutter);
  z-index: 95;
  width: 420px;
  max-width: calc(100vw - 32px);
  padding: var(--dp-s-5);
  border: 1px solid var(--dp-hair-panel);
  border-radius: var(--dp-r-2xs);
  background: var(--dp-surface);
  box-shadow: 0 18px 44px var(--dpx-shadow-a414676p14, rgba(46, 36, 30, .14));
}
.dp-search__panel[hidden] { display: none; }

.dp-search__form { position: relative; display: flex; align-items: center; }
.dp-search__mag { position: absolute; left: 12px; color: var(--dp-ink-50); pointer-events: none; }
.dp-search__q {
  width: 100%;
  padding: 11px 38px 11px 36px;
  border: 1px solid var(--dp-hair-row);
  border-radius: var(--dp-r-3xs);
  background: var(--dp-surface-alt);
  font: inherit;
  font-size: var(--dp-fs-base);
  letter-spacing: -.28px;
  color: var(--dp-ink);
}
.dp-search__q::placeholder { color: var(--dp-ink-50); }
.dp-search__q:focus-visible { outline: 2px solid var(--dpx-fg-blue, var(--dp-blue)); outline-offset: -1px; border-color: transparent; }
.dp-search__q::-webkit-search-decoration,
.dp-search__q::-webkit-search-cancel-button { -webkit-appearance: none; }

.dp-search__x {
  position: absolute; right: 8px;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  padding: 0; border: 0;
  border-radius: var(--dp-r-pill);
  background: none;
  color: var(--dp-ink-50);
  cursor: pointer;
}
.dp-search__x:hover { color: var(--dp-alert); }
.dp-search__x:focus-visible { outline: 2px solid var(--dpx-fg-blue, var(--dp-blue)); outline-offset: 1px; }

.dp-search__results { margin-top: var(--dp-s-3); display: grid; }
.dp-search__results.is-busy { opacity: .5; transition: opacity .15s linear; }

.dp-search__hit {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--dp-s-5);
  padding: var(--dp-s-4) var(--dp-s-4);
  border-radius: var(--dp-r-4xs);
  color: var(--dp-ink);
}
.dp-search__hit:hover,
.dp-search__hit:focus-visible { background: var(--dp-surface-alt); outline: none; }
.dp-search__hit:focus-visible { box-shadow: inset 0 0 0 2px var(--dp-blue); }

.dp-search__hitImg {
  width: 40px; height: 40px;
  border-radius: var(--dp-r-4xs);
  background: var(--dp-surface-alt);
  overflow: hidden;
}
.dp-search__hitImg img { width: 100%; height: 100%; object-fit: contain; }

.dp-search__hitTxt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dp-search__hitName {
  font-size: var(--dp-fs-base);
  font-weight: var(--dp-fw-semi);
  letter-spacing: -.28px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dp-search__hitMeta { font-size: var(--dp-fs-sm); color: var(--dp-ink-50); letter-spacing: -.2px; }
.dp-search__hitPrice {
  font-size: var(--dp-fs-sm);
  font-weight: var(--dp-fw-semi);
  letter-spacing: -.2px;
  color: var(--dp-ink);
  white-space: nowrap;
}

.dp-search__empty {
  margin: 0;
  padding: var(--dp-s-6) var(--dp-s-4);
  font-size: var(--dp-fs-base);
  color: var(--dp-ink-50);
}

@media (max-width: 809px) {
  /* The mobile bar already carries a burger and a cart; the panel spans the viewport
     instead of hanging off the icon. */
  .dp-search__panel {
    position: fixed;
    top: 85px;                       /* strip 33 + header 52, measured */
    left: 16px; right: 16px;
    width: auto; max-width: none;
  }
}

/* --- Slide down -----------------------------------------------------------
   The panel used to appear instantly because [hidden] is display:none and a display change
   cannot be transitioned. search.js now drops the attribute first and adds .is-live on the
   next frame, so there is something to animate between. */
.dp-search__panel {
  transform: translateY(-10px);
  opacity: 0;
  transform-origin: top right;
  transition: opacity .18s var(--dp-ease-cta), transform .2s var(--dp-ease-cta);
}
.dp-search__panel.is-live { transform: translateY(0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .dp-search__panel { transform: none; transition: opacity .12s linear; }
  .dp-search__panel.is-live { transform: none; }
}

/* --- Resting state: the three products ------------------------------------ */
.dp-search__top { margin-top: var(--dp-s-5); }
.dp-search__top[hidden] { display: none; }
.dp-search__topHead {
  margin: 0 0 var(--dp-s-2);
  padding-inline: var(--dp-s-3);
  font-size: var(--dp-fs-sm); font-weight: var(--dp-fw-semi);
  letter-spacing: .06em; text-transform: uppercase; color: var(--dp-muted);
}