/* ──────────────────────────────────────────────────────────────────────────
 * PrijsProfeet — Component vocabulary ("The Quiet Oracle")
 * Vanilla CSS translation of the design-system primitives. Token-driven.
 * Namespaced `.pp-*` so the canonical card can coexist with the legacy
 * `.product-card` systems during the phased migration, then replace them.
 * Depends on tokens.css (--pp-*) + fonts.css.
 * ──────────────────────────────────────────────────────────────────────── */

/* ── Tabular figures helper ──────────────────────────────────────────────── */
.pp-tnum { font-variant-numeric: tabular-nums lining-nums; }

/* ── Discount badge — Signal Teal, three tiers (subtle/standard/bold) ─────── */
.pp-discount {
  font-family: var(--pp-font-price);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  color: var(--pp-save-700);
  white-space: nowrap;
}
.pp-discount--subtle { font-size: 13px; }
.pp-discount--standard {
  display: inline-flex; align-items: center;
  padding: 3px 8px; border-radius: var(--pp-r-pill);
  background: var(--pp-save-100); color: var(--pp-save-700);
  font-size: 12px;
}
.pp-discount--bold {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 5px 10px; border-radius: var(--pp-r-sm);
  background: var(--pp-save-600); color: oklch(100% 0 0);
  font-weight: 700; font-size: 14px; letter-spacing: -0.01em;
  box-shadow: 0 1px 2px oklch(15% 0.008 80 / 0.20);
}

/* ── Promo label ("1+1 GRATIS", "2e HALVE PRIJS") — indigo, never a price ─── */
.pp-promo {
  display: inline-block;
  padding: 4px 9px; border-radius: var(--pp-r-xs);
  background: var(--pp-promo-bg); color: var(--pp-promo-text);
  font-family: var(--pp-font-sans); font-weight: 700; font-size: 10px;
  letter-spacing: 0.10em; text-transform: uppercase;
}
.pp-promo--outline {
  background: transparent; color: var(--pp-brand-800);
  border: 1px solid var(--pp-brand-800);
}

/* ── Validity pill — honest ("t/m zo"), drop ("Prijsdaling"), new ("Nieuw") ── */
.pp-validity {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--pp-r-pill);
  background: var(--pp-cream); color: var(--pp-text-muted);
  border: 1px solid var(--pp-border-soft);
  font-size: 11px; font-weight: 500; letter-spacing: 0.005em;
  white-space: nowrap;
}
.pp-validity--drop { background: var(--pp-save-100); color: var(--pp-save-700); border-color: transparent; }
.pp-validity--new  { background: var(--pp-brand-100); color: var(--pp-brand-800); border-color: transparent; }

