/* search.css: the search agent's, linked by the header on every page.
   The live search answer (partials/suggest.html) in the theme's Amasty Xsearch look, the pieces its
   Knockout component set inline: the "Search for" column beside the products, two products a row, and the
   loading spinner. While the box is toggled open (under 1366px) or its results are showing, the header sits
   above the kit's vehicle band (both z-index 20), so the box and the dropdown hang over it as over the page. */
body.-amsearch-overlay-opened .page-header,
.page-header:has(.amsearch-contianer.show) { z-index: 21; }
.amsearch-result-section .amsearch-result-block { display: flex; flex-wrap: nowrap; align-items: flex-start; }
.amsearch-result-section .amsearch-items-section { flex: 0 0 283px; box-sizing: border-box; }
.amsearch-result-section .amsearch-tab-items { list-style: none; margin: 0; padding: 0; }
.amsearch-result-section .amsearch-item-container .amsearch-link { display: block; word-break: break-word; }
.amsearch-result-section .amsearch-product-image-container img { display: block; max-width: 100%; height: auto; }
.amsearch-result-section .amsearch-products-section .product-item-link {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: none;
  padding: 0; margin-bottom: 10px;
}
.amsearch-result-section .amsearch-message-block { margin: 0 20px 20px; }
.amsearch-form-block.-loading .amsearch-input-wrapper::after {
  content: ""; position: absolute; right: 44px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  border: 2px solid var(--site-spinner); border-top-color: var(--site-accent); border-radius: 50%; animation: search-spin .7s linear infinite;
}
@keyframes search-spin { to { transform: rotate(360deg); } }
@media (min-width: 768px) {
  .amsearch-result-section .amsearch-products-section.-list .amsearch-item { width: 50%; }
}
@media (max-width: 767px) {
  /* the theme's wrap-reverse pushes a block taller than the box above its top, out of reach of the scroll */
  .amsearch-result-section { flex-wrap: nowrap; }
  .amsearch-result-section .amsearch-item-container .amsearch-link { font-size: 13px; }
  .amsearch-result-section .amsearch-result-block { flex-direction: column; }
  .amsearch-result-section .amsearch-items-section { flex: none; width: 100%; }
  .amsearch-result-section .amsearch-products-section { width: 100% !important; }
}