/* The offer table (signature component): precio por pañal right-aligned,
   tabular and protagonist; stale rows demote to muted, never vanish.
   V1 ships the vocabulary; V2 fills the rows. */
.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
table.offers { border-collapse: collapse; width: 100%; min-width: 560px; }
.offers th {
  background: var(--surface); text-align: left;
  font-size: 0.8125rem; font-weight: 500; color: var(--muted);
  padding: 10px var(--sp-sm); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.offers th.col-num, .offers td.col-num { text-align: right; }
.offers td {
  padding: 12px var(--sp-sm); border-bottom: 1px solid var(--border);
  vertical-align: baseline; min-height: 44px;
}
.offers tbody tr:last-child td { border-bottom: none; }
.offers tbody tr { transition: background-color 150ms var(--ease-out); }
.offers tbody tr:hover { background: var(--surface); }
.offers .retailer { font-weight: 600; white-space: nowrap; }
.offers .unit-price { font-variant-numeric: tabular-nums; font-weight: 650; font-size: 1.1875rem; white-space: nowrap; }
.offers .best .unit-price { color: var(--verdict-good); }
.offers .pack { color: var(--muted); font-size: 0.875rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.offers .observed { color: var(--muted); font-size: 0.8125rem; white-space: nowrap; }
.offers tr.demoted { background: var(--surface); }
.offers tr.demoted:hover { background: var(--surface); }
.offers tr.demoted td { color: var(--muted); }
.offers tr.demoted .unit-price { color: var(--muted); font-weight: 500; }
.offers .state { font-size: 0.8125rem; color: var(--muted); white-space: normal; max-width: 16ch; }