/* =============================================================================
   Quick Product Find — Kino Flo skin
   =============================================================================
   The COMPONENT is ported from LynTec verbatim (builder/quick_product_find + js/) so it can keep
   taking fixes from the other sites that run it. This file is the one part that is not ported:
   LynTec's is a dark panel with right-aligned rows in Open Sans, which is that site's toolbar.

   Replaced rather than overridden from kf-utility.css. The element's template enqueues this
   stylesheet itself at render time, so it always lands AFTER the theme's own sheets — an override
   elsewhere would have to win on specificity every single time, for every property. Owning the
   skin outright is simpler and cannot drift.

   Class names are the component's and must not be renamed; they are written by its JS.
   ============================================================================= */
.quick-product-find {
  position: relative;
  color: #fff;
}

/* ---- the toggle in the bar ------------------------------------------------ */
.quick-product-find__toggle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font:
    400 16px/19px "Roboto",
    sans-serif;
  color: #fff;
}
.quick-product-find__toggle:hover,
.quick-product-find__toggle:focus-visible {
  color: var(--kf-yellow, #fed208);
  outline: none;
}
.quick-product-find__caret {
  width: 0;
  height: 0;
  border-inline: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.15s ease-out;
}
.quick-product-find__toggle[aria-expanded="true"] .quick-product-find__caret {
  transform: rotate(180deg);
}

/* ---- the panel ------------------------------------------------------------ */
.quick-product-find__dropdown {
  width: 380px;
  padding: 0;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
  color: var(--kf-ink, #161616);
}
.quick-product-find__panel {
  padding: 16px;
  /* The toolbar column is `uk-text-right` so the toggle sits at the end of the bar. The panel is a
     list and reads left-to-right like any other. */
  text-align: left;
}
.quick-product-find__input.uk-input {
  width: 100%;
  height: 46px;
  border: 1px solid #d9d9d9;
  border-radius: 30px;
  background: #fff;
  color: var(--kf-ink, #161616);
  padding-inline: 18px;
  font:
    400 15px/20px "Roboto",
    sans-serif;
}
.quick-product-find__input.uk-input:focus {
  border-color: var(--kf-yellow, #fed208);
  outline: none;
}
.quick-product-find__input::placeholder {
  color: #8a8b8d;
}

.quick-product-find__status {
  font:
    400 13px/18px "Roboto",
    sans-serif;
  color: #717275;
  padding: 10px 8px 2px;
}

/* The whole catalogue is in the payload — 486 products — so the list scrolls inside the panel
   rather than running off the bottom of the page. ~9 rows is enough to show it scrolls. */
.quick-product-find__results {
  max-height: 420px;
  overflow-y: auto;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  overscroll-behavior: contain;
}
.quick-product-find__result {
  margin: 0;
  list-style: none;
}
.quick-product-find__link {
  display: block;
  padding: 10px 8px;
  border-radius: 4px;
  color: var(--kf-ink, #161616);
  text-decoration: none;
}
.quick-product-find__link:hover,
.quick-product-find__link:focus-visible {
  background: #f2f2f2;
  color: var(--kf-ink, #161616);
  outline: none;
}
.quick-product-find__title {
  display: block;
  font:
    500 15px/20px "Roboto",
    sans-serif;
}
.quick-product-find__sku {
  display: block;
  margin-top: 2px;
  font:
    400 12px/16px "Roboto",
    sans-serif;
  color: #8a8b8d;
}