# Zavod — Native product card anatomy

**Source:** `https://zavodshop.com.ua/godynnyky/cholovichi` (men's watches listing) — sample card: `CITIZEN CA7060-88L`
**Date extracted:** 2026-05-14
**Screenshot:** see `themes/zavod/screenshots/` *(захвачены inline в Chrome MCP, см. MANIFEST.md для path-attribution)*

---

## DOM skeleton

```html
<div class="product-thumb">
  <div class="image-group">
    <div class="image">
      <!-- Quickview overlay (revealed on hover) -->
      <div class="quickview-button">
        <a class="btn btn-quickview">
          <span class="btn-text">Quickview</span>
        </a>
      </div>
      <!-- Two-image swap on hover -->
      <a class="product-img has-second-image">
        <img class="img-responsive img-first lazyload lazyloaded" />
        <img class="img-responsive img-second lazyload lazyloaded" />
      </a>
      <!-- Promotional badges (overlaid top-left of image) -->
      <div class="product-labels">
        <span class="product-label product-label-default product-label-group">
          <strong></strong>
        </span>
      </div>
    </div>
    <div class="product-labels-outside"></div>
  </div>
  <div class="caption">
    <div class="stats">
      <div class="stats-group">
        <span class="stat-1">
          <span class="stats-label">Model:</span>
          <span>CITIZEN CA7060-88L</span>
        </span>
        <span class="stat-2">
          <span class="stats-label">Brand:</span>
          <a>CITIZEN</a>
        </span>
      </div>
    </div>
    <div class="name">
      <a>Годинник CITIZEN CA7060-88L</a>
    </div>
    <div class="description">Існують речі, я...</div>  <!-- скрыто по умолчанию, всплывает на hover -->
  </div>
</div>
```

---

## Layout

- **Card container:** **NO** background, **NO** border, **NO** shadow, **NO** border-radius. Карточки разделены **только whitespace** — это ключ к минималистичной эстетике Завода.
- **Image area** (top, full-width):
  - Hover effect #1 — **image swap** (`img-first` → `img-second`, второй ракурс/деталь товара)
  - Hover effect #2 — **Quickview overlay** (чёрная кнопка появляется по центру поверх изображения, текст «Quickview»)
  - **Badges** (`.product-labels`) — наложены top-left изображения. Filled pill, `border-radius: 20px` — **ЕДИНСТВЕННЫЙ округлый элемент на сайте**
- **Caption area** (под изображением, текстовый блок):
  - **Stats group** (вверху) — пары `Model: X` / `Brand: Y`. Метка-лейбл серым (text-muted), значение тёмным
  - **Name** — название товара (h2-уровня по семантике, но визуально 16px regular)
  - **Brand subtitle** — мелкий серый под названием (`CITIZEN` в кейсе)
  - **Price** — крупный жирный, цвет text, валюта `₴` (UAH)
  - **Description** — скрыт по умолчанию (DOM содержит «Існують речі, я…»), вероятно reveal'ится на hover или expanded state

---

## Typography hierarchy

| Element | Token (Manu.ai) | Source value | Notes |
|---|---|---|---|
| Card title (`.name a`) | `--mn-text-card-title` | 16px / 400 / Formular | Чёрный текст |
| Brand subtitle | `--mn-text-base` muted | 14px / 400 / `--mn-color-text-muted` | Видно «CITIZEN» серым |
| Price | `--mn-text-card-price` / `--mn-weight-bold` | 20px / 700 / Formular | Чёрный |
| Stats label | `--mn-text-sm` muted | 10px / 400 | «Model:» / «Brand:» |
| Stats value | `--mn-text-sm` | 10px / 400 | bold, чёрный |
| Badge | `--mn-text-sm` / bold | small / `--mn-weight-bold` | На pill `--mn-radius-pill` |

---

## Interactions

**Hover на карточке** запускает ДВА эффекта одновременно:
1. **Image swap** — `img-first` → `img-second`
2. **Quickview overlay** — чёрная кнопка-CTA появляется на изображении

**Что НЕ происходит на hover:**
- ❌ Card lift / translateY
- ❌ Shadow change (теней нет вообще)
- ❌ Border colour change
- ❌ Background colour change

Это сознательный выбор — все интерактивные сигналы дают **изображение + overlay**, не chrome карточки.

---

## Click target

- `.product-img` (область изображения) → переход на product detail
- `.name a` (заголовок) → тот же target
- `.btn-quickview` → открывает quickview modal (НЕ переходит на детальную)

Add-to-cart **отсутствует на карточке листинга** — добавление только с продуктовой страницы.

---

## Manu.ai reproduction rules

Когда Manu.ai показывает товары Завода в ответах ассистента, карточки должны:

- ❌ НЕ иметь border-radius (sharp corners)
- ❌ НЕ иметь box-shadow (flat)
- ❌ НЕ иметь background-colour (transparent / surface)
- ✅ Поддерживать image-swap на hover ЕСЛИ есть 2+ изображения товара
- ✅ Воспроизводить Quickview overlay pattern (центральная чёрная CTA при hover)
- ✅ Иметь stats block «Model: X / Brand: Y» если данные есть
- ✅ Использовать Formular (или system-ui fallback)
- ✅ Использовать `--mn-radius-pill` (20px) для любых промо-бейджей

## Контраст с sf-ui-apm

Reference-проект `sf-ui-apm/cards-v4` строил карточки с `--sf-card-floor` background + elevated shadows + `--radius-md: 8px`. **Zavod — точно наоборот**: content-first, никакого chrome, sharp corners, NO shadows. Это два разных архетипа — наша задача всегда повторить архетип клиента, не унифицировать.