<% const isWish = typeof wishlistIds !== 'undefined' && wishlistIds && wishlistIds.includes(p.id); const noPrice = p.price == null || p.price <= 0; %>
<% const gm = typeof galleryMap !== 'undefined' && galleryMap ? galleryMap : {}; %>
<% const gi = gm[p.id] || []; %>
<% const allImages = [{ image: p.image, alt: p.name }].concat(gi.map(g => ({ image: g.image, alt: g.alt || p.name }))); %>
<% const uniqueImages = allImages.filter((img, i, arr) => arr.findIndex(x => x.image === img.image) === i); %>
<article class="product-card" data-gallery='<%= JSON.stringify(uniqueImages.map(i => ({ src: "/public/images/products/" + i.image, alt: i.alt }))) %>'>
  <div class="product-media">
    <a href="/product/<%= p.slug %>">
      <img src="/public/images/products/<%= p.image %>" alt="<%= p.name %>" loading="lazy">
    </a>
    <div class="product-badge">
      <% if (p.compare_at_price && p.price && p.compare_at_price > p.price) { %>
        <span class="pill pill-gold"><%= Math.round((1 - p.price / p.compare_at_price) * 100) %>% OFF</span>
      <% } %>
      <% if (p.stock <= 0 && p.price) { %><span class="pill pill-red">Sold out</span><% } %>
    </div>
    <button class="wish-btn <%= isWish ? 'active' : '' %>" data-id="<%= p.id %>" data-slug="<%= p.slug %>" aria-label="Add to wishlist"><i class="ic" data-ic="heart"></i></button>
  </div>
  <div class="product-body">
    <div class="product-cat"><%= p.category_name || 'New Drop' %></div>
    <h3 class="product-name"><a href="/product/<%= p.slug %>"><%= p.name %></a></h3>
    <div class="product-price">
      <% if (noPrice) { %>
        <span class="price-request">Price on request</span>
      <% } else { %>
        <span class="price"><%= money(p.price) %></span>
        <% if (p.compare_at_price && p.compare_at_price > p.price) { %><span class="price-compare"><%= money(p.compare_at_price) %></span><% } %>
      <% } %>
    </div>
    <div class="product-cta">
      <% if (noPrice) { %>
        <a class="btn btn-dark btn-sm" href="https://wa.me/<%= site.whatsapp %>?text=Hi%20TOUS%20CINO%2C%20I%27m%20interested%20in%20%22<%= encodeURIComponent(p.name) %>%22.%20Please%20share%20the%20price." target="_blank" rel="noopener"><i class="ic" data-ic="whatsapp"></i> Ask price</a>
      <% } else if (p.stock > 0) { %>
        <% if (p.sizes && p.size_type !== 'none') { %>
          <a class="btn btn-gold btn-sm" href="/product/<%= p.slug %>"><i class="ic" data-ic="cart"></i> Select size</a>
        <% } else { %>
          <button class="btn btn-gold btn-sm add-to-cart" data-slug="<%= p.slug %>"><i class="ic" data-ic="cart"></i> Add</button>
        <% } %>
        <a class="btn btn-dark btn-sm" href="/product/<%= p.slug %>" aria-label="View <%= p.name %>">View</a>
      <% } else { %>
        <a class="btn btn-outline btn-sm disabled" href="/product/<%= p.slug %>">Sold out</a>
      <% } %>
    </div>
  </div>
</article>
