{* Карточка товара для контекста [foreach var="products" as="p"] — все поля с префиксом p.*.
   Используется на странице категории, где данные приходят из ShopController через
   обычную переменную (а не из тега [products]). По возможностям совпадает с
   product_card.tpl. *}
<article class="cm-product"
  data-cm-product
  data-id="{p.id}"
  data-price="{p.price}"
  data-old-price="{p.old_price}"
  data-stock="{p.stock}"
  data-url="{p.url}"
  data-cover="{p.cover}"
  data-product-options="{p.options_json}"
  data-product-variations="{p.variations_json}"
  data-has-variations="{p.has_variations}">

  <div class="cm-product-badges">
    <span class="cm-badge cm-badge--crown">{icon name="sparkles" size="12"} Кращ</span>
    [if {p.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="{p.id}" aria-label="В обране">
      {icon name="heart" size="18"}
    </button>
    <button type="button" class="cm-product-act" data-cm-compare="{p.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="{p.url}" tabindex="-1">
    [if {p.cover}]
      <img src="{p.cover|medium}" alt="{p.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="{p.url}">{p.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 {p.old_price_fmt}]<span class="cm-price-old">{p.old_price_fmt} ₴</span>[/if]
        <span class="cm-price-now" data-cm-price-now>{p.price_fmt} ₴</span>
      </div>
      <button type="button" class="cm-btn-cart"
        data-add-to-cart="1"
        data-pid="{p.id}"
        data-ptitle="{p.title}"
        data-pprice="{p.price}"
        data-pcover="{p.cover}"
        data-psku="{p.sku}"
        aria-label="Додати в кошик">
        {icon name="cart" size="20"}
        <span class="cm-btn-cart__label">Купити</span>
      </button>
    </div>

    [if {p.has_variations}]
      <div class="cm-variation-options cm-variation-options--mini" data-cm-variation-options-mini></div>
    [else]
      [if {p.specs}]
        <ul class="cm-product-specs-list">
          [foreach var="p.specs" as="s"]
            <li>
              <span class="cm-product-specs-list__label">{s.label}:</span>
              <span class="cm-product-specs-list__value">
                [if {s.images}]
                  [foreach var="s.images" as="im"]
                    <a href="{im.full}" class="cm-spec-img" target="_blank" rel="noopener"><img src="{im.thumb}" alt="" loading="lazy"></a>
                  [/foreach]
                [else]{s.value}[/if]
              </span>
            </li>
          [/foreach]
        </ul>
      [else]
        [if {p.short}]
          <div class="cm-product-info">{p.short}</div>
        [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]
    [/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>{p.id}</b></span>
        [if {p.sku}]<span class="cm-product-hover__sku">{p.sku}</span>[/if]
      </div>

      <div class="cm-product-actions cm-product-actions--hover">
        <button type="button" class="cm-product-act" data-cm-fav="{p.id}" aria-label="В обране">{icon name="heart" size="18"}</button>
      </div>

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

      <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="{p.url}" class="cm-product-hover__name">{p.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 {p.old_price_fmt}]
          <div class="cm-price-old-row">
            <span class="cm-price-old" data-cm-price-old>{p.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>{p.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 {p.specs}]
        <ul class="cm-product-specs-list">
          [foreach var="p.specs" as="s"]
            <li>
              <span class="cm-product-specs-list__label">{s.label}:</span>
              <span class="cm-product-specs-list__value">
                [if {s.images}]
                  [foreach var="s.images" as="im"]
                    <a href="{im.full}" class="cm-spec-img" target="_blank" rel="noopener"><img src="{im.thumb}" alt="" loading="lazy"></a>
                  [/foreach]
                [else]{s.value}[/if]
              </span>
            </li>
          [/foreach]
        </ul>
      [/if]

      [if {p.short}]<div class="cm-product-specs">{p.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="{p.id}"
          data-ptitle="{p.title}"
          data-pprice="{p.price}"
          data-pcover="{p.cover}"
          data-psku="{p.sku}">
          {icon name="cart" size="18"}
          <span data-cm-cart-label>Купити</span>
        </button>
      </div>
    </div>
  </div>
</article>
