/* =============================================================
   Redesign additions — per-component layout, prisoversigt,
   component picker, distributor rows.
   Extends the existing warm B2B palette (no new tokens needed).
   ============================================================= */

/* ── Prisoversigt (cheapest-per-break) ─────────────────────────────── */
.prisoversigt .summary-head { flex-wrap: wrap; row-gap: 6px; }
.summary-title-sub {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: -0.005em;
  text-transform: none;
  margin-left: 4px;
}

.prisoversigt-table { min-width: 820px; }
.prisoversigt-table .po-col-qty     { text-align: left; width: 96px; }
.prisoversigt-table .po-col-winner  { text-align: left; min-width: 180px; }
.prisoversigt-table .po-col-comp    { text-align: left; min-width: 170px; }
.prisoversigt-table .po-col-unit    { text-align: right; min-width: 140px; }
.prisoversigt-table .po-col-total   { text-align: right; min-width: 130px; }
.prisoversigt-table .po-col-stock   { text-align: right; width: 88px; }
.prisoversigt-table .po-col-savings { text-align: right; min-width: 150px; }

.prisoversigt-table td { padding: 11px 12px; }
.po-qty { font-family: var(--mono); font-size: 0.9rem; font-weight: 700; color: var(--text); text-align: left !important; font-variant-numeric: tabular-nums; }
.po-winner {
  text-align: left !important;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  display: flex !important;
  align-items: center;
  gap: 8px;
}
.po-supplier-icon {
  display: inline-flex;
  width: 22px; height: 22px;
  align-items: center; justify-content: center;
  background: var(--accent-tint);
  color: var(--accent-ink);
  border-radius: 5px;
  font-size: 0.64rem; font-weight: 800;
  letter-spacing: -0.04em;
  font-family: 'Inter', sans-serif;
  flex-shrink: 0;
}
.po-supplier-name { color: var(--text); font-size: 0.86rem; }
.po-comp {
  text-align: left !important;
  font-family: 'Inter', sans-serif;
  display: flex !important;
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
}
.po-comp-mpn { font-family: var(--mono); font-size: 0.78rem; font-weight: 700; color: var(--text); }
.po-comp-mfr { font-size: 0.68rem; color: var(--text-muted); }
.po-unit { font-family: var(--mono); color: var(--text); white-space: nowrap; }
.po-unit b { font-size: 0.92rem; font-weight: 700; letter-spacing: -0.01em; }
.po-unit-curr { color: var(--text-faint); font-size: 0.68rem; margin-left: 2px; }
.po-fallback-note {
  display: block;
  font-size: 0.62rem;
  color: var(--yellow);
  margin-top: 1px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: help;
}
.po-fallback-inline {
  display: block;
  font-size: 0.58rem;
  color: var(--yellow);
  font-weight: 500;
  line-height: 1;
  margin-top: 1px;
}
.po-total { color: var(--text-2); font-family: var(--mono); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
/* Click-to-copy price cells (2026-09-07, on request) — no underline/link styling (explicitly not
   wanted): a plain background tint on hover is the only "this is clickable" cue, same language a
   spreadsheet cell uses, not a hyperlink. The whole cell is the click target (class sits on the
   <td> itself), so a click anywhere in the price field copies, not just a precise hit on the
   digits. The highlight on click is the only feedback (no toast/modal system in this app). */
.price-copyable { cursor: pointer; transition: background .15s; }
.price-copyable:hover { background: var(--surface2); }
.price-copyable.price-copied { background: var(--green-tint) !important; color: var(--green); }
.po-stock { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.po-savings {
  font-family: var(--mono);
  font-size: 0.76rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  line-height: 1.2;
}
.po-savings-pct { color: var(--green); font-weight: 700; }
.po-savings-note { color: var(--text-faint); font-size: 0.64rem; font-family: 'Inter', sans-serif; letter-spacing: -0.005em; }
.po-na { color: var(--text-faint); font-style: italic; }
.po-row:hover { background: color-mix(in srgb, var(--accent-tint) 28%, transparent); }
.po-row-empty { background: var(--surface2); }
.po-row-empty td { color: var(--text-faint); font-style: italic; text-align: center !important; font-size: 0.76rem; }

.prisoversigt-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-style: italic;
}

/* ── Component picker ─────────────────────────────────────────────── */
.comp-picker {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.comp-picker-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  gap: 12px;
  flex-wrap: wrap;
}
.comp-picker-title b { font-size: 0.86rem; color: var(--text); letter-spacing: -0.01em; }
.comp-picker-sub { font-size: 0.74rem; color: var(--text-muted); margin-left: 8px; }
.btn-link {
  background: none;
  border: none;
  color: var(--accent);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.btn-link:hover { background: var(--accent-tint); }

.comp-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
  padding: 14px;
}
.comp-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: flex-start;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s, transform 0.08s;
  position: relative;
}
.comp-card:hover {
  border-color: var(--border-2);
  box-shadow: var(--shadow);
  background: var(--surface);
}
.comp-card-selected {
  border-color: var(--accent);
  background: var(--accent-tint);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.comp-card-selected:hover { border-color: var(--accent); }
.comp-card-image {
  width: 52px; height: 52px;
  border-radius: 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  flex-shrink: 0;
}
.comp-card-selected .comp-card-image { background: var(--surface); color: var(--accent); }

.comp-card-body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.comp-card-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.comp-card-mpn { font-family: var(--mono); font-size: 0.88rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.comp-card-mfr { font-size: 0.74rem; color: var(--text-muted); font-weight: 500; }
.comp-card-desc { font-size: 0.76rem; color: var(--text-2); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.comp-card-meta { display: flex; gap: 5px; flex-wrap: wrap; }
.comp-card-pill {
  font-size: 0.64rem;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.comp-card-pill-rohs { color: var(--green); background: var(--green-tint); border-color: color-mix(in srgb, var(--green) 25%, transparent); }
.comp-card-pill-lc { color: var(--blue); background: var(--blue-tint); border-color: color-mix(in srgb, var(--blue) 25%, transparent); }
.comp-card-stats {
  display: flex;
  gap: 14px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.comp-card-stat { display: flex; flex-direction: column; gap: 1px; }
.comp-card-stat-label { font-size: 0.6rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.comp-card-stat-val { font-family: var(--mono); font-size: 0.82rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

.comp-card-cta {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  align-self: center;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
  letter-spacing: -0.005em;
}
.comp-card:hover .comp-card-cta { color: var(--accent-ink); background: var(--accent-tint); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.comp-card-selected .comp-card-cta { color: var(--accent-ink); background: var(--surface); border-color: color-mix(in srgb, var(--accent) 40%, transparent); font-weight: 700; }

/* ── Component section (detail view) ─────────────────────────────── */
.comp-section { overflow: visible; transition: box-shadow .15s, border-color .15s; }
.comp-section-selected { box-shadow: 0 0 0 2px var(--accent) inset, 0 1px 3px rgba(0,0,0,.04); }
.comp-section-unselected { opacity: 0.78; }
.comp-section-unselected:hover { opacity: 1; }
.comp-section-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  min-height: 0;
}
.comp-section-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  line-height: 1.25;
}
.comp-section-main .comp-section-title {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: nowrap;
}
.comp-section-main .comp-section-subrow {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  flex-wrap: wrap;
}
.comp-section-main .comp-section-desc {
  font-size: 0.78rem;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}
.comp-section-image {
  width: 60px; height: 60px;
  flex-shrink: 0;
  border-radius: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  overflow: hidden;
}
.comp-section-image svg { width: 38px; height: 38px; }
.comp-section-mpn { font-size: 0.95rem; }
.comp-section-mfr { font-size: 0.82rem; }
.comp-section-by { font-size: 0.72rem; }

/* Stats: compact single-line on the right */
.comp-hero-stats {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
}
.comp-hero-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  white-space: nowrap;
  line-height: 1.1;
}
.comp-hero-stat-label {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 700;
}
.comp-hero-stat-val {
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.comp-hero-stat-val small { font-size: 0.58rem; color: var(--text-muted); font-weight: 500; margin-left: 2px; }
.comp-hero-stat-sub { display: none; }

/* Keep pills visible but tiny & text-style */
.comp-section-main .comp-section-pills {
  display: inline-flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: baseline;
}
.comp-section-main .comp-section-select { flex-shrink: 0; }
.comp-section-main .comp-section-select-label { font-size: 0.68rem; }
.comp-hero-stats {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}
.comp-section-select { flex-shrink: 0; }
.comp-section-select {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  user-select: none;
  transition: background .12s;
  align-self: baseline;
  line-height: 1;
  transform: translateY(3px);
}
.comp-section-select:hover { background: var(--surface3, rgba(0,0,0,.04)); }
.comp-section-select input { position: absolute; opacity: 0; pointer-events: none; }
.comp-section-select-box {
  width: 22px; height: 22px;
  border-radius: 5px;
  border: 1.6px solid var(--border-strong, #c2c7cf);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
  font-size: 13px; font-weight: 700;
  color: #fff;
  transition: all .12s;
}
.comp-section-selected .comp-section-select-box {
  background: var(--accent);
  border-color: var(--accent);
}
.comp-section-select-label {
  font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 600;
}
.comp-section-selected .comp-section-select-label { color: var(--accent); }
.comp-section-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.comp-section-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  row-gap: 4px;
}

/* Boxed stat pills on the right — label over big number */
.comp-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.15;
}
.comp-hero-stat-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  font-weight: 700;
}
.comp-hero-stat-val {
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.comp-hero-stat-val small {
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 3px;
}
.comp-hero-stat-sub {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-weight: 500;
  display: block;
}
.comp-section-mpn { font-family: var(--mono); font-size: 1.15rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.comp-section-by { font-size: 0.78rem; color: var(--text-muted); font-weight: 400; }
.comp-section-mfr { font-size: 0.95rem; font-weight: 600; color: var(--text); letter-spacing: -0.015em; }
.comp-section-exact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--green);
  background: var(--green-tint);
  padding: 2px 7px;
  border-radius: 3px;
}
.comp-section-alias-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-ink);
  background: var(--accent-tint);
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
  cursor: default;
}
.comp-section-ipn {
  display: inline-flex;
  align-items: center;
  font-size: 0.64rem;
  font-weight: 600;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--text-muted);
  background: var(--surface-2);
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid var(--border);
  letter-spacing: 0.02em;
}
[data-tip] { cursor: help; }
td[data-tip], th[data-tip] { cursor: help; }

/* Tooltip indicator: stock cells with data-tip get a subtle dotted underline */
td.po-stock[data-tip],
td.sum-stock[data-tip],
td.ct-stock[data-tip] {
  text-decoration: underline dotted color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 3px;
}
td[data-tip].po-qty b { border-bottom: 1px dotted color-mix(in srgb, currentColor 45%, transparent); }
.po-qty-src { display:block; font-size: 0.7rem; color: var(--text-muted); font-weight: 500; margin-top: 1px; }
.comp-section-pills { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Lifecycle / supply-chain risk, on its own line directly above the description + datasheet
   row. Solid tint fills (unlike the flat, borderless pills below) so risk reads as a status
   signal rather than another static attribute. */
/* flex-basis:100% forces its own line inside .comp-section-main's wrapping flex flow —
   without it the pills tuck onto the end of the title row instead of sitting above the
   description/datasheet line. */
.comp-risk-row { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 0 100%; margin: 2px 0 1px; }
.comp-risk-pill {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.comp-risk-pill.risk-low    { background: var(--green-tint);  color: var(--green); }
.comp-risk-pill.risk-med    { background: var(--yellow-tint); color: var(--yellow); }
.comp-risk-pill.risk-high   { background: var(--red-tint);    color: var(--red); }
.comp-risk-pill.risk-na     { background: var(--surface3);    color: var(--text-muted); }

/* Known aliases (Tier 1 — confirmed identical part under another name/packaging), own line
   directly under the risk row above. Each chip explicitly carries a "Kendt alias" tag (rather
   than a bare MPN) so it doesn't read as just another offer among the price rows below. */
.comp-alias-row { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 0 100%; margin: 2px 0 1px; }
.comp-alias-pill {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 2px;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px 2px 2px;
  border-radius: 4px;
  background: var(--accent-tint);
  color: var(--accent-ink);
  cursor: default;
}
.comp-alias-tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
}
.comp-alias-mpn { white-space: nowrap; }
.comp-alias-mfr { color: var(--text-muted); font-weight: 500; white-space: nowrap; }

.comp-section-subrow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.comp-section-subrow .comp-section-desc { flex: 1 1 auto; min-width: 160px; font-size: 0.82rem; color: var(--text-2); line-height: 1.45; }
.comp-section-subrow .comp-section-pills { flex-shrink: 0; }
.comp-section-subrow .comp-card-pill {
  font-size: 0.66rem;
  padding: 1px 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  border-radius: 0;
}
.comp-section-subrow .comp-card-pill-rohs { color: var(--green); background: transparent; }
.comp-section-subrow .comp-card-pill-lc { color: var(--blue); background: transparent; }
.comp-section-subrow .comp-card-pill + .comp-card-pill::before {
  content: '·';
  margin-right: 10px;
  color: var(--text-faint);
}
.comp-section-link {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 600;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  margin-left: 0;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.comp-section-link:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.comp-section-link-btn { }

/* ── Key-value parameter chips ("DIAC/SIDAC · DO-15 · 30V"), replacing the raw supplier
   description once local parts-DB data is known — see keyValuesHtml() in redesign.js. Takes the
   same flex slot .comp-section-desc used, so the pills row alongside it is unaffected. */
.comp-section-subrow .comp-kv-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 160px;
}
.comp-kv-line {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
}
.comp-kv-group > .comp-kv-more { flex-shrink: 0; }
.comp-kv {
  font-size: 0.72rem;
  font-family: var(--mono);
  color: var(--text-2);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 7px;
  white-space: nowrap;
}
.comp-kv-more { color: var(--text-faint); cursor: help; }
/* Plain CSS :hover, unlike project.css's JS-positioned .project-kv-pop — the Søg tab's result
   cards sit in normal page flow (no scrolling ancestor to clip an absolutely-positioned popup),
   so there's no need for the fixed-position/JS-coordinates approach that scrolling table needs. */
.comp-pop-wrap { position: relative; }
.comp-kv-pop {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 260px;
  max-width: 420px;
  max-height: 340px;
  overflow-y: auto;
  margin-top: 6px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.22));
  white-space: normal;
}
.comp-pop-wrap:hover .comp-kv-pop { display: block; }
.comp-kv-pop dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 3px; }
.comp-kv-pop dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.72rem;
}
.comp-kv-pop dt {
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.comp-kv-pop dd { margin: 0; font-family: var(--mono); color: var(--text); text-align: right; }

/* ── Distributor table ────────────────────────────────────────────── */
.comp-table-wrap { overflow-x: auto; }
.comp-table {
  border-collapse: collapse;
  font-size: 0.8rem;
  width: 100%;
  min-width: 1020px;
}
.comp-table thead th {
  color: var(--text-muted);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  text-align: right;
  position: sticky;
  top: 0;
  z-index: 1;
}
.comp-table thead .ct-col-supplier,
.comp-table thead .ct-col-sku,
.comp-table thead .ct-col-packing,
.comp-table thead .ct-col-lead { text-align: left; }
.comp-table thead .ct-qty-head small {
  display: block;
  font-weight: 500;
  color: var(--text-faint);
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  margin-top: 1px;
  font-family: var(--mono);
  text-transform: none;
}
.comp-table tbody tr { transition: background 0.08s; }
.comp-table tbody tr:hover { background: var(--surface2); }
.comp-table td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--divider);
  vertical-align: middle;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  text-align: right;
}
.comp-table tbody tr:last-child td { border-bottom: none; }

