.jspg-af-search{
  --jspg-af-ink:#1a1a1a;
  --jspg-af-band:#f6f5f3;
  --jspg-af-border:#cfcdc7;
  --jspg-af-rule:#eeece7;
  --jspg-af-muted:#8d8c87;
  --jspg-af-maxw:640px;
  position:relative;
  box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.jspg-af-search *{box-sizing:border-box}

/* full-bleed band under the nav; JS sets the offsets */
.jspg-af-search--band{
  display:block;
  background:var(--jspg-af-band);
  border-bottom:1px solid #e5e3dc;
  padding:22px 24px;
  width:100%;
  overflow-x:clip;
}

/* Form and dropdown share this box, so they are always the same width and
   centre together. Anchoring the dropdown to the outer element instead is
   what threw it off centre inside the full-bleed band. */
.jspg-af-search__inner{
  position:relative;
  max-width:var(--jspg-af-maxw);
  width:100%;
  margin-left:auto;
  margin-right:auto;
}

.jspg-af-search__form{display:flex;align-items:stretch;margin:0;min-width:0}

.jspg-af-search__field{
  flex:1;display:flex;align-items:center;gap:10px;min-width:0;
  background:#fff;border:1px solid var(--jspg-af-border);
  border-radius:4px 0 0 4px;padding:0 14px;height:48px;
  transition:border-color .12s ease;
}
.jspg-af-search--open .jspg-af-search__field{border-color:var(--jspg-af-ink);border-bottom-left-radius:0}
.jspg-af-search__field:focus-within{border-color:var(--jspg-af-ink)}

.jspg-af-search__icon{width:18px;height:18px;flex:none;color:var(--jspg-af-muted)}
.jspg-af-search__field:focus-within .jspg-af-search__icon{color:var(--jspg-af-ink)}

.jspg-af-search__field input[type="search"]{
  flex:1;min-width:0;height:100%;
  border:0!important;outline:0!important;background:none!important;box-shadow:none!important;
  padding:0!important;margin:0!important;
  font-size:15px;line-height:1.2;color:var(--jspg-af-ink);
  -webkit-appearance:none;appearance:none;
}
.jspg-af-search__field input[type="search"]::-webkit-search-cancel-button{display:none}
.jspg-af-search__field input::placeholder{color:#a3a29d;opacity:1}

.jspg-af-search__clear{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;color:var(--jspg-af-muted);
}
.jspg-af-search__clear svg{width:15px;height:15px}
.jspg-af-search__clear:hover{color:var(--jspg-af-ink)}

.jspg-af-search__submit{
  flex:none;height:48px;padding:0 26px;margin:0;
  background:var(--jspg-af-ink);color:#fff;border:1px solid var(--jspg-af-ink);
  border-radius:0 4px 4px 0;cursor:pointer;
  font-size:14px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;line-height:1;
  transition:background-color .12s ease;
}
.jspg-af-search__submit:hover{background:#3a3a37;border-color:#3a3a37}
.jspg-af-search--open .jspg-af-search__submit{border-bottom-right-radius:0}

/* ---------- suggestions ---------- */
.jspg-af-search__results{
  position:absolute;left:0;right:0;top:100%;z-index:960;
  background:#fff;border:1px solid var(--jspg-af-ink);border-top:0;border-radius:0 0 4px 4px;
  max-height:70vh;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;
}
.jspg-af-search__results[hidden]{display:none}

.jspg-af-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-bottom:1px solid var(--jspg-af-rule);
  text-decoration:none;color:inherit;
}
.jspg-af-item:hover,.jspg-af-item.is-active{background:#f6f5f3}
.jspg-af-item__thumb{
  width:38px;height:38px;flex:none;border-radius:3px;background:var(--jspg-af-rule);
  object-fit:cover;
}
.jspg-af-item__body{flex:1;min-width:0}
.jspg-af-item__title{
  display:block;
  font-size:14px;line-height:1.35;color:var(--jspg-af-ink);
  white-space:normal;overflow-wrap:anywhere;word-break:break-word;
}
.jspg-af-item__meta{
  display:block;
  font-size:12px;color:var(--jspg-af-muted);margin-top:3px;
  white-space:normal;overflow-wrap:anywhere;
}
.jspg-af-item__price{font-size:14px;font-weight:600;color:var(--jspg-af-ink);white-space:nowrap;flex:none}
.jspg-af-item__price del{opacity:.5;font-weight:400;margin-right:4px}

.jspg-af-search__all{
  display:block;padding:12px 14px;text-align:center;text-decoration:none;
  font-size:13px;font-weight:600;letter-spacing:.03em;color:var(--jspg-af-ink);
  border-bottom:1px solid var(--jspg-af-rule);
}
.jspg-af-search__all:last-child{border-bottom:0}
.jspg-af-search__all--shop{background:#f6f5f3;color:var(--jspg-af-ink)}
.jspg-af-search__all:hover,.jspg-af-search__all.is-active{background:#eeece7}
.jspg-af-search__msg{padding:14px;text-align:center;font-size:13.5px;color:var(--jspg-af-muted)}

@media (max-width:640px){
  .jspg-af-search--band{padding:16px}
  .jspg-af-search__field{height:44px;padding:0 12px}
  .jspg-af-search__field input[type="search"]{font-size:16px} /* stops iOS zoom on focus */
  .jspg-af-search__submit{height:44px;padding:0 16px;font-size:13px}
  .jspg-af-item{padding:11px 12px;gap:10px}
  .jspg-af-item__title{font-size:14.5px}
  .jspg-af-search__results{max-height:60vh}
}

@media (prefers-reduced-motion:reduce){
  .jspg-af-search *{transition:none!important}
}