<section class="py-16 bg-white" data-component-type="Content" data-component-slug="home-appliances-template-products_grid">
  <div class="max-w-[90%] mx-auto px-4">
    <!-- Top Border (Optional based on design) -->
    <div class="w-20 h-1 bg-yellow-400 mb-12 hidden"></div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
      
      <!-- Product 1 -->
      <div class="flex flex-col items-center text-center p-6 border-t-2 border-yellow-400 bg-white hover:shadow-xl transition-shadow duration-300 h-full">
        <div class="h-32 mb-6 flex items-center justify-center">
          <img src="{{p1_img}}" alt="Product" class="h-full object-contain" data-node="p1_img" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046144/seltrix/templates/home-appliances-template/fridge-icon.png">
        </div>
        <h3 class="text-lg font-bold text-gray-900 mb-3" data-node="p1_title" data-node-type="text" data-node-default="Refrigerator">{{p1_title}}</h3>
        <p class="text-sm text-gray-600 mb-4 leading-relaxed" data-node="p1_desc" data-node-type="textarea" data-node-default="Designed to keep your food fresh longer with smart cooling.">{{p1_desc}}</p>
        <a href="{{p1_link}}" class="text-blue-900 font-semibold text-sm mt-auto inline-flex items-center hover:underline" data-node="p1_link" data-node-type="text" data-node-default="#">
           <span class="ml-1"> 
            <span data-node="p1_btn_text" data-node-type="text" data-node-default="Learn More">
          {{p1_btn_text}}
            </span>
             &raquo;</span>
        </a>
      </div>

      <!-- Product 2 -->
      <div class="flex flex-col items-center text-center p-6 border-t-2 border-yellow-400 bg-white hover:shadow-xl transition-shadow duration-300 h-full">
        <div class="h-32 mb-6 flex items-center justify-center">
          <img src="{{p2_img}}" alt="Product" class="h-full object-contain" data-node="p2_img" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046228/seltrix/templates/home-appliances-template/washer-icon.png">
        </div>
        <h3 class="text-lg font-bold text-gray-900 mb-3" data-node="p2_title" data-node-type="text" data-node-default="Washing Machine">{{p2_title}}</h3>
        <p class="text-sm text-gray-600 mb-4 leading-relaxed" data-node="p2_desc" data-node-type="textarea" data-node-default="Cleans with precision while protecting fabric quality.">{{p2_desc}}</p>
        <a href="{{p2_link}}" class="text-blue-900 font-semibold text-sm mt-auto inline-flex items-center hover:underline" data-node="p2_link" data-node-type="text" data-node-default="#">
           <span class="ml-1"> 
            <span data-node="p2_btn_text" data-node-type="text" data-node-default="Learn More">
          {{p2_btn_text}}
            </span>
             &raquo;</span>
        </a>
      </div>

      <!-- Product 3 -->
      <div class="flex flex-col items-center text-center p-6 border-t-2 border-yellow-400 bg-white hover:shadow-xl transition-shadow duration-300 h-full">
        <div class="h-32 mb-6 flex items-center justify-center">
          <img src="{{p3_img}}" alt="Product" class="h-full object-contain" data-node="p3_img" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046138/seltrix/templates/home-appliances-template/coffee-icon.png">
        </div>
        <h3 class="text-lg font-bold text-gray-900 mb-3" data-node="p3_title" data-node-type="text" data-node-default="Coffee Machine">{{p3_title}}</h3>
        <p class="text-sm text-gray-600 mb-4 leading-relaxed" data-node="p3_desc" data-node-type="textarea" data-node-default="Brew café-style coffee at home effortlessly.">{{p3_desc}}</p>
        <a href="{{p3_link}}" class="text-blue-900 font-semibold text-sm mt-auto inline-flex items-center hover:underline" data-node="p3_link" data-node-type="text" data-node-default="#">
           <span class="ml-1"> 
            <span data-node="p3_btn_text" data-node-type="text" data-node-default="Learn More">
          {{p3_btn_text}}
            </span>
             &raquo;</span>
        </a>
      </div>

      <!-- Product 4 -->
      <div class="flex flex-col items-center text-center p-6 border-t-2 border-yellow-400 bg-white hover:shadow-xl transition-shadow duration-300 h-full">
        <div class="h-32 mb-6 flex items-center justify-center">
          <img src="{{p4_img}}" alt="Product" class="h-full object-contain" data-node="p4_img" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046222/seltrix/templates/home-appliances-template/tv-icon.png">
        </div>
        <h3 class="text-lg font-bold text-gray-900 mb-3" data-node="p4_title" data-node-type="text" data-node-default="Television">{{p4_title}}</h3>
        <p class="text-sm text-gray-600 mb-4 leading-relaxed" data-node="p4_desc" data-node-type="textarea" data-node-default="Ultra-clear visuals crafted for immersive entertainment.">{{p4_desc}}</p>
        <a href="{{p4_link}}" class="text-blue-900 font-semibold text-sm mt-auto inline-flex items-center hover:underline" data-node="p4_link" data-node-type="text" data-node-default="#">
           <span class="ml-1"> 
            <span data-node="p4_btn_text" data-node-type="text" data-node-default="Learn More">
          {{p4_btn_text}}
            </span>
             &raquo;</span>
        </a>
      </div>

      <!-- Product 5 -->
      <div class="flex flex-col items-center text-center p-6 border-t-2 border-yellow-400 bg-white hover:shadow-xl transition-shadow duration-300 h-full">
        <div class="h-32 mb-6 flex items-center justify-center">
          <img src="{{p5_img}}" alt="Product" class="h-full object-contain" data-node="p5_img" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046166/seltrix/templates/home-appliances-template/img-fan.png">
        </div>
        <h3 class="text-lg font-bold text-gray-900 mb-3" data-node="p5_title" data-node-type="text" data-node-default="Fan">{{p5_title}}</h3>
        <p class="text-sm text-gray-600 mb-4 leading-relaxed" data-node="p5_desc" data-node-type="textarea" data-node-default="Strong airflow with low energy consumption.">{{p5_desc}}</p>
        <a href="{{p5_link}}" class="text-blue-900 font-semibold text-sm mt-auto inline-flex items-center hover:underline" data-node="p5_link" data-node-type="text" data-node-default="#">
           <span class="ml-1"> 
            <span data-node="p5_btn_text" data-node-type="text" data-node-default="Learn More">
          {{p5_btn_text}}
            </span>
             &raquo;</span>
        </a>
      </div>

      <!-- Product 6 -->
      <div class="flex flex-col items-center text-center p-6 border-t-2 border-yellow-400 bg-white hover:shadow-xl transition-shadow duration-300 h-full">
        <div class="h-32 mb-6 flex items-center justify-center">
          <img src="{{p6_img}}" alt="Product" class="h-full object-contain" data-node="p6_img" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046165/seltrix/templates/home-appliances-template/img-dryer.png">
        </div>
        <h3 class="text-lg font-bold text-gray-900 mb-3" data-node="p6_title" data-node-type="text" data-node-default="Personal Grooming">{{p6_title}}</h3>
        <p class="text-sm text-gray-600 mb-4 leading-relaxed" data-node="p6_desc" data-node-type="textarea" data-node-default="High-performance tools for effortless self-care.">{{p6_desc}}</p>
        <a href="{{p6_link}}" class="text-blue-900 font-semibold text-sm mt-auto inline-flex items-center hover:underline" data-node="p6_link" data-node-type="text" data-node-default="#">
           <span class="ml-1"> 
            <span data-node="p6_btn_text" data-node-type="text" data-node-default="Learn More">
          {{p6_btn_text}}
            </span>
             &raquo;</span>
        </a>
      </div>

      <!-- Product 7 -->
      <div class="flex flex-col items-center text-center p-6 border-t-2 border-yellow-400 bg-white hover:shadow-xl transition-shadow duration-300 h-full">
        <div class="h-32 mb-6 flex items-center justify-center">
          <img src="{{p7_img}}" alt="Product" class="h-full object-contain" data-node="p7_img" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046163/seltrix/templates/home-appliances-template/img-ac.png">
        </div>
        <h3 class="text-lg font-bold text-gray-900 mb-3" data-node="p7_title" data-node-type="text" data-node-default="Air Conditioners">{{p7_title}}</h3>
        <p class="text-sm text-gray-600 mb-4 leading-relaxed" data-node="p7_desc" data-node-type="textarea" data-node-default="Powerful cooling tailored for Indian climates.">{{p7_desc}}</p>
        <a href="{{p7_link}}" class="text-blue-900 font-semibold text-sm mt-auto inline-flex items-center hover:underline" data-node="p7_link" data-node-type="text" data-node-default="#">
           <span class="ml-1"> 
            <span data-node="p7_btn_text" data-node-type="text" data-node-default="Learn More">
          {{p7_btn_text}}
            </span>
             &raquo;</span>
        </a>
      </div>

      <!-- Product 8 -->
      <div class="flex flex-col items-center text-center p-6 border-t-2 border-yellow-400 bg-white hover:shadow-xl transition-shadow duration-300 h-full">
        <div class="h-32 mb-6 flex items-center justify-center">
          <img src="{{p8_img}}" alt="Product" class="h-full object-contain" data-node="p8_img" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046164/seltrix/templates/home-appliances-template/img-dishwasher.png">
        </div>
        <h3 class="text-lg font-bold text-gray-900 mb-3" data-node="p8_title" data-node-type="text" data-node-default="Dishwasher">{{p8_title}}</h3>
        <p class="text-sm text-gray-600 mb-4 leading-relaxed" data-node="p8_desc" data-node-type="textarea" data-node-default="Deep-cleaning cycles that manage heavy Indian cookware.">{{p8_desc}}</p>
        <a href="{{p8_link}}" class="text-blue-900 font-semibold text-sm mt-auto inline-flex items-center hover:underline" data-node="p8_link" data-node-type="text" data-node-default="#">
           <span class="ml-1"> 
            <span data-node="p8_btn_text" data-node-type="text" data-node-default="Learn More">
          {{p8_btn_text}}
            </span>
             &raquo;</span>
        </a>
      </div>




        <!-- Product 9 -->
      <div class="flex flex-col items-center text-center p-6 border-t-2 border-yellow-400 bg-white hover:shadow-xl transition-shadow duration-300 h-full">
        <div class="h-32 mb-6 flex items-center justify-center">
          <img src="{{p9_img}}" alt="Product" class="h-full object-contain" data-node="p9_img" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046207/seltrix/templates/home-appliances-template/Ricecooker.png">
        </div>
        <h3 class="text-lg font-bold text-gray-900 mb-3" data-node="p9_title" data-node-type="text" data-node-default="Rice Cooker">{{p9_title}}</h3>
        <p class="text-sm text-gray-600 mb-4 leading-relaxed" data-node="p9_desc" data-node-type="textarea" data-node-default="One-touch cooking with consistent results. Perfect for daily meals and more.">{{p9_desc}}</p>
        <a href="{{p9_link}}" class="text-blue-900 font-semibold text-sm mt-auto inline-flex items-center hover:underline" data-node="p9_link" data-node-type="text" data-node-default="#">
           <span class="ml-1"> 
            <span data-node="p9_btn_text" data-node-type="text" data-node-default="Learn More">
          {{p9_btn_text}}
            </span>
             &raquo;</span>
        </a>
      </div>

      <!-- Product 10 -->
      <div class="flex flex-col items-center text-center p-6 border-t-2 border-yellow-400 bg-white hover:shadow-xl transition-shadow duration-300 h-full">
        <div class="h-32 mb-6 flex items-center justify-center">
          <img src="{{p10_img}}" alt="Product" class="h-full object-contain" data-node="p10_img" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046225/seltrix/templates/home-appliances-template/Vacuum-cleaner.png">
        </div>
        <h3 class="text-lg font-bold text-gray-900 mb-3" data-node="p10_title" data-node-type="text" data-node-default="Water Heater">{{p10_title}}</h3>
        <p class="text-sm text-gray-600 mb-4 leading-relaxed" data-node="p10_desc" data-node-type="textarea" data-node-default="Safe, instant heating for quick daily showers. Built for efficiency and long-lasting performance.">{{p10_desc}}</p>
        <a href="{{p10_link}}" class="text-blue-900 font-semibold text-sm mt-auto inline-flex items-center hover:underline" data-node="p10_link" data-node-type="text" data-node-default="#">
           <span class="ml-1"> 
            <span data-node="p10_btn_text" data-node-type="text" data-node-default="Learn More">
          {{p10_btn_text}}
            </span>
             &raquo;</span>
        </a>
      </div>

      <!-- Product 11 -->
      <div class="flex flex-col items-center text-center p-6 border-t-2 border-yellow-400 bg-white hover:shadow-xl transition-shadow duration-300 h-full">
        <div class="h-32 mb-6 flex items-center justify-center">
          <img src="{{p11_img}}" alt="Product" class="h-full object-contain" data-node="p11_img" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046220/seltrix/templates/home-appliances-template/Toaster.png">
        </div>
        <h3 class="text-lg font-bold text-gray-900 mb-3" data-node="p11_title" data-node-type="text" data-node-default="Water Dispenser">{{p11_title}}</h3>
        <p class="text-sm text-gray-600 mb-4 leading-relaxed" data-node="p11_desc" data-node-type="textarea" data-node-default="Delivers hot, cold, and room-temperature water instantly. Ideal for homes, offices, and shared spaces.">{{p11_desc}}</p>
        <a href="{{p11_link}}" class="text-blue-900 font-semibold text-sm mt-auto inline-flex items-center hover:underline" data-node="p11_link" data-node-type="text" data-node-default="#">
           <span class="ml-1"> 
            <span data-node="p11_btn_text" data-node-type="text" data-node-default="Learn More">
          {{p11_btn_text}}
            </span>
             &raquo;</span>
        </a>
      </div>

      <!-- Product 12 -->
      <div class="flex flex-col items-center text-center p-6 border-t-2 border-yellow-400 bg-white hover:shadow-xl transition-shadow duration-300 h-full">
        <div class="h-32 mb-6 flex items-center justify-center">
          <img src="{{p12_img}}" alt="Product" class="h-full object-contain" data-node="p12_img" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046129/seltrix/templates/home-appliances-template/Blender.jpg">
        </div>
        <h3 class="text-lg font-bold text-gray-900 mb-3" data-node="p12_title" data-node-type="text" data-node-default="Blender">{{p12_title}}</h3>
        <p class="text-sm text-gray-600 mb-4 leading-relaxed" data-node="p12_desc" data-node-type="textarea" data-node-default="Smooth blending for shakes, spices, sauces, and more. Powerful motors built to handle.">{{p12_desc}}</p>
        <a href="{{p12_link}}" class="text-blue-900 font-semibold text-sm mt-auto inline-flex items-center hover:underline" data-node="p12_link" data-node-type="text" data-node-default="#">
           <span class="ml-1"> 
            <span data-node="p12_btn_text" data-node-type="text" data-node-default="Learn More">
          {{p12_btn_text}}
            </span>
             &raquo;</span>
        </a>
      </div>

    </div>
  </div>
</section>