.ct-supplier {
  text-align: left !important;
}
.ct-supplier-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  white-space: nowrap;
}
.ct-supplier-icon {
  width: 22px; height: 22px;
  border-radius: 5px;
  background: var(--surface3);
  color: var(--text-2);
  font-size: 0.64rem;
  font-weight: 800;
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ct-supplier-link { color: var(--text); text-decoration: none; }
.ct-supplier-link:hover { color: var(--accent); text-decoration: underline; }
.ct-sku { text-align: left !important; color: var(--text-muted); font-size: 0.74rem; }
.ct-packing { text-align: left !important; color: var(--text-muted); font-family: 'Inter', sans-serif; font-size: 0.76rem; white-space: nowrap; }
.ct-stock { font-weight: 600; }
.ct-moq, .ct-lead { color: var(--text-muted); }
.ct-lead { text-align: left !important; white-space: nowrap; }

.ct-price {
  position: relative;
  white-space: nowrap;
}
.ct-price-val { color: var(--text); font-weight: 500; }
.ct-na { color: var(--text-faint); }

/* Cells where the break qty is below this offer's MOQ — muted, struck-through-ish look */
.sum-moq,
.ct-moq-na {
  color: var(--text-faint);
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 6px,
    color-mix(in srgb, var(--border) 40%, transparent) 6px 7px
  );
  font-style: italic;
}
.ct-best {
  background: var(--green-tint);
  color: var(--green);
  font-weight: 700;
}
.ct-best .ct-price-val { color: var(--green); font-weight: 700; }
.ct-best::after {
  content: '★';
  position: absolute;
  top: 2px; right: 3px;
  font-size: 0.5rem;
  color: var(--green);
  opacity: 0.6;
}
.ct-fallback {
  display: block;
  font-size: 0.58rem;
  color: var(--yellow);
  font-weight: 500;
  line-height: 1;
  margin-top: 1px;
  letter-spacing: 0.01em;
}
.ct-fallback-inline {
  display: block;
  font-size: 0.58rem;
  color: var(--yellow);
  font-weight: 500;
  line-height: 1;
  margin-top: 1px;
}

