/* Mes peintures — the shelf: its headings, the brand · range line the hue
   reading adds to a tile, the dashed tiles of the catalogue group, and the
   empty collection's invitation. The search row and the tiles themselves are
   shared with the catalogue (browse.css). */

/* the bar sheds what an empty shelf has no use for */
.bar .search[hidden],.bar .seg[hidden]{display:none}
.seg{flex:0 0 auto}

/* ---------- headings ---------- */
/* every group says the same two things, whatever the reading: a name, and how
   many pots are under it */
.grp{margin:0 0 18px}
.bhead{
  display:flex;align-items:center;gap:8px;margin:0 0 9px;padding-bottom:5px;
  font-size:13.5px;font-weight:650;letter-spacing:-.01em;border-bottom:1px solid var(--line);
}
.rhead{display:flex;align-items:center;gap:6px;margin:12px 0 8px}
.bhead .n,.rhead .n{
  font-size:11px;font-weight:550;letter-spacing:0;text-transform:none;
  color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.bhead .dot{width:12px;height:12px;border-radius:4px}

/* ---------- a tile in the hue reading, and in the catalogue group ---------- */
.meta .bx{font-size:11px;line-height:1.3;color:var(--ink-3)}
/* not mine yet: the dashed border the app already uses for a paint it cannot
   vouch for — one tap opens the card, where « J'ai » brings it in */
.card.notmine{border-style:dashed;border-color:var(--ink-3);background:none}

/* ---------- the catalogue group under a search ---------- */
.grp.cat{margin-top:22px;padding-top:4px}
.narrow{margin:10px 0 0}
.seeall{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:10px;min-height:var(--ctl-h);
  font-size:14px;font-weight:600;color:var(--accent);text-decoration:none;
}
.seeall:hover{text-decoration:underline;text-underline-offset:3px}
.shelfnote{margin:0 0 4px}

/* ---------- nothing marked yet ---------- */
.empty .ico{display:block;color:var(--ink-3);opacity:.5;margin-bottom:10px}

/* ---------- what is left to buy ---------- */
/* the shopping list is its own object: one line per pot, the two gestures
   that close it at the far end. The oath pages have a paints list of their
   own (project-view.css) — it carries badges and a palette pin instead, and
   drops the brand on a phone, which a shopping list must not do. */
.grp.buy{margin-top:26px}
.buylink{color:var(--accent);font-weight:600}
/* a list wants a measure: the tiles above may take the whole width, a line
   of text read left to right may not */
.buylist,.buytotal{max-width:720px}
.buylist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
.buyrow{
  display:flex;gap:9px;align-items:center;font-size:14px;cursor:pointer;
  min-height:44px;padding:5px 8px;margin:0 -8px;border-radius:var(--radius-s);
}
@media (hover:hover){ .buyrow:hover{background:var(--panel-2)} }
.buyrow .dot{width:16px;height:16px}
/* one pot, one line: the name is what gives way rather than wrapping, and
   the price rides with the brand rather than taking a column of its own */
.buym{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:1px}
.buym .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:560}
.buyrow .btn{flex:none;padding:0 10px;min-height:34px;font-size:13px}
.buyx{width:34px;height:34px;flex:none;color:var(--ink-3)}
.buytotal{margin:12px 0 0;padding-top:9px;border-top:1px solid var(--line);font-size:13.5px}
.buytotal b{font-variant-numeric:tabular-nums}
.buymiss{color:var(--ink-3);font-size:12.5px}

@media (max-width:600px){
  .buyrow{gap:8px;padding:6px 6px;margin:0 -6px}
}
/* a tile of the catalogue group already on the shopping list */
.card .vbadge{align-self:flex-start;margin-top:2px}