# POS — Modifier modal

Two-step product modifier modal, built **1:1 from the supplied Figma export**
(`Modifier modal - Design Spec.md` + `styles.css` + `app.jsx`). React + Babel inlined into the
single `variants/a-modifier.html` so it renders over `file://` and the static server.
**900×700** modal, centred on a dimmed backdrop (overlay `rgba(109,109,109,.6)`).

## Layout

- **Header** 900×56 — navy `#35325E`, title + close.
- **Left panel** 320 (grey-200 border) — scroll (metal-grey-100, pad 16): Sandwich 1 ingredient
  rows + divider + Sandwich 2; **Total bar** 60 (Primary-600 `#2B7DD3`). Mirrors selections:
  added → green dot/name + `Nx`; removed → struck name + `Çıxarıldı` chip.
- **Right panel** 580 — content (white, pad 16, scroll) + footer 80.

## Steps (2)

1. **Modifiers** — SegmentedControl tabs (Sandwich 1–4) + three groups: **Protein əlavə et** /
   **Pendir əlavə et** (green) and **Sous çıxar** (red), each a row of product cards.
2. **Portion & quantity** — Porsiya input (56h) + portion chips (36h) · Aksiz kod input (56h) ·
   Say stepper (58h, slate − / primary +) + numpad (3×4, delete key `#181818`).

## Product card — 176×100, radius 4

- Default: fill metal-grey-300 `#F2F4F5`, stroke grey-300, dark label, empty selection circle ◿.
- Image card: photo + 40% black overlay, white label/circle.
- Selected (add): green border + add-tint fill, green count badge ◿, red `−` button (top-right, half-out).
- Selected (remove): red border + remove-tint fill, red check badge.
- Badges (h24): Price `+4 ₼` navy top-right ◹ · Limit `55` coral bottom-left ◺.

## Interactions

- Tap add-card → select (count 1); tap again → increment; `−` decrements / deselects.
- Tap remove-card → marks removed (red check) + greys & strikes the matching ingredient.
- Next → step 2 · Back → step 1 · Cancel/Close resets.

## Status

`in-progress` — `variants/a-modifier.html` (verbatim copy of the Figma export, POS terminal
background omitted).