/* Purpose of an item (purpose.js): the tile on the item card, the dialog and the first step of «Новый товар». Loaded after styles.css. */
.pu-sec { margin-top: var(--s2); }
.pu-sec .fgrid { display: block; } /* one wide tile: whatever grid the card layout gives .fgrid, this one is a single full-width box */
.fact.purpose { gap: 6px; }
.fact.purpose .pu-line { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.fact.purpose .fv { font-size: 22px; }
.fact.purpose .pu-line .btn { flex: none; width: auto; }
.fact.purpose .pu-who { font-size: var(--fs-md); color: var(--fg); text-decoration: none; overflow-wrap: anywhere; }
.fact.purpose a.pu-who:hover b { text-decoration: underline; }
.fact.purpose .bad { color: var(--bad); font-weight: 600; }
.fact.purpose small { font-size: var(--fs-xs); }
.fact.purpose.unset { border-color: var(--warn); background: var(--warn-bg); }
.fact.purpose.sold { border-color: var(--ok); }
.pu-chooser { display: grid; gap: var(--s3); }
.pu-chooser .note { margin: 0; }
.pu-chooser .note.err { color: var(--bad); }
.pu-pick { display: grid; gap: var(--s2); }
.pu-pick .fld { margin: 0; }
.pu-modal .row { display: flex; gap: var(--s2); }
.pu-modal .row > * { flex: 1 1 0; }
.fact.purpose .pu-wait { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.fact.purpose .pu-conv .btn { width: auto; }
.pu-bare { display: grid; gap: 6px; }
.pu-bare .pu-line { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.pu-bare .fv { font-size: 22px; }
.pu-bare .pu-wait { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.pu-bare small { font-size: var(--fs-xs); }