/* PCG Market — design tokens.
   One source of truth for colour, spacing and type across every module.
   Reuse these in the vendor portal, finder, compare and builder rather than
   hardcoding values per template. */

:root {
  --pcg-bg:            #ffffff;
  --pcg-surface:       #f7f8fa;
  --pcg-surface-alt:   #eef0f4;
  --pcg-border:        #dfe3e8;
  --pcg-border-strong: #c3c9d2;

  --pcg-text:          #14181f;
  --pcg-text-muted:    #5c6672;
  --pcg-text-faint:    #8b95a1;

  --pcg-primary:       #1a5fd0;
  --pcg-primary-dark:  #164ba6;
  --pcg-primary-soft:  #e8f0fd;

  --pcg-success:       #157f3d;
  --pcg-success-soft:  #e6f4ec;
  --pcg-warn:          #a76a00;
  --pcg-warn-soft:     #fdf3e2;
  --pcg-danger:        #b32d2e;
  --pcg-danger-soft:   #fbeaea;

  --pcg-whatsapp:      #25d366;

  /* Condition chips */
  --pcg-new:           #157f3d;
  --pcg-used:          #a76a00;
  --pcg-refurb:        #1a5fd0;

  /* Freshness states — see Template::freshness() */
  --pcg-fresh:         #157f3d;
  --pcg-fresh-ok:      #5c6672;
  --pcg-stale:         #a76a00;
  --pcg-very-stale:    #b32d2e;
  --pcg-collected:     #8b95a1;

  --pcg-radius-sm:     4px;
  --pcg-radius:        8px;
  --pcg-radius-lg:     14px;

  --pcg-space-1:       4px;
  --pcg-space-2:       8px;
  --pcg-space-3:       12px;
  --pcg-space-4:       16px;
  --pcg-space-5:       24px;
  --pcg-space-6:       32px;

  --pcg-shadow-sm:     0 1px 2px rgba(20,24,31,.06);
  --pcg-shadow:        0 2px 8px rgba(20,24,31,.08);
  --pcg-shadow-lg:     0 8px 24px rgba(20,24,31,.12);

  --pcg-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pcg-font-mono:     ui-monospace, SFMono-Regular, Menlo, monospace;

  --pcg-fs-xs:         12px;
  --pcg-fs-sm:         13px;
  --pcg-fs-base:       15px;
  --pcg-fs-lg:         18px;
  --pcg-fs-xl:         22px;
  --pcg-fs-2xl:        28px;

  --pcg-maxw:          1180px;

  /* How far below the top of the window anything sticky should settle. A theme
     with a fixed header must raise this to its header height, or the filter
     column slides underneath it. */
  --pcg-sticky-top:    20px;
}

.pcg-price       { font-weight: 700; color: var(--pcg-text); }
.pcg-price--from { font-weight: 500; color: var(--pcg-text-muted); font-size: var(--pcg-fs-sm); }

.pcg-chip {
  display: inline-flex; align-items: center; gap: var(--pcg-space-1);
  padding: 2px var(--pcg-space-2);
  border-radius: 999px;
  font-size: var(--pcg-fs-xs); font-weight: 600; line-height: 1.6;
}
.pcg-chip--new    { background: var(--pcg-success-soft); color: var(--pcg-new); }
.pcg-chip--used   { background: var(--pcg-warn-soft);    color: var(--pcg-used); }
.pcg-chip--refurb { background: var(--pcg-primary-soft); color: var(--pcg-refurb); }

.pcg-fresh              { font-size: var(--pcg-fs-xs); }
.pcg-fresh--fresh       { color: var(--pcg-fresh); }
.pcg-fresh--ok          { color: var(--pcg-fresh-ok); }
.pcg-fresh--stale       { color: var(--pcg-stale); }
.pcg-fresh--very_stale  { color: var(--pcg-very-stale); }
.pcg-fresh--collected   { color: var(--pcg-collected); font-style: italic; }

/* Sponsored units must stay visually distinct from AdSense units on the page. */
.pcg-sponsored {
  border: 1px solid var(--pcg-border-strong);
  border-radius: var(--pcg-radius);
  position: relative;
}
.pcg-sponsored::before {
  content: "Sponsored";
  position: absolute; top: 6px; right: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--pcg-text-faint);
}