{* Карточка товара с расширенной hover-панелью.
   Ожидает поля от [products ...] напрямую: {id}, {title}, {url}, {cover}, {price}, {price_fmt},
   {old_price}, {old_price_fmt}, {short}, {sku}, {stock}.
   Бейджи скидки/бонусов/частин — рассчитываются JS из data-* (см. theme.js → ProductCardPricing).
*}
<article class="cm-product"
  data-cm-product
  data-id="{id}"
  data-price="{price}"
  data-old-price="{old_price}"
  data-stock="{stock}"
  data-url="{url}"
  data-cover="{cover}"
  data-product-options="{options_json}"
  data-product-variations="{variations_json}"
  data-has-variations="{has_variations}">

  <div class="cm-product-badges">
    <span class="cm-badge cm-badge--crown">{icon name="sparkles" size="12"} Кращ</span>
    [if {old_price}]<span class="cm-badge cm-badge--discount" data-cm-discount-badge>—</span>[/if]
  </div>

  <div class="cm-product-actions">
    <button type="button" class="cm-product-act" data-cm-fav="{id}" aria-label="В обране">
      {icon name="heart" size="18"}
    </button>
    <button type="button" class="cm-product-act" data-cm-compare="{id}" aria-label="До порівняння">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
    </button>
  </div>

  <a class="cm-product-image" href="{url}" tabindex="-1">
    [if {cover}]
      <img src="{cover|medium}" alt="{title}" loading="lazy" class="cm-product-image__img">
    [else]
      <div class="cm-product-noimg">{icon name="image" size="56"}</div>
    [/if]
  </a>

  <div class="cm-product-body">
    <h3 class="cm-product-title"><a href="{url}">{title}</a></h3>

    <div class="cm-product-rating">
      <span class="cm-stars" data-cm-rating-stars>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
        <span data-cm-rating-value>4.6</span>
      </span>
      <span class="cm-product-reviews">
        {icon name="message_circle" size="14"} <span data-cm-reviews-value>—</span>
      </span>
    </div>

    <div class="cm-product-buy">
      <div class="cm-product-prices">
        [if {old_price_fmt}]<span class="cm-price-old">{old_price_fmt} ₴</span>[/if]
        <span class="cm-price-now" data-cm-price-now>{price_fmt} ₴</span>
      </div>
      <button type="button" class="cm-btn-cart"
        data-add-to-cart="1"
        data-pid="{id}"
        data-ptitle="{title}"
        data-pprice="{price}"
        data-pcover="{cover}"
        data-psku="{sku}"
        aria-label="Додати в кошик">
        {icon name="cart" size="20"}
        <span class="cm-btn-cart__label">Купити</span>
      </button>
    </div>

    [if {has_variations}]
      <div class="cm-variation-options cm-variation-options--mini" data-cm-variation-options-mini></div>
    [else]
      [if {specs}]
        <ul class="cm-product-specs-list">
          [foreach var="specs" as="s"]
            <li>
              <span class="cm-product-specs-list__label">{s.label}:</span>
              <span class="cm-product-specs-list__value">{s.value}</span>
            </li>
          [/foreach]
        </ul>
      [else]
        <ul class="cm-product-perks">
          <li>{icon name="check" size="14"} В наявності</li>
          <li>{icon name="check" size="14"} Офіційна гарантія</li>
          <li>{icon name="check" size="14"} Швидка доставка</li>
        </ul>
      [/if]
    [/if]
  </div>

  <div class="cm-product-hover" data-cm-hover aria-hidden="true">
    <div class="cm-product-hover__inner">
      <div class="cm-product-hover__top">
        <span class="cm-product-hover__code">Код: <b>{id}</b></span>
        [if {sku}]<span class="cm-product-hover__sku">{sku}</span>[/if]
      </div>

      <div class="cm-product-actions cm-product-actions--hover">
        <button type="button" class="cm-product-act" data-cm-fav="{id}" aria-label="В обране">{icon name="heart" size="18"}</button>
        <button type="button" class="cm-product-act" data-cm-compare="{id}" aria-label="До порівняння">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
        </button>
      </div>

      <a class="cm-product-hover__image" href="{url}">
        [if {cover}]<img src="{cover|large}" alt="{title}">[/if]
      </a>

      <div class="cm-product-hover__nav" aria-hidden="true">
        <span class="cm-product-hover__dot is-active"></span>
        <span class="cm-product-hover__dot"></span>
      </div>

      <div class="cm-product-hover__title">
        <div class="cm-product-badges">
          <span class="cm-badge cm-badge--crown">{icon name="sparkles" size="12"} Кращ</span>
          <a href="{url}" class="cm-product-hover__name">{title}</a>
        </div>
        <div class="cm-product-rating">
          <span class="cm-stars">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
            <span>4.7</span>
          </span>
          <span class="cm-product-reviews">{icon name="message_circle" size="14"} 68</span>
        </div>
      </div>

      <div class="cm-product-prices cm-product-prices--big">
        [if {old_price_fmt}]
          <div class="cm-price-old-row">
            <span class="cm-price-old" data-cm-price-old>{old_price_fmt} ₴</span>
            <span class="cm-price-discount" data-cm-discount-text>—</span>
          </div>
        [/if]
        <div class="cm-price-now-big" data-cm-price-now-big>{price_fmt} ₴</div>
      </div>

      <div class="cm-product-installment">
        <span class="cm-installment-ico" aria-hidden="true">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="6" width="20" height="12" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>
        </span>
        Частинами від <b data-cm-installment>—</b> ₴/міс.
      </div>

      {* Селекторы вариаций — JS заполнит при наличии options/variations *}
      <div class="cm-variation-options" data-cm-variation-options></div>

      [if {specs}]
        <ul class="cm-product-specs-list">
          [foreach var="specs" as="s"]
            <li>
              <span class="cm-product-specs-list__label">{s.label}:</span>
              <span class="cm-product-specs-list__value">{s.value}</span>
            </li>
          [/foreach]
        </ul>
      [/if]

      [if {short}]<div class="cm-product-specs">{short}</div>[/if]

      <p class="cm-product-out" data-cm-out hidden>Комбінація недоступна</p>

      <div class="cm-product-hover__actions">
        <button type="button" class="cm-btn cm-btn--primary cm-btn--block"
          data-add-to-cart="1"
          data-cm-cart-btn
          data-pid="{id}"
          data-ptitle="{title}"
          data-pprice="{price}"
          data-pcover="{cover}"
          data-psku="{sku}">
          {icon name="cart" size="18"}
          <span data-cm-cart-label>Купити</span>
        </button>
      </div>
    </div>
  </div>
</article>
