<!-- 🟡 Coriom Hero + Product Showcase -->
<section class="bg-slate-950 text-white text-center py-24">
 <div class="max-w-4xl mx-auto px-6">
  <h1 class="text-5xl font-bold mb-6 leading-tight">Define Your Space. Define Your Success.</h1>
  <p class="text-slate-300 text-xl mb-10">
   Experience the ultimate in design and comfort with our exclusive collection of ergonomic essentials.
  </p>
  <a href="/collections/all" class="bg-amber-300 text-slate-950 font-semibold py-4 px-12 rounded-full shadow-xl hover:bg-amber-400 transition">Explore Collection</a>
 </div>
</section>
<section class="bg-slate-900 py-24">
 <div class="max-w-7xl mx-auto px-6">
  <h2 class="text-4xl font-bold text-center text-white mb-16">The Core Collection</h2>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
   {% for product in collections['all'].products limit: 6 %}
    <div class="bg-slate-800 rounded-xl overflow-hidden shadow-lg hover:-translate-y-1 transition">
     <a href="{{ product.url }}">
      <img src="{{ product.featured_image | img_url: '600x600' }}" alt="{{ product.title }}" class="w-full h-80 object-cover">
     </a>
     <div class="p-6 text-center">
      <h3 class="text-xl font-semibold text-white mb-2">{{ product.title }}</h3>
      <p class="text-slate-400 mb-4">{{ product.price | money }}</p>
      <form method="post" action="/cart/add">
       <input type="hidden" name="id" value="{{ product.variants.first.id }}">
       <button type="submit" class="w-full bg-amber-300 text-slate-950 font-semibold py-3 rounded-lg hover:bg-amber-400 transition">
        Add to Cart
       </button>
      </form>
     </div>
    </div>
   {% endfor %}
  </div>
 </div>
</section>