Product Showcase

{% assign featured_product = all_products[section.settings.featured_product] %}
{% if featured_product != blank %}
  <section class="product-showcase" data-product-id="{{ featured_product.id }}">
    <div class="container">
      <div class="product-showcase__content">
        <!-- Product showcase content -->
      </div>
    </div>
  </section>
{% endif %}

<div class="product-showcase--featured">
  <div class="product-showcase__image">
    <img src="{{ featured_product.featured_image | image_url: width: 600 }}" 
         alt="{{ featured_product.title | escape }}"
         loading="eager"
         class="product-showcase__img">
  </div>
  
  <div class="product-showcase__info">
    <h2 class="product-showcase__title">{{ featured_product.title }}</h2>
    <div class="product-showcase__price">
      {% if featured_product.compare_at_price > featured_product.price %}
        <span class="product-showcase__price-current">{{ featured_product.price | money }}</span>
        <span class="product-showcase__price-compare">{{ featured_product.compare_at_price | money }}</span>
      {% else %}
        <span class="product-showcase__price-current">{{ featured_product.price | money }}</span>
      {% endif %}
    </div>
    
    <div class="product-showcase__description">
      {{ featured_product.description | truncate: 200 }}
    </div>
    
    <div class="product-showcase__actions">
      <a href="{{ featured_product.url }}" class="btn btn--primary">View Product</a>
      <button class="btn btn--secondary product-showcase__quick-view" 
              data-product-id="{{ featured_product.id }}">
        Quick View
      </button>
    </div>
  </div>
</div>

<div class="product-showcase--grid">
  {% for product in section.settings.products limit: section.settings.products_to_show %}
    <div class="product-showcase__item">
      <div class="product-showcase__item-image">
        <img src="{{ product.featured_image | image_url: width: 400 }}" 
             alt="{{ product.title | escape }}"
             loading="lazy">
      </div>
      
      <div class="product-showcase__item-info">
        <h3 class="product-showcase__item-title">{{ product.title }}</h3>
        <div class="product-showcase__item-price">{{ product.price | money }}</div>
      </div>
    </div>
  {% endfor %}
</div>

.product-showcase {
  padding: 4rem 0;
  background: var(--color-surface);
}

.product-showcase--featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.product-showcase__image {
  position: relative;
  border-radius: 0.5rem;
  overflow: hidden;
}

.product-showcase__img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.product-showcase__image:hover .product-showcase__img {
  transform: scale(1.05);
}

.product-showcase__info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.product-showcase__title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.product-showcase__price {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.product-showcase__price-current {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.product-showcase__price-compare {
  text-decoration: line-through;
  color: var(--color-text-secondary);
}

.product-showcase__description {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.product-showcase__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .product-showcase--featured {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .product-showcase__title {
    font-size: 2rem;
  }
}