/* Markpryse (agent E, 20-10). Alleen tokens uit styles.css. De lijn heeft één kleur: de pijl toont het dagverschil. */
.mp-sub { margin: -6px 0 6px; }
.mp-grid { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 720px) { .mp-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }
.mp-card .mp-big-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 10px; }
.mp-price { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mp-price-s { font-size: 17px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mp-chg { display: inline-block; font-size: 13px; font-weight: 600; padding: 2px 9px; border-radius: var(--radius-pill); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mp-chg.up { background: var(--green-ink); color: var(--green); }
.mp-chg.down { background: var(--surf); color: var(--low); }
.mp-chg.flat { background: var(--surf); color: var(--muted); }
.mp-spark { flex: none; display: block; }
.mp-spark path { stroke: var(--green-2); }
.mp-spark circle { fill: var(--green-2); }
.mp-list { padding: 4px 16px; }
.mp-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.mp-row:last-child { border-bottom: 0; }
.mp-row-p { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 92px; }
.mp-foot { margin-top: 18px; line-height: 1.5; }
.mp-foot a { color: inherit; text-decoration: underline; }
@media (max-width: 380px) { .mp-row .mp-spark { display: none; } .mp-price { font-size: 26px; } }

/* 20-10: eigen pryslys, zoeken, + en × */
.mp-search { position: relative; margin: 10px 0 6px; }
.mp-search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.mp-search input { width: 100%; box-sizing: border-box; padding-left: 42px; border-radius: var(--radius-pill); }
.mp-add, .mp-x { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--surf); color: var(--green); }
.mp-add svg, .mp-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mp-add.on { background: var(--green-ink); cursor: default; }
.mp-x { width: 30px; height: 30px; margin-left: 8px; color: var(--muted); background: transparent; }
.mp-x:hover { background: var(--surf); }
.mp-hint { margin-top: 10px; }
.mp-wishes { margin: 10px 0 0; line-height: 2; }
.mp-wish { display: inline-flex; align-items: center; gap: 2px; background: var(--surf); border-radius: var(--radius-pill); padding: 0 4px 0 12px; margin-right: 4px; }
.mp-wish button { border: 0; background: transparent; width: 26px; height: 26px; display: grid; place-items: center; cursor: pointer; color: var(--muted); padding: 0; }
.mp-wish svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.mp-none { display: grid; gap: 12px; margin-top: 12px; }
@media (max-width: 380px) { .mp-row-p { min-width: 78px; } }
/* telefoon: met de +-knop erbij is er geen plek voor de lijn in de rij; de grote kaarten houden hem */
@media (max-width: 480px) { .mp-row .mp-spark { display: none; } }
.mp-row .grow b { display: block; line-height: 1.25; }