/* Printo header search — liquid glass.
   STAGING ONLY: registered from staging's local.xml, not live's.

   Pure CSS. Mirasvit SearchAutocomplete binds to #search and builds
   .searchautocomplete-placeholder itself, so nothing here moves, renames or
   rebuilds a node — the plugin keeps working untouched. Note Mirasvit's own
   typo, "searchautocomlete-image" (no p); it has to be spelled their way. */

.header-search.desktop {
  position: relative;
  /* The old bar was 560px because its children floated at fixed widths. Once
     the form became flex the wrapper shrank to its content, so the width is
     stated explicitly rather than inherited from a float. */
  width: 560px;
  max-width: 100%;
  /* the rebuilt department nav sits at z-index 900, and the results panel has
     to clear it or it opens behind the menu */
  z-index: 1100;
}
@media only screen and (max-width: 1199px) { .header-search.desktop { width: 420px; } }

/* ---------- the bar ---------- */
form#search_mini_form.searchautocomplete {
  width: 100%;
  float: none;
  position: relative;
  display: block;
  border-radius: 999px;
  padding: 5px;
  /* clear frosted glass: no colour cast, one hairline, one soft shadow */
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid #e3e7ea;
  box-shadow: 0 1px 2px rgba(16,51,59,.05);
  transition: box-shadow .2s ease, border-color .2s ease;
}
form#search_mini_form.searchautocomplete:hover {
  border-color: #d3d9dd;
  box-shadow: 0 2px 6px rgba(16,51,59,.07);
}
/* focus-within is the honest signal here: the input is the only focusable thing */
form#search_mini_form.searchautocomplete:focus-within {
  background: #fff;
  border-color: #b9c2c7;
  box-shadow: 0 2px 8px rgba(16,51,59,.09);
}

#search_mini_form .form-search {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
#search_mini_form .form-search > label { display: none; }

#search_mini_form input#search.input-text {
  flex: 1 1 auto;
  width: auto !important;
  float: none !important;
  border-color: transparent !important;
  min-width: 0;
  height: 40px !important;
  margin: 0;
  padding: 0 6px 0 20px;
  border: 0 !important;
  outline: none;
  background: transparent !important;
  box-shadow: none !important;
  font: 400 15px/40px Poppins, Roboto, Arial, sans-serif;
  color: #10333b;
  -webkit-appearance: none;
  appearance: none;
}
#search_mini_form input#search.input-text::placeholder { color: #5d7c85; opacity: .85; }
#search_mini_form input#search.input-text::-webkit-search-cancel-button { display: none; }

/* ---------- the button ---------- */
#search_mini_form button.search-button::before { content: none !important; }
#search_mini_form button.search-button {
  flex: 0 0 auto;
  float: none !important;
  font-size: 13.5px !important;
  color: #fff !important;
  position: static;
  width: auto;
  width: 40px;
  height: 40px !important;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00BBD3 !important;
  box-shadow: none;
  transition: background .18s ease, transform .12s ease;
}
#search_mini_form button.search-button:hover { background: #0197AB !important; }
#search_mini_form button.search-button:active { transform: translateY(1px); }
#search_mini_form button.search-button:focus-visible {
  outline: 2px solid #10333b;
  outline-offset: 2px;
}
/* icon only: the label stays in the DOM but is hidden, and the button already
   carries title="Search", so the control keeps an accessible name */
#search_mini_form button.search-button > span,
#search_mini_form button.search-button > span > span {
  display: inline-block;
  background: none;
  border: 0;
  padding: 0;
  height: auto;
  line-height: 1;
  font-size: 0 !important;
  color: #fff;
}
#search_mini_form button.search-button > span > span::before {
  content: "\f002";
  font-family: FontAwesome, "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 15px;
  line-height: 1;
  color: #fff;
}

/* Mirasvit's spinner sits inside the bar */
#search_mini_form .searchautocomplete-loader {
  position: absolute;
  right: 58px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