.comp-table-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  padding: 9px 16px;
  font-size: 0.68rem;
  color: var(--text-muted);
  background: var(--surface2);
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  letter-spacing: -0.005em;
}
.comp-table-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend-best { background: var(--green-tint); border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); }
.legend-mark { color: var(--yellow); font-weight: 700; }

/* ── Offer cards layout ───────────────────────────────────────────── */
.comp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  padding: 14px;
  background: var(--surface);
}
.offer-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.offer-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.offer-card-supplier { display: flex; gap: 9px; align-items: center; }
.offer-card-supplier-name { font-size: 0.86rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.offer-card-sku { font-size: 0.7rem; color: var(--text-muted); font-family: var(--mono); margin-top: 1px; }
.offer-card-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.7rem; color: var(--text-muted); }
.offer-card-meta b { color: var(--text-2); font-weight: 600; font-family: var(--mono); }
.offer-card-prices { }
.offer-price-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; font-family: var(--mono); }
.offer-price-table th { text-align: left; color: var(--text-muted); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0 0 5px; font-weight: 700; border-bottom: 1px solid var(--border); }
.offer-price-table th:last-child { text-align: right; }
.offer-price-table td { padding: 4px 0; color: var(--text-2); border-bottom: 1px solid var(--divider); font-variant-numeric: tabular-nums; }
.offer-price-table td.price-qty { color: var(--text-muted); }
.offer-price-table td.price-val { text-align: right; color: var(--text); font-weight: 600; }
.offer-price-table tr.price-best td { color: var(--green); font-weight: 700; background: var(--green-tint); }
.offer-price-table tr:last-child td { border-bottom: none; }