/* ── Dietary tag — mono, low-key ─────────────────────────────────────────── */
.pp-diettag {
  display: inline-block;
  padding: 2px 6px; border-radius: 3px;
  font-family: var(--pp-font-mono); font-weight: 500; font-size: 9px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.pp-diettag--bio         { color: oklch(40% 0.08 145); background: oklch(94% 0.04 145); }
.pp-diettag--glutenvrij  { color: oklch(40% 0.08 70);  background: oklch(95% 0.04 70); }
.pp-diettag--lactosevrij { color: oklch(40% 0.08 240); background: oklch(94% 0.04 240); }
.pp-diettag--vegan       { color: oklch(38% 0.10 145); background: oklch(93% 0.05 145); }
.pp-diettag--vegetarisch { color: oklch(38% 0.09 130); background: oklch(94% 0.04 130); }

/* ── Price block — Plex Sans tabular; savings teal; struck original ──────── */
.pp-price {
  font-family: var(--pp-font-price);
  font-variant-numeric: tabular-nums lining-nums;
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1.0;
}
.pp-price--right { align-items: flex-end; }
.pp-price__row { display: flex; align-items: baseline; gap: 8px; }
.pp-price__current { font-weight: 700; color: var(--pp-save-700); letter-spacing: -0.015em; }
.pp-price__original {
  font-weight: 500; color: var(--pp-text-subtle);
  text-decoration: line-through; text-decoration-color: var(--pp-text-subtle);
}
.pp-price__unit { margin-top: 4px; font-weight: 400; color: var(--pp-text-muted); }
/* sizes: xl hero, l card-hero, m row, s compact */
.pp-price--xl .pp-price__current { font-size: var(--pp-fs-price-xl); }
.pp-price--xl .pp-price__original { font-size: 17px; }
.pp-price--xl .pp-price__unit { font-size: 14px; }
.pp-price--l .pp-price__current { font-size: var(--pp-fs-price-l); }
.pp-price--l .pp-price__original { font-size: 12px; }
.pp-price--l .pp-price__unit { font-size: 11px; }
.pp-price--m .pp-price__current { font-size: var(--pp-fs-price-m); }
.pp-price--m .pp-price__original { font-size: 11px; }
.pp-price--m .pp-price__unit { font-size: 10px; }
.pp-price--s .pp-price__current { font-size: var(--pp-fs-price-s); }
.pp-price--s .pp-price__original { font-size: 11px; }
.pp-price--s .pp-price__unit { font-size: 10px; }

/* ── Retailer mark — monochrome logogram in UI chrome (guardrail #3) ──────── */
.pp-retailer-mark {
  width: 18px; height: 18px; flex: 0 0 18px;
  object-fit: contain;
  /* render brand logos as calm monochrome marks; full colour only on
   * retailer-detail + folder picker (handled by NOT applying this class there) */
  filter: grayscale(1) opacity(0.75);
}
.pp-retailer-name { font-size: 11px; font-weight: 500; color: var(--pp-text-muted); }

/* ── Action button — primary "Lijst" / secondary "Volgen" ────────────────── */
.pp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 36px; min-height: 36px; padding: 0 12px;
  border-radius: var(--pp-r-sm);
  font-family: var(--pp-font-sans); font-weight: 500; font-size: 12px;
  cursor: pointer; border: 1px solid transparent;
  transition: background var(--pp-dur-1) var(--pp-ease-out);
}
.pp-btn--primary { flex: 1; background: var(--pp-brand-700); color: var(--pp-paper); border-color: var(--pp-brand-700); }
.pp-btn--primary:hover { background: var(--pp-brand-800); }
.pp-btn--secondary { flex: 0 0 36px; padding: 0; background: var(--pp-cream); color: var(--pp-ink); border-color: var(--pp-border); }
.pp-btn--secondary:hover { background: var(--pp-n-100); }
/* favorite/"Volgen" active state — JS toggles `.favorited` + sets the heart svg fill */
.pp-btn--secondary.favorited { background: var(--pp-brand-100); color: var(--pp-brand-700); border-color: var(--pp-brand-200); }
/* transient "added to list" feedback — JS toggles `.added` for ~1s */
.pp-btn--primary.added { background: var(--pp-save-600); border-color: var(--pp-save-600); }
.pp-btn:focus-visible { outline: none; box-shadow: var(--pp-focus-ring); }
.pp-btn svg { width: 14px; height: 14px; }

/* ── External-link corner — jump to retailer (kept on search cards) ───────── */
.pp-card__ext-link {
  position: absolute; top: var(--pp-s-2); left: var(--pp-s-2); z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  background: var(--pp-bg-elevated); color: var(--pp-text-muted);
  border: 1px solid var(--pp-border-soft); border-radius: var(--pp-r-pill);
  cursor: pointer; box-shadow: var(--pp-e-1);
}
.pp-card__ext-link:hover { color: var(--pp-brand-700); border-color: var(--pp-border); }
.pp-card__ext-link:focus-visible { outline: none; box-shadow: var(--pp-focus-ring); }
.pp-card__ext-link svg { width: 14px; height: 14px; }

