/*
 * HistoreeTees search — storefront styles.
 * Designed to coexist with most Shopify themes without leaking styles.
 * All selectors are .ht-* scoped.
 */

/* Hide the native results region on /search once our root mounts.
   This theme renders native search inside .template-search; we also keep the
   older .search__results / .search-results selectors for theme portability. */
.ht-search-active #MainContent .template-search,
.ht-search-active main .template-search,
.ht-search-active main .search__results,
.ht-search-active main .search-results {
  display: none !important;
}

/* ---------- Predictive dropdown ---------- */

/* Suppress the theme's native predictive dropdown while ours is active.
   Our JS sets data-suppressed="1" on <predictive-search> on each keystroke;
   without this rule both panels render at once. */
predictive-search[data-suppressed] .predictive-search {
  display: none !important;
}

.ht-search-panel {
  position: fixed;            /* JS anchors it just below the input's rect, so it
                                 never covers what the customer is typing */
  z-index: 9999;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  min-width: 0;
  max-width: calc(100vw - 16px);
  max-height: 65vh;           /* long result lists scroll instead of running off
                                 the screen or back over the input */
  overflow-y: auto;
  padding: 8px 0;
  font-size: 14px;
  color: #1a1a1a;
}

.ht-search-results { list-style: none; padding: 0; margin: 0; }
.ht-search-result { margin: 0; }

.ht-search-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  text-decoration: none;
  /* Explicit, !important: the dropdown lives inside the dark header, whose
     `a` color rule would otherwise paint these links white-on-white. */
  color: #1a1a1a !important;
}

.ht-search-link:hover { background: rgba(0, 0, 0, 0.04); }

.ht-search-thumb {
  width: 40px; height: 40px;
  object-fit: cover;
  border-radius: 4px;
  background: #f4f4f4;
  flex-shrink: 0;
}

.ht-search-title { font-weight: 500; color: #1a1a1a !important; }

.ht-search-empty, .ht-search-error, .ht-search-loading {
  padding: 12px 14px;
  color: rgba(0, 0, 0, 0.6);
}

.ht-search-seeall {
  display: block;
  padding: 10px 14px;
  margin-top: 4px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-weight: 500;
  text-decoration: none;
  color: #1a1a1a !important;
}

.ht-search-seeall:hover { background: rgba(0, 0, 0, 0.04); }

/* ---------- Full results page ---------- */

.ht-search-root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px;
}

.ht-search-header { margin-bottom: 24px; }
.ht-search-h1 { font-size: 1.75rem; margin: 0 0 4px; }
.ht-search-query { font-weight: 700; }
.ht-search-count { color: rgba(0, 0, 0, 0.6); margin: 0; }

.ht-search-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
}

@media (max-width: 768px) {
  .ht-search-layout { grid-template-columns: 1fr; }
  /* On mobile the facet sidebar stacks ABOVE the results (pushing products
     below the fold) and the tap targets are too small to be useful. Hide it on
     mobile so results appear immediately; desktop keeps the sidebar. */
  .ht-search-filters { display: none; }
}

.ht-search-filters {
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  padding-right: 24px;
}

.ht-filter-group-label {
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.55);
  margin: 16px 0 8px;
}

.ht-filter-list { list-style: none; padding: 0; margin: 0 0 8px; }

.ht-filter-link {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  text-decoration: none;
  color: inherit;
  font-size: 1.5rem;
}

.ht-filter-link:hover { color: #0a0a0a; }
.ht-filter-link.is-selected { font-weight: 700; }
.ht-filter-count { color: rgba(0, 0, 0, 0.45); }

.ht-filter-clear {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.85rem;
  text-decoration: underline;
  color: inherit;
}

.ht-search-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 24px;
}

/* Mobile: 2-up product grid matching the native collection page. Placed AFTER
   the base rule above so source order wins on phones — otherwise the desktop
   auto-fill grid overrides it and collapses results to a single column. */
@media (max-width: 768px) {
  .ht-search-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

.ht-product-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.ht-product-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  background: #f4f4f4;
  margin-bottom: 8px;
}

.ht-product-body { padding: 0 2px; }
/* Match the collection page product-card title (16px / bold / uppercase). NOTE:
   this theme sets html{font-size:62.5%} so 1rem = 10px — sizes here are in rem
   calibrated to that (1.6rem = 16px), matching the theme's own scale. */
.ht-product-title { font-weight: 700; font-size: 1.6rem; text-transform: uppercase; line-height: 1.3; margin-bottom: 4px; }
.ht-product-tags { font-size: 0.78rem; color: rgba(0, 0, 0, 0.55); }

/* Subtle distinction for collection results so customers can tell at a glance
   that the card leads to a category page, not a single product. */
.ht-search-link--collection .ht-search-title::after,
.ht-product-card--collection .ht-product-tags {
  font-style: italic;
}
.ht-product-card--collection .ht-product-tags {
  color: rgba(0, 0, 0, 0.75);
}