/* ---------- the recommendation dropdown ---------- */
.searchautocomplete .searchautocomplete-placeholder,
div.searchautocomplete-placeholder {
  margin-top: 10px !important;
  padding: 8px !important;
  border: 1px solid #e3e7ea !important;
  border-radius: 14px !important;
  /* solid, not translucent: product photos and prices have to read cleanly
     against a stable ground, whatever is scrolling behind the panel */
  background: #fff !important;
  box-shadow: 0 10px 28px -12px rgba(16,51,59,.28) !important;
  /* ten results with images ran to 1,285px and pushed the page around */
  max-height: min(70vh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 1200 !important;
}
div.searchautocomplete-placeholder::-webkit-scrollbar { width: 8px; }
div.searchautocomplete-placeholder::-webkit-scrollbar-thumb {
  background: #cfd6da; border-radius: 8px;
}
div.searchautocomplete-placeholder .top { display: none !important; }

div.searchautocomplete-placeholder .index-title {
  padding: 8px 12px 6px;
  font: 700 10.5px/1 Poppins, Roboto, Arial, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7f939a;
  background: none;
  border: 0;
}
div.searchautocomplete-placeholder .index-title span { color: #a8b6bb; font-weight: 400; }

div.searchautocomplete-placeholder ul { margin: 0; padding: 0; list-style: none; }

/* Grid, not floats: the image, name, description and price are four siblings,
   so areas place them without depending on source order or clearfixes. */
div.searchautocomplete-placeholder ul li {
  display: grid;
  grid-template-columns: 58px 1fr;
  grid-template-areas: "img name" "img desc" "img price";
  column-gap: 14px;
  row-gap: 2px;
  align-items: start;
  margin: 2px 0;
  padding: 10px 12px;
  border: 0 !important;
  border-radius: 12px;
  background: none;
  cursor: pointer;
  transition: background .16s ease;
}
div.searchautocomplete-placeholder ul li:hover,
div.searchautocomplete-placeholder ul li.active {
  background: #f4f6f7 !important;
}
div.searchautocomplete-placeholder .searchautocomlete-image {
  grid-area: img;
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 0; float: none;
  background: #fff;
  border: 1px solid #eef1f3;
  border-radius: 10px;
  overflow: hidden;
}
div.searchautocomplete-placeholder .searchautocomlete-image img {
  width: auto !important; height: auto !important;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
div.searchautocomplete-placeholder a.name {
  grid-area: name;
  display: block;
  margin: 0;
  font: 600 13.5px/1.35 Poppins, Roboto, Arial, sans-serif;
  color: #10333b;
  text-decoration: none;
  overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
div.searchautocomplete-placeholder ul li:hover a.name { color: #0197AB; }
div.searchautocomplete-placeholder a.name strong { color: #0197AB; font-weight: 700; }

div.searchautocomplete-placeholder li > div.highlight {
  grid-area: desc;
  font: 400 12px/1.4 Roboto, Arial, sans-serif;
  color: #7f939a;
  overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
}
div.searchautocomplete-placeholder li > div.highlight strong { color: #5d7c85; font-weight: 600; }

div.searchautocomplete-placeholder .price-box {
  grid-area: price;
  margin: 3px 0 0;
  display: flex; align-items: baseline; gap: 6px;
}
div.searchautocomplete-placeholder .price-box br { display: none; }
div.searchautocomplete-placeholder .price-box strong {
  font: 600 9.5px/1 Poppins, Roboto, Arial, sans-serif;
  letter-spacing: .1em; text-transform: uppercase; color: #a8b6bb;
}
div.searchautocomplete-placeholder .price-box .price {
  font: 700 14px/1 Poppins, Roboto, Arial, sans-serif;
  color: #10333b;
}
div.searchautocomplete-placeholder li .clearfix { display: none; }

div.searchautocomplete-placeholder .all {
  position: sticky; bottom: -8px;
  margin: 6px -8px -8px;
  padding: 10px;
  text-align: center;
  background: #fff;
  border-top: 1px solid #eef1f3;
  border-radius: 0 0 14px 14px;
}
div.searchautocomplete-placeholder .all a {
  display: inline-block;
  padding: 9px 20px;
  border-radius: 999px;
  background: #f4f6f7;
  font: 600 13px/1 Poppins, Roboto, Arial, sans-serif;
  color: #10333b;
  text-decoration: none;
  transition: background .16s ease;
}
div.searchautocomplete-placeholder .all a:hover { background: #e8edef; color: #10333b; }

/* ---------- narrow screens ---------- */
@media only screen and (max-width: 991px) {
  form#search_mini_form.searchautocomplete {
  width: 100%;
  float: none; padding: 4px; }
  #search_mini_form input#search.input-text { height: 36px !important; line-height: 36px; font-size: 14px; padding-left: 16px; }
  #search_mini_form button.search-button { width: 36px; height: 36px !important; }
  #search_mini_form button.search-button > span > span::before { font-size: 14px; }
  #search_mini_form .searchautocomplete-loader { right: 52px; }
  div.searchautocomplete-placeholder ul li { grid-template-columns: 48px 1fr; column-gap: 10px; }
  div.searchautocomplete-placeholder .searchautocomlete-image { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  form#search_mini_form.searchautocomplete,
  #search_mini_form button.search-button,
  div.searchautocomplete-placeholder ul li { transition: none; }
}