/* ── Product card — grid variant (the workhorse) ─────────────────────────── */
.pp-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--pp-s-2);
  background: var(--pp-bg-elevated);
  border-radius: var(--pp-r-md);
  padding: var(--pp-s-3);
  box-shadow: var(--pp-e-1);
  cursor: pointer;
  transition: box-shadow var(--pp-dur-1) var(--pp-ease-out);
}
.pp-card:hover { box-shadow: var(--pp-e-2); }
.pp-card__img {
  position: relative; aspect-ratio: 1;
  background: var(--pp-cream);
  border-radius: var(--pp-r-sm);
  overflow: hidden;
  border: 1px solid var(--pp-border-soft);
  display: flex; align-items: center; justify-content: center;
}
.pp-card__img img { width: 100%; height: 100%; object-fit: contain; }
.pp-card__img-placeholder { width: 40%; height: 40%; color: var(--pp-text-subtle); }
.pp-card__badge { position: absolute; top: var(--pp-s-2); right: var(--pp-s-2); }
.pp-card__promo-row { display: flex; gap: var(--pp-s-1); flex-wrap: wrap; }
.pp-card__name {
  font-family: var(--pp-font-sans);
  font-size: 13px; font-weight: 500; color: var(--pp-ink);
  line-height: 1.30; letter-spacing: -0.005em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 34px;
}
/* Pin price + retailer + Vergelijk + actions to the card bottom so they align
   across a grid row regardless of name/brand/promo height above. Grid already
   makes cards equal-height; this absorbs the slack above the price. */
.pp-card > .pp-price { margin-top: auto; }
.pp-card__brand {
  font-size: 11px; color: var(--pp-text-muted); margin-top: -4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pp-card__retailer-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px;
}
.pp-card__retailer-row .pp-spacer { flex: 1; }
.pp-card__diet-row { display: flex; gap: var(--pp-s-1); flex-wrap: wrap; }
.pp-card__actions { display: flex; gap: 6px; margin-top: var(--pp-s-1); }
.pp-card__link {
  font-size: 11px; color: var(--pp-text-muted); text-decoration: none;
}
/* "€X goedkoper" note on alternatives cards — teal (savings), never green */
.pp-card__savings { font-size: 12px; font-weight: 600; color: var(--pp-save-700); }

/* SSR-specific bits (server-rendered cards keep real <a> links for SEO) */
.pp-card__img-link { display: block; }
.pp-card__name a { color: inherit; text-decoration: none; }
.pp-card__name a:hover { color: var(--pp-brand-700); }
.pp-card__new-flag {
  position: absolute; top: var(--pp-s-2); left: var(--pp-s-2); z-index: 1;
  padding: 2px 7px; border-radius: var(--pp-r-xs);
  background: var(--pp-brand-700); color: var(--pp-paper);
  font-family: var(--pp-font-sans); font-weight: 700; font-size: 9px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
/* Price-history context line — honest signals, calm colour-coding */
.pp-card__context { font-size: 11px; font-weight: 500; color: var(--pp-text-muted); }
.pp-card__context--lowest,
.pp-card__context--below { color: var(--pp-save-700); }
.pp-card__context--new { color: var(--pp-brand-700); }
.pp-card__context--urgent { color: var(--pp-rise-700); }
.pp-card__link:hover { color: var(--pp-brand-700); text-decoration: underline; }

/* ── Product card — list variant (horizontal) ────────────────────────────── */
.pp-card--list { flex-direction: row; gap: var(--pp-s-3); align-items: stretch; }
.pp-card--list .pp-card__img { width: 88px; flex: 0 0 88px; aspect-ratio: 1; border-radius: var(--pp-r-xs); }
.pp-card--list .pp-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--pp-s-1); }
.pp-card--list .pp-card__aside {
  display: flex; flex-direction: column; justify-content: space-between;
  align-items: flex-end; gap: var(--pp-s-2);
}