{*
 * MÉRIDIAN — Carrousel produits (home)
 * Réutilise la miniature du thème (.pcard). Navigation/drag : meridian.js.
 * Données : $products[], $title
 *}
{if $products}
<section class="mrd-section">
  <div class="mrd-container">
    <div class="mrd-carousel">
      <div class="mrd-carousel-head reveal">
        <h2 class="display">{$title}</h2>
      </div>
      <div class="mrd-carousel-viewport">
        <div class="mrd-carousel-track noscroll">
          {foreach from=$products item=product}
            {include file='catalog/_partials/miniatures/product.tpl' product=$product}
          {/foreach}
        </div>
        {if count($products) > 4}
          <button class="mrd-carousel-btn prev" type="button" aria-label="{l s='Précédent' d='Shop.Theme.Actions'}">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M19 12H5M11 6l-6 6 6 6"/></svg>
          </button>
          <button class="mrd-carousel-btn next" type="button" aria-label="{l s='Suivant' d='Shop.Theme.Actions'}">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </button>
        {/if}
      </div>
    </div>
  </div>
</section>
{/if}