/* Compact density adjustments */
[data-density="compact"] .comp-section-hero { padding: 12px 14px; }
[data-density="compact"] .comp-section-mpn { font-size: 1.02rem; }
[data-density="compact"] .comp-section-mfr { font-size: 0.86rem; }
[data-density="compact"] .comp-table td { padding: 7px 8px; }
[data-density="compact"] .prisoversigt-table td { padding: 7px 10px; }
[data-density="compact"] .comp-hero-stat { padding: 6px 12px; min-width: 110px; }

/* Responsive */
@media (max-width: 720px) {
  .comp-section-hero { grid-template-columns: auto 40px 1fr; gap: 8px 10px; }
  .comp-section-image { width: 40px; height: 40px; }
}

/* Live / refresh toggle */
.search-btn-group { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.refresh-toggle { display: flex; align-items: center; gap: 4px; font-size: 0.68rem; font-weight: 600; color: var(--text-muted); cursor: pointer; user-select: none; white-space: nowrap; }
.refresh-toggle input { display: none; }
.refresh-toggle svg { opacity: 0.45; transition: opacity .15s; flex-shrink: 0; }
.refresh-toggle:hover { color: var(--text); }
.refresh-toggle:hover svg { opacity: 0.75; }
.refresh-toggle input:checked ~ svg { opacity: 1; color: var(--accent, #6366f1); animation: spin-once .4s ease; }
.refresh-toggle input:checked ~ span { color: var(--accent, #6366f1); }
@keyframes spin-once { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Pending suppliers badge */
.pending-badge { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 14px; margin-bottom: 10px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 7px; font-size: 0.74rem; }
.pending-label { color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.65rem; flex-shrink: 0; }
.pending-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pending-chip { padding: 2px 8px; border-radius: 10px; background: var(--accent-tint, rgba(99,102,241,.10)); color: var(--accent, #6366f1); border: 1px solid var(--accent-border, rgba(99,102,241,.25)); font-size: 0.7rem; font-weight: 500; animation: pending-pulse 1.4s ease-in-out infinite; }
@keyframes pending-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

/* TrustedParts rows — yellow tint to signal indicative/aggregated pricing */
.ct-row-tp td { background: #fffbe6; }
.ct-row-tp td.ct-supplier { background: #fffbe6; } /* explicit: display:flex td needs own rule */
[data-theme="dark"] .ct-row-tp td { background: #2e2a00; }
[data-theme="dark"] .ct-row-tp td.ct-supplier { background: #2e2a00; }
.offer-card-tp { background: #fffbe6; border-color: #f0d000; }
[data-theme="dark"] .offer-card-tp { background: #2e2a00; border-color: #6b5c00; }
.ct-tp-badge { display: inline-block; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.06em; padding: 1px 4px; border-radius: 3px; background: #f0d000; color: #3a2e00; margin-left: 5px; vertical-align: middle; }