/* search.css: the search agent's, linked by the header on every page.
   The live search's answer (partials/suggest.html) in the theme's Amasty look: the "Search for" and
   categories column beside the products, as Amasty lays them, and a spinner while it asks. */
.amsearch-result-section { align-items: flex-start; flex-wrap: nowrap; }
.amsearch-result-section .amsearch-result-block { display: flex; flex-wrap: nowrap; width: 100%; }
.amsearch-result-section .amsearch-items-section { flex: 0 0 283px; }
.amsearch-result-section .amsearch-items-section .amsearch-tab-items { list-style: none; margin: 0; padding: 0; }
.amsearch-result-section .amsearch-item-container .amsearch-link { display: block; }
.amsearch-result-section .amsearch-item-container .amsearch-block-header { padding-bottom: 8px; }
.amsearch-result-section .amsearch-products-section.-grid .amsearch-image .amsearch-product-image-container { display: block; }
.amsearch-result-section .amsearch-product-image-container .product-image-photo {
  position: static; display: block; width: 100%; max-width: 100%; height: 140px; object-fit: contain; margin: 0 auto;
}
/* the box opened by the magnifier (under 1366 wide) and the answer hang below the header: while either is open the
   header sits over the kit's vehicle band, so they and the theme's shade cover the band instead of going under it */
body.-amsearch-overlay-opened .page-header, .page-header:has(.amsearch-contianer.show) { z-index: 21; }
.amsearch-result-section .amsearch-products-section { flex: 1 1 auto; }
.amsearch-result-section .amsearch-products-section.-grid .amsearch-image { text-align: center; }
.amsearch-result-section .amsearch-products-section .product-item-link {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: none; overflow: hidden; margin-bottom: 10px; padding: 0;
}
.amsearch-result-section .amsearch-message-block { margin: 0 20px 20px; width: auto; }
.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 (max-width: 767px) {
  .amsearch-result-section .amsearch-result-block { flex-direction: column; }
  .amsearch-result-section .amsearch-items-section { flex: none; max-width: none; padding-bottom: 0; }
  .amsearch-result-section .amsearch-products-section { width: 100% !important; }
  .amsearch-result-section .amsearch-products-section.-grid:not(.-slider) .amsearch-item { max-width: 50%; }
  .amsearch-result-section .amsearch-link { font-size: 13px; }
  /* 16px, so a phone does not zoom into the field */
  .page-header .amsearch-input { font-size: 16px; }
}