# POS — New modifier modal

Two interactive prototypes of the modifier modal (**900×700**, built 1:1 from the supplied Figma
export). Same modal, toggled by a single `HAS_SEGMENT` flag at the top of each file.

## Variants

- **a-with-segment** — `HAS_SEGMENT = true`. Multiple products: SegmentedControl tabs
  (Sandwich 1–4) at the top of step 1, and the left panel lists every product (Sandwich 1 + 2…).
- **b-single-product** — `HAS_SEGMENT = false`. **Single product:** no segment tabs, and the left
  panel shows only the one product's composition. This is the layout used when the order has just
  one configurable product.

Everything else is identical between the two (header, modifier groups, product cards, step 2,
footer). See [pos-modifier-modal](../modifier-modal/spec.md) for the full component/token spec.

## Structure (both)

- Header 56 navy · left ingredient panel 320 + Total bar 60 · right panel (step 1 / step 2) + footer 80.
- Step 1: (segment) + Protein/Pendir əlavə et (green) · Sous çıxar (red) groups of 176×100 cards.
- Step 2: Porsiya input + chips · Aksiz kod · Say stepper + numpad (empty ◌ / 0 / ⌫).

## Status

`in-progress` — `variants/a-with-segment.html`, `variants/b-single-product.html`.