Search & Filtering

<form class="search-form" action="/search" method="get">
  <div class="search-form__input-group">
    <input type="search" 
           name="q" 
           placeholder="Search products..."
           class="search-form__input"
           value="{{ search.terms | escape }}"
           autocomplete="off">
    <button type="submit" class="search-form__submit">
      <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"/>
      </svg>
    </button>
  </div>
  
  <div class="search-form__suggestions" data-search-suggestions>
    <!-- Search suggestions will be populated here -->
  </div>
</form>

{% if search.performed %}
  <div class="search-results">
    <div class="search-results__header">
      <h1 class="search-results__title">
        Search results for "{{ search.terms | escape }}"
      </h1>
      <p class="search-results__count">
        {{ search.results_count }} results found
      </p>
    </div>
    
    {% if search.results_count > 0 %}
      <div class="search-results__filters">
        <!-- Filter options -->
      </div>
      
      <div class="search-results__grid">
        {% for product in search.results %}
          <div class="search-result">
            <div class="search-result__image">
              <a href="{{ product.url }}">
                <img src="{{ product.featured_image | image_url: width: 300 }}" 
                     alt="{{ product.title | escape }}"
                     loading="lazy">
              </a>
            </div>
            
            <div class="search-result__content">
              <h3 class="search-result__title">
                <a href="{{ product.url }}">{{ product.title }}</a>
              </h3>
              
              <div class="search-result__price">
                {{ product.price | money }}
              </div>
              
              <div class="search-result__description">
                {{ product.description | strip_html | truncate: 150 }}
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
    {% else %}
      <div class="search-results__empty">
        <h2>No results found</h2>
        <p>Try adjusting your search terms or browse our categories.</p>
      </div>
    {% endif %}
  </div>
{% endif %}

.search-form {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}

.search-form__input-group {
  display: flex;
  border: 2px solid var(--color-border);
  border-radius: 0.5rem;
  overflow: hidden;
}

.search-form__input {
  flex: 1;
  padding: 1rem;
  border: none;
  font-size: 1rem;
  outline: none;
}

.search-form__input:focus {
  border-color: var(--color-primary);
}

.search-form__submit {
  padding: 1rem 1.5rem;
  background: var(--color-primary);
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.search-form__submit:hover {
  background: var(--color-primary-dark);
}

.search-results {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.search-results__header {
  text-align: center;
  margin-bottom: 3rem;
}

.search-results__title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--color-text-primary);
}

.search-results__count {
  font-size: 1.125rem;
  color: var(--color-text-secondary);
}

.search-results__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.search-result {
  background: white;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.search-result:hover {
  transform: translateY(-4px);
}

.search-result__image {
  aspect-ratio: 1;
  overflow: hidden;
}

.search-result__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.search-result:hover .search-result__image img {
  transform: scale(1.05);
}

.search-result__content {
  padding: 1rem;
}

.search-result__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.search-result__title a {
  color: var(--color-text-primary);
  text-decoration: none;
}

.search-result__title a:hover {
  color: var(--color-primary);
}

.search-result__price {
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}

.search-result__description {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}