{block name='product_miniature_item'}
{*
 * MÉRIDIAN — Carte produit (.pcard)
 * Utilisée en listing (grille) et carrousels home. Conserve les hooks
 * PrestaShop (flags, wishlist, prix, quickview, variantes, avis).
 *}
<article class="pcard js-product js-product-miniature" data-id-product="{$product.id_product}" data-id-product-attribute="{$product.id_product_attribute}">
  <div class="pcard-media">
    <div class="pcard-flags">{include file='catalog/_partials/product-flags.tpl'}</div>
    <div class="pcard-wish">{hook h='displayWishlistButton' product=$product}</div>

    {block name='product_thumbnail'}
      {* image de survol = 1re image différente de la cover (si dispo) *}
      {assign var=_hoverImg value=null}
      {if !empty($product.images) && ($product.images|@count > 1)}
        {foreach from=$product.images item=_img}
          {if $_hoverImg === null && (empty($product.cover) || $_img.id_image != $product.cover.id_image)}
            {assign var=_hoverImg value=$_img}
          {/if}
        {/foreach}
      {/if}
      <a href="{$product.url}" class="pcard-link" aria-label="{$product.name}">
        {if $product.cover}
          <picture class="pcard-img pcard-img-main">
            {if !empty($product.cover.bySize.home_default.sources.avif)}<source srcset="{$product.cover.bySize.home_default.sources.avif}" type="image/avif">{/if}
            {if !empty($product.cover.bySize.home_default.sources.webp)}<source srcset="{$product.cover.bySize.home_default.sources.webp}" type="image/webp">{/if}
            <img src="{$product.cover.bySize.home_default.url}"
              alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:60:''}{/if}"
              loading="lazy" data-full-size-image-url="{$product.cover.large.url}"
              width="{$product.cover.bySize.home_default.width}" height="{$product.cover.bySize.home_default.height}">
          </picture>
          {if $_hoverImg}
            <picture class="pcard-img pcard-img-hover" aria-hidden="true">
              {if !empty($_hoverImg.bySize.home_default.sources.avif)}<source srcset="{$_hoverImg.bySize.home_default.sources.avif}" type="image/avif">{/if}
              {if !empty($_hoverImg.bySize.home_default.sources.webp)}<source srcset="{$_hoverImg.bySize.home_default.sources.webp}" type="image/webp">{/if}
              <img src="{$_hoverImg.bySize.home_default.url}" alt="" loading="lazy"
                width="{$_hoverImg.bySize.home_default.width}" height="{$_hoverImg.bySize.home_default.height}">
            </picture>
          {/if}
        {else}
          <picture class="pcard-img pcard-img-main">
            {if !empty($urls.no_picture_image.bySize.home_default.sources.webp)}<source srcset="{$urls.no_picture_image.bySize.home_default.sources.webp}" type="image/webp">{/if}
            <img src="{$urls.no_picture_image.bySize.home_default.url}" alt="" loading="lazy"
              width="{$urls.no_picture_image.bySize.home_default.width}" height="{$urls.no_picture_image.bySize.home_default.height}">
          </picture>
        {/if}
      </a>
    {/block}

    {if $catalogue[0]->show == true}
      <a class="pcard-qa quick-view js-quick-view" href="#" data-link-action="quickview">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
        {l s='Aperçu' d='Shop.Theme.Actions'}
      </a>
    {/if}
  </div>

  {* Pastilles de couleur AU-DESSUS du titre et du prix *}
  {block name='product_variants'}
    {if $catalogue[0]->color == true && $product.main_variants}
      {include file='catalog/_partials/variant-links.tpl' variants=$product.main_variants}
    {/if}
  {/block}

  {* marque AU-DESSUS du titre ET du prix (sauf si les pastilles couleur sont affichées) *}
  {if !($catalogue[0]->color && $product.main_variants) && $product.manufacturer_name}
    <div class="pcard-sub eyebrow">{$product.manufacturer_name}</div>
  {/if}

  {* titre + prix sur la MÊME ligne *}
  <div class="pcard-meta">
    {block name='product_name'}
      {if $page.page_name == 'index'}
        <h3 class="pcard-name"><a href="{$product.url}">{$product.name|truncate:42:'…'}</a></h3>
      {else}
        <h2 class="pcard-name"><a href="{$product.url}">{$product.name|truncate:42:'…'}</a></h2>
      {/if}
    {/block}

    {block name='product_price_and_shipping'}
      {if $product.show_price}
        <div class="pcard-price product-price-and-shipping">
          {hook h='displayProductPriceBlock' product=$product type="before_price"}
          {if $product.has_discount}
            {hook h='displayProductPriceBlock' product=$product type="old_price"}
            <span class="old regular-price">{$product.regular_price}</span>
          {/if}
          {capture name='custom_price'}{hook h='displayProductPriceBlock' product=$product type='custom_price' hook_origin='products_list'}{/capture}
          <span class="now price {if $product.has_discount}is-sale{/if}">{if '' !== $smarty.capture.custom_price}{$smarty.capture.custom_price nofilter}{else}{$product.price}{/if}</span>
          {hook h='displayProductPriceBlock' product=$product type='unit_price'}
        </div>
      {/if}
    {/block}
  </div>

  {block name='product_reviews'}{hook h='displayProductListReviews' product=$product}{/block}
</article>
{/block}
