.reco-search-wrapper {
  position: relative;
  max-width: 480px;
}

.reco-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  font-size: 15px;
}

.reco-search-dropdown {
  /* Fixed, not absolute: an absolutely-positioned dropdown is clipped by
     ANY ancestor with overflow:hidden, which is extremely common in theme
     widget/column wrappers (e.g. Divi's .et_pb_widget). Fixed positioning
     escapes that entirely — its top/left/width are set in JS from the
     input's actual on-screen position (see reco-search.js), the same
     technique used by dropdown/autocomplete libraries generally for this
     reason. Position values here are just safe defaults before JS sets
     the real ones.
   */
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-height: 420px;
  overflow-y: auto;
  /* Maximum safe CSS z-index (2^31 - 1) — defense in depth alongside the
     body-portal relocation in reco-search.js. The portal fix handles the
     structural cause (an ancestor's transform trapping position:fixed
     regardless of z-index); this just makes sure nothing else on the
     page can out-rank the dropdown by number even if it somehow ends up
     back in the normal stacking order some other way. */
  z-index: 2147483647;
}

.reco-search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  text-decoration: none;
  color: inherit;
}

.reco-search-result img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}

.reco-search-result-name {
  font-size: 14px;
  line-height: 1.3;
}

.reco-search-result-price {
  font-size: 13px;
  color: #666;
}

.reco-search-result:hover,
.reco-search-result.is-active {
  background: #f5f5f5;
}

.reco-search-empty {
  padding: 12px;
  font-size: 14px;
  color: #888;
}