/* PCG Market — part finder, product page, compare.
   Continues the directory's language: quiet cards, one accent, tabular figures
   for anything numeric so specs and prices align down a column. */

.pcg-finder, .pcg-product, .pcg-compare {
  max-width: var(--pcg-maxw);
  margin: 0 auto;
  font-family: var(--pcg-font);
  color: var(--pcg-text);
}

/* ── Category picker ────────────────────────────────────────────────────── */

.pcg-finder__search {
  display: flex; gap: var(--pcg-space-2);
  margin-bottom: var(--pcg-space-6);
  max-width: 640px;
}
.pcg-finder__search .pcg-input { flex: 1; min-height: 46px; }
.pcg-finder__search .pcg-btn { min-height: 46px; }

.pcg-finder__heading {
  font-size: var(--pcg-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pcg-text-faint);
  margin: 0 0 var(--pcg-space-3);
}

/* Themes commonly style `li` directly, so list-style has to be cleared on the
   item as well as the list, or bullets appear beside the cards. */
.pcg-cat-grid,
.pcg-cat-grid > li,
.pcg-shop-grid,
.pcg-shop-grid > li,
.pcg-product-grid,
.pcg-product-grid > li {
  list-style: none;
  list-style-type: none;
}
.pcg-cat-grid > li::before,
.pcg-shop-grid > li::before,
.pcg-product-grid > li::marker,
.pcg-cat-grid > li::marker,
.pcg-shop-grid > li::marker { content: none; }

.pcg-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--pcg-space-3);
  margin: 0 0 var(--pcg-space-6); padding: 0;
}
.pcg-cat-grid > li { margin: 0; padding: 0; }

/* Count sits below the label rather than beside it, so a two-line category name
   cannot push it out of alignment with its neighbours. */
.pcg-cat {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--pcg-space-3);
  min-height: 104px;
  padding: var(--pcg-space-4);
  background: var(--pcg-bg);
  border: 1px solid var(--pcg-border);
  border-radius: var(--pcg-radius);
  text-decoration: none; color: var(--pcg-text);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pcg-cat:hover {
  border-color: var(--pcg-primary);
  box-shadow: var(--pcg-shadow);
  transform: translateY(-1px);
  color: var(--pcg-text);
}
.pcg-cat__label { font-weight: 650; font-size: var(--pcg-fs-base); line-height: 1.3; }
.pcg-cat__count {
  font-variant-numeric: tabular-nums;
  font-size: var(--pcg-fs-sm);
  color: var(--pcg-text-faint);
}
.pcg-cat__count::after { content: " parts"; }

/* ── Category tabs ──────────────────────────────────────────────────────── */

.pcg-cat-tabs {
  display: flex; flex-wrap: wrap; gap: var(--pcg-space-1);
  margin-bottom: var(--pcg-space-4);
  padding-bottom: var(--pcg-space-2);
  border-bottom: 1px solid var(--pcg-border);
}
.pcg-cat-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px var(--pcg-space-3);
  font-size: var(--pcg-fs-sm); font-weight: 600;
  color: var(--pcg-text-muted); text-decoration: none;
  border-radius: 999px;
}
.pcg-cat-tab:hover { background: var(--pcg-surface); color: var(--pcg-text); }
.pcg-cat-tab.is-active { background: var(--pcg-primary); color: #fff; }
.pcg-cat-tab__n { font-size: 11px; font-variant-numeric: tabular-nums; opacity: .7; }

/* ── Layout ─────────────────────────────────────────────────────────────── */

.pcg-finder__body { display: block; }

/* ── Filter bar ─────────────────────────────────────────────────────────────
   Above the results rather than beside them. The sidebar cost a quarter of the
   width on a 1000px content area and was not earning it: the filter list is
   long enough that it scrolled regardless, which is what put Apply below the
   fold. Spent on the grid instead it is two columns of laptops becoming four.

   Each facet is a <details>, so collapsing needs no JavaScript and survives
   the script failing. Wide screens position the panel absolutely and it reads
   as a dropdown; phones leave it in flow and it reads as an accordion, which
   is the right shape there. */

.pcg-facets {
  margin-bottom: var(--pcg-space-4);
  padding: var(--pcg-space-3);
  background: var(--pcg-bg);
  border: 1px solid var(--pcg-border);
  border-radius: var(--pcg-radius);
}

.pcg-facets__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--pcg-space-2);
}

.pcg-facet { position: relative; margin: 0; padding: 0; border: 0; min-width: 0; }
.pcg-facet--search { flex: 1 1 220px; max-width: 320px; }
.pcg-facet--search .pcg-facet__label { display: block; margin-bottom: 4px; }

/* Facets beyond the first few. Hidden until "More filters", because a button
   marked Filters advertises nothing and the handful people decide on should
   not need a click. */
.pcg-facet--more { display: none; }
.pcg-facets.is-expanded .pcg-facet--more { display: block; }

/* The summary is the control. list-style:none plus the ::-webkit- rule is what
   removes the default triangle in every engine. */
.pcg-facet > summary.pcg-facet__label {
  display: flex; align-items: center; gap: 6px;
  min-height: 38px;
  padding: 0 var(--pcg-space-3);
  margin: 0;
  background: var(--pcg-surface);
  border: 1px solid var(--pcg-border-strong);
  border-radius: var(--pcg-radius-sm, 4px);
  cursor: pointer;
  list-style: none;
  font-size: var(--pcg-fs-sm);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--pcg-text);
  white-space: nowrap;
}
.pcg-facet > summary.pcg-facet__label::-webkit-details-marker { display: none; }
.pcg-facet > summary.pcg-facet__label::after {
  content: ""; width: 7px; height: 7px; margin-left: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.pcg-facet[open] > summary.pcg-facet__label { border-color: var(--pcg-primary); }
.pcg-facet[open] > summary.pcg-facet__label::after { transform: translateY(1px) rotate(-135deg); }
.pcg-facet > summary.pcg-facet__label:hover { border-color: var(--pcg-primary); }

/* How many values are active in a facet that is shut. */
.pcg-facet__n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: var(--pcg-primary); color: #fff;
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.pcg-facet__unit { font-weight: 400; color: var(--pcg-text-muted); }

.pcg-facet__panel {
  position: absolute; z-index: 40;
  top: calc(100% + 4px); left: 0;
  min-width: 230px; max-width: 320px;
  padding: var(--pcg-space-3);
  background: var(--pcg-surface);
  border: 1px solid var(--pcg-border-strong);
  border-radius: var(--pcg-radius);
  box-shadow: var(--pcg-shadow-lg);
}
/* A panel opening near the right edge would otherwise run off screen. */
.pcg-facet:nth-last-child(-n+3) .pcg-facet__panel { left: auto; right: 0; }

.pcg-facet__scroll { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.pcg-facet__range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.pcg-facet__range .pcg-input { min-height: 34px; padding: 0 8px; font-size: var(--pcg-fs-sm); }

.pcg-check {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0;
  font-size: var(--pcg-fs-sm);
  cursor: pointer;
}
.pcg-check span { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.pcg-check em {
  font-style: normal; font-size: 11px;
  color: var(--pcg-text-faint); font-variant-numeric: tabular-nums;
}

.pcg-facets__act { display: flex; gap: var(--pcg-space-2); margin-left: auto; }
.pcg-facets__toggle {
  min-height: 38px; padding: 0 var(--pcg-space-3);
  background: none; border: 1px dashed var(--pcg-border-strong);
  border-radius: var(--pcg-radius-sm, 4px);
  color: var(--pcg-text-muted); cursor: pointer;
  font-size: var(--pcg-fs-sm); font-family: inherit;
}
.pcg-facets__toggle:hover { border-color: var(--pcg-primary); color: var(--pcg-text); }
.pcg-facets__apply { min-height: 38px; }

/* ── What is applied ────────────────────────────────────────────────────────
   Shown whether the panel is open or shut. A collapsed bar over a filtered
   list with nothing saying why reads as an empty catalogue, and that is when
   people leave. Each chip removes just itself. */
.pcg-facets__chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: var(--pcg-space-3);
  padding-top: var(--pcg-space-3);
  border-top: 1px solid var(--pcg-border);
}
.pcg-facets__chipslabel {
  font-size: var(--pcg-fs-xs); text-transform: uppercase; letter-spacing: .05em;
  color: var(--pcg-text-faint); margin-right: 2px;
}
.pcg-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  background: var(--pcg-primary-soft, var(--pcg-surface));
  border: 1px solid var(--pcg-border-strong);
  border-radius: 999px;
  font-size: var(--pcg-fs-sm);
  color: var(--pcg-text);
  text-decoration: none;
}
.pcg-chip span { font-size: 15px; line-height: 1; color: var(--pcg-text-muted); }
.pcg-chip:hover { border-color: var(--pcg-primary); }
.pcg-chip:hover span { color: var(--pcg-danger, #96313a); }
.pcg-facets__clear { font-size: var(--pcg-fs-xs); color: var(--pcg-primary); margin-left: auto; }

/* ── Results ────────────────────────────────────────────────────────────── */

.pcg-results__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--pcg-space-3); margin-bottom: var(--pcg-space-4);
}
.pcg-results__count { margin: 0; font-size: var(--pcg-fs-sm); color: var(--pcg-text-muted); }
.pcg-results__count strong { font-size: var(--pcg-fs-base); color: var(--pcg-text); font-variant-numeric: tabular-nums; }
.pcg-results__sort .pcg-select { min-height: 38px; }

.pcg-product-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--pcg-space-4); margin: 0; padding: 0; list-style: none;
}

.pcg-product-card {
  display: flex; flex-direction: column;
  background: var(--pcg-bg);
  border: 1px solid var(--pcg-border);
  border-radius: var(--pcg-radius);
  overflow: hidden;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.pcg-product-card:hover { box-shadow: var(--pcg-shadow); border-color: var(--pcg-border-strong); }

.pcg-product-card__media {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 5 / 4;
  padding: var(--pcg-space-3);
  background: var(--pcg-surface);
  border-bottom: 1px solid var(--pcg-border);
}
.pcg-product-card__media img { max-width: 88%; max-height: 88%; object-fit: contain; }
.pcg-product-card__noimg { font-size: var(--pcg-fs-xs); color: var(--pcg-text-faint); text-transform: uppercase; letter-spacing: .06em; }

.pcg-product-card__body { flex: 1; padding: var(--pcg-space-3); }
.pcg-product-card__brand {
  margin: 0; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--pcg-text-faint);
}
.pcg-product-card__name { margin: 2px 0 var(--pcg-space-2); font-size: var(--pcg-fs-base); line-height: 1.3; }
.pcg-product-card__name a { color: var(--pcg-text); text-decoration: none; }
.pcg-product-card__name a:hover { color: var(--pcg-primary); }

.pcg-product-card__specs { margin: 0; padding: 0; list-style: none; font-size: var(--pcg-fs-xs); }
.pcg-product-card__specs li { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; }
.pcg-product-card__specs span { color: var(--pcg-text-faint); }
.pcg-product-card__specs strong { font-weight: 600; font-variant-numeric: tabular-nums; }

.pcg-product-card__foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--pcg-space-2);
  padding: var(--pcg-space-3); border-top: 1px solid var(--pcg-border);
  min-height: 56px;
}
.pcg-product-card__price { min-width: 0; }
/* Explicit sizes: without them the theme's own typography inflates prices to
   heading scale and wraps "Rs." onto its own line. */
.pcg-price-label {
  display: block; margin-bottom: 1px;
  font-size: 10px; line-height: 1.2; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--pcg-text-faint);
}
.pcg-price {
  display: block;
  font-size: var(--pcg-fs-lg) !important;
  line-height: 1.2;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--pcg-text);
}
.pcg-price--lg { font-size: var(--pcg-fs-2xl) !important; }
.pcg-price-used {
  display: block; margin-top: 1px;
  font-size: var(--pcg-fs-xs); line-height: 1.3;
  white-space: nowrap; color: var(--pcg-used);
}
.pcg-product-card__shops {
  display: block; margin-top: 1px;
  font-size: 11px; line-height: 1.3; color: var(--pcg-text-faint);
}
.pcg-product-card__noprice {
  margin: 0; font-size: var(--pcg-fs-xs); color: var(--pcg-text-faint);
  line-height: 1.35; max-width: 15ch;
}

.pcg-compare-toggle {
  display: flex; align-items: center; gap: 5px;
  flex: 0 0 auto;
  font-size: 11px; color: var(--pcg-text-muted);
  cursor: pointer; white-space: nowrap;
  align-self: center;
}
.pcg-compare-toggle input { margin: 0; }

/* ── Compare bar ────────────────────────────────────────────────────────── */

.pcg-compare-bar {
  position: fixed; left: 50%; bottom: var(--pcg-space-4); transform: translateX(-50%);
  z-index: 40;
  display: flex; align-items: center; gap: var(--pcg-space-3);
  padding: var(--pcg-space-3) var(--pcg-space-4);
  background: var(--pcg-text); color: #fff;
  border-radius: 999px; box-shadow: var(--pcg-shadow-lg);
  font-size: var(--pcg-fs-sm);
}
.pcg-compare-bar[hidden] { display: none; }
.pcg-compare-bar__clear { background: none; border: 0; color: #fff; opacity: .7; cursor: pointer; font: inherit; }
.pcg-compare-bar__clear:hover { opacity: 1; }

/* ── Product page ───────────────────────────────────────────────────────── */

.pcg-product__top { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--pcg-space-5); margin-bottom: var(--pcg-space-5); }
.pcg-product__media {
  display: flex; align-items: center; justify-content: center;
  padding: var(--pcg-space-4);
  background: var(--pcg-surface); border: 1px solid var(--pcg-border); border-radius: var(--pcg-radius);
}
.pcg-product__media img { max-width: 100%; height: auto; }
.pcg-product__crumb { margin: 0 0 var(--pcg-space-2); font-size: var(--pcg-fs-sm); }
.pcg-product__price { padding: var(--pcg-space-4); background: var(--pcg-surface); border-radius: var(--pcg-radius); }
.pcg-product__noprice { margin: 0 0 var(--pcg-space-3); color: var(--pcg-text-muted); }
.pcg-product__mpn { margin-top: var(--pcg-space-3); font-size: var(--pcg-fs-xs); color: var(--pcg-text-faint); }
.pcg-product__h2 { font-size: var(--pcg-fs-lg); margin: var(--pcg-space-6) 0 var(--pcg-space-3); }

.pcg-spec-table { width: 100%; border-collapse: collapse; font-size: var(--pcg-fs-sm); }
.pcg-spec-table th {
  width: 38%; text-align: left; font-weight: 500; color: var(--pcg-text-muted);
  padding: var(--pcg-space-2) var(--pcg-space-3); border-bottom: 1px solid var(--pcg-border);
}
.pcg-spec-table td {
  padding: var(--pcg-space-2) var(--pcg-space-3); border-bottom: 1px solid var(--pcg-border);
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.pcg-spec-table tr:nth-child(even) th, .pcg-spec-table tr:nth-child(even) td { background: var(--pcg-surface); }

.pcg-grades { margin-top: var(--pcg-space-3); font-size: var(--pcg-fs-sm); }
.pcg-grades summary { cursor: pointer; color: var(--pcg-primary); }
.pcg-grades dl { margin: var(--pcg-space-3) 0 0; }
.pcg-grades dt { font-weight: 700; margin-top: var(--pcg-space-2); }
.pcg-grades dd { margin: 0 0 var(--pcg-space-1); color: var(--pcg-text-muted); }

/* ── Compare ────────────────────────────────────────────────────────────── */

.pcg-compare__summary {
  padding: var(--pcg-space-4); margin-bottom: var(--pcg-space-4);
  background: var(--pcg-primary-soft); border-radius: var(--pcg-radius);
}
.pcg-compare__summary h2 { margin: 0 0 var(--pcg-space-2); font-size: var(--pcg-fs-base); }
.pcg-compare__summary ul { margin: 0; padding-left: 1.1em; }
.pcg-compare__summary li { margin-bottom: 3px; }

.pcg-compare__scroll { overflow-x: auto; }
.pcg-compare__table { width: 100%; border-collapse: collapse; font-size: var(--pcg-fs-sm); }
.pcg-compare__table th, .pcg-compare__table td {
  padding: var(--pcg-space-3); border: 1px solid var(--pcg-border); text-align: left; vertical-align: top;
}
.pcg-compare__table thead th { background: var(--pcg-surface); min-width: 170px; }
.pcg-compare__table thead img { display: block; max-width: 90px; margin-bottom: var(--pcg-space-2); }
.pcg-compare__table tbody td { font-variant-numeric: tabular-nums; }
.pcg-compare__rowhead { width: 190px; background: var(--pcg-surface); font-weight: 500; color: var(--pcg-text-muted); }
.pcg-compare__remove { display: block; margin-top: 6px; font-size: var(--pcg-fs-xs); color: var(--pcg-danger); }
.pcg-compare__same { margin-top: var(--pcg-space-4); }
.pcg-compare__same summary { cursor: pointer; color: var(--pcg-text-muted); font-size: var(--pcg-fs-sm); }

.pcg-notice--warn { background: var(--pcg-warn-soft); }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .pcg-facet--search { flex: 1 1 100%; max-width: none; }
  .pcg-facets__act { width: 100%; margin-left: 0; }
  .pcg-facets__apply { flex: 1; }
  /* In flow, not floating: a dropdown pinned over a short screen covers the
     results it is meant to narrow. */
  .pcg-facet__panel {
    position: static; min-width: 0; max-width: none;
    margin-top: 6px; box-shadow: none;
  }
  .pcg-facet:nth-last-child(-n+3) .pcg-facet__panel { right: auto; }
  .pcg-facet, .pcg-facet--search { flex: 1 1 100%; }
  .pcg-product__top { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .pcg-product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .pcg-compare-bar { left: var(--pcg-space-3); right: var(--pcg-space-3); transform: none; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .pcg-product-card, .pcg-cat { transition: none; }
}

/* ── Compare: show everything, mark what differs ───────────────────────── */

.pcg-compare__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--pcg-space-3);
  margin-bottom: var(--pcg-space-3);
}
.pcg-compare__tally { margin: 0; font-size: var(--pcg-fs-sm); color: var(--pcg-text-muted); }
.pcg-compare__tally strong { color: var(--pcg-text); font-variant-numeric: tabular-nums; }
.pcg-compare__toggle { font-size: var(--pcg-fs-sm); }

.pcg-compare__name { display: block; font-weight: 650; margin-bottom: 3px; }
.pcg-compare__noprice { display: block; font-size: var(--pcg-fs-sm); color: var(--pcg-text-faint); }
.pcg-compare__shops { display: block; font-size: var(--pcg-fs-xs); color: var(--pcg-text-faint); }

/* Differing rows carry the emphasis; identical ones stay legible but recede. */
.pcg-compare__table tr.is-diff th,
.pcg-compare__table tr.is-diff td { background: var(--pcg-bg); }
.pcg-compare__table tr.is-diff td { font-weight: 600; }
.pcg-compare__table tr.is-diff .pcg-compare__rowhead {
  box-shadow: inset 3px 0 0 var(--pcg-primary);
}
.pcg-compare__table tr.is-same td { color: var(--pcg-text-muted); }

.pcg-compare__samechip {
  display: inline-block; margin-left: 6px;
  padding: 0 6px; border-radius: 999px;
  background: var(--pcg-surface-alt); color: var(--pcg-text-faint);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}

.pcg-compare__table--diffonly tr.is-same { display: none; }

/* Multi-value specs read better as chips than a comma run. */
.pcg-speclist__chip {
  display: inline-block;
  margin: 0 4px 4px 0;
  padding: 2px 9px;
  background: var(--pcg-surface-alt);
  border-radius: 999px;
  font-size: var(--pcg-fs-xs);
  font-weight: 600;
  color: var(--pcg-text);
}

.pcg-product-grid__ad { display: flex; }
.pcg-product-grid__ad .pcg-ad { width: 100%; }

.pcg-product__capability {
  margin: 0 0 var(--pcg-space-4);
  padding: var(--pcg-space-3) var(--pcg-space-4);
  background: var(--pcg-primary-soft);
  border-radius: var(--pcg-radius);
  font-size: var(--pcg-fs-base);
  line-height: 1.45;
}

/* Nobody listing a product does not mean nobody sells it — it means nobody has
   typed it in. Saying so, and offering a route, beats a dead end. */
.pcg-askquote {
  margin: var(--pcg-space-5) 0;
  padding: var(--pcg-space-4);
  background: var(--pcg-surface);
  border-radius: var(--pcg-radius);
}
.pcg-askquote h2 { margin: 0 0 var(--pcg-space-2); font-size: var(--pcg-fs-lg); }
.pcg-askquote > p { margin: 0 0 var(--pcg-space-3); font-size: var(--pcg-fs-sm); color: var(--pcg-text-muted); max-width: 70ch; }
.pcg-askquote ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--pcg-space-2); }
.pcg-askquote li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pcg-space-3);
  padding: var(--pcg-space-3);
  background: var(--pcg-bg); border: 1px solid var(--pcg-border); border-radius: var(--pcg-radius);
}
.pcg-askquote em { display: block; font-style: normal; font-size: var(--pcg-fs-xs); color: var(--pcg-text-muted); }

.pcg-specs__group th {
  padding-top: var(--pcg-space-4) !important;
  font-size: var(--pcg-fs-xs); text-transform: uppercase;
  letter-spacing: .05em; color: var(--pcg-text-faint);
}
.pcg-specs__group th span {
  display: block; text-transform: none; letter-spacing: 0;
  font-weight: 400; font-size: var(--pcg-fs-xs);
}

/* Tray stock is cheaper for a reason — no box, no cooler, often a shorter
   warranty. The label has to be visible next to the price, not buried. */
.pcg-pkg {
  display: inline-block; margin-left: 6px;
  padding: 1px 7px; border-radius: 999px;
  background: var(--pcg-warn-soft, #fdf3e0);
  color: #8a6100;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  cursor: help;
}

/* ── Reviews ───────────────────────────────────────────────────────────── */

.pcg-reviews { max-width: var(--pcg-maxw); margin: var(--pcg-space-6) auto 0; font-family: var(--pcg-font); }
.pcg-reviews h2 { margin: 0 0 var(--pcg-space-4); font-size: var(--pcg-fs-xl); }
.pcg-reviews h3 { margin: 0 0 var(--pcg-space-3); font-size: var(--pcg-fs-lg); }

.pcg-reviews__summary {
  display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: var(--pcg-space-5); align-items: center;
  padding: var(--pcg-space-4);
  background: var(--pcg-surface); border-radius: var(--pcg-radius);
  margin-bottom: var(--pcg-space-4);
}
.pcg-reviews__score strong { display: block; font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.pcg-reviews__stars { color: #e8a33d; letter-spacing: 1px; }
.pcg-reviews__count { display: block; font-size: var(--pcg-fs-sm); color: var(--pcg-text-muted); }

/* A 5.0 from two reviews is not a 5.0, and saying so is more useful than
   pretending otherwise. */
.pcg-reviews__caution {
  display: block; margin-top: var(--pcg-space-2);
  font-size: var(--pcg-fs-xs); color: var(--pcg-text-muted); line-height: 1.4;
}

.pcg-reviews__spread { margin: 0; padding: 0; list-style: none; }
.pcg-reviews__spread li { display: flex; align-items: center; gap: var(--pcg-space-2); font-size: var(--pcg-fs-xs); }
.pcg-reviews__spread-label { width: 48px; color: var(--pcg-text-muted); }
.pcg-reviews__spread-n { width: 26px; text-align: right; color: var(--pcg-text-muted); font-variant-numeric: tabular-nums; }
.pcg-reviews__bar { flex: 1; height: 7px; background: var(--pcg-surface-alt); border-radius: 999px; overflow: hidden; }
.pcg-reviews__bar span { display: block; height: 100%; background: #e8a33d; }

.pcg-reviews__list { margin: 0 0 var(--pcg-space-5); padding: 0; list-style: none; display: grid; gap: var(--pcg-space-3); }
.pcg-review { padding: var(--pcg-space-4); background: var(--pcg-bg); border: 1px solid var(--pcg-border); border-radius: var(--pcg-radius); }
.pcg-review__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pcg-space-2); }
.pcg-review__title { font-size: var(--pcg-fs-base); }
.pcg-review__body { margin: var(--pcg-space-2) 0; line-height: 1.55; }
.pcg-review__meta { margin: 0; font-size: var(--pcg-fs-xs); color: var(--pcg-text-faint); }
.pcg-review__flag {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  background: var(--pcg-primary-soft); color: var(--pcg-primary);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.pcg-review__helpful { margin-top: var(--pcg-space-2); }
.pcg-review__helpful button {
  background: none; border: 1px solid var(--pcg-border); border-radius: 999px;
  padding: 3px 12px; cursor: pointer;
  font: inherit; font-size: var(--pcg-fs-xs); color: var(--pcg-text-muted);
}
.pcg-review__helpful button:hover { border-color: var(--pcg-primary); color: var(--pcg-primary); }

.pcg-reviews__write { padding: var(--pcg-space-4); background: var(--pcg-surface); border-radius: var(--pcg-radius); }

/* Star picker. Inputs are in 5..1 order and the row is reversed, so the
   general sibling selector can light "this star and every one before it". */
.pcg-stars { border: 0; padding: 0; margin: 0 0 var(--pcg-space-4); min-width: 0; }
.pcg-stars legend { padding: 0; margin-bottom: var(--pcg-space-2); font-size: var(--pcg-fs-sm); font-weight: 600; }
.pcg-stars__row { display: inline-flex; flex-direction: row-reverse; gap: 0; vertical-align: middle; }
.pcg-stars__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.pcg-stars__star {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; /* a thumb-sized target on a phone */
  cursor: pointer; border-radius: var(--pcg-radius-sm);
  -webkit-tap-highlight-color: transparent;
}
.pcg-stars__star svg {
  width: 34px; height: 34px;
  fill: transparent; stroke: var(--pcg-text-faint); stroke-width: 1.5; stroke-linejoin: round;
  transition: fill .12s ease, stroke .12s ease, transform .12s ease;
}
.pcg-stars__input:checked ~ .pcg-stars__star svg { fill: #e8a33d; stroke: #e8a33d; }
/* Hover preview overrides the current pick while the pointer is on the row. */
@media (hover: hover) {
  .pcg-stars__row:hover .pcg-stars__star svg { fill: transparent; stroke: var(--pcg-text-faint); }
  .pcg-stars__row .pcg-stars__star:hover svg,
  .pcg-stars__row .pcg-stars__star:hover ~ .pcg-stars__star svg { fill: #f2bd5c; stroke: #f2bd5c; }
  .pcg-stars__star:hover svg { transform: scale(1.12); }
}
.pcg-stars__input:focus-visible + .pcg-stars__star { outline: 2px solid var(--pcg-primary); outline-offset: 1px; }
.pcg-stars__word {
  display: inline-block; margin-left: var(--pcg-space-3); vertical-align: middle;
  font-size: var(--pcg-fs-sm); color: var(--pcg-text-muted);
}
.pcg-stars__word.is-set { color: var(--pcg-text); font-weight: 600; }

/* Length meter under the review box. */
.pcg-rvmeter { display: flex; align-items: center; gap: var(--pcg-space-3); margin-top: var(--pcg-space-2); }
.pcg-rvmeter__track {
  flex: 0 0 120px; height: 6px; border-radius: 999px; overflow: hidden;
  background: var(--pcg-surface-alt);
}
.pcg-rvmeter__fill { display: block; height: 100%; width: 0; background: var(--pcg-warn); transition: width .15s ease, background .15s ease; }
.pcg-rvmeter__text { font-size: var(--pcg-fs-xs); color: var(--pcg-text-muted); line-height: 1.4; }
.pcg-rvmeter[data-state="short"] .pcg-rvmeter__text { color: var(--pcg-warn); }
.pcg-rvmeter[data-state="ok"] .pcg-rvmeter__fill { background: var(--pcg-success); }
.pcg-rvmeter[data-state="ok"] .pcg-rvmeter__text { color: var(--pcg-success); font-weight: 600; }
.pcg-rvform__body { transition: border-color .15s ease; }
.pcg-rvform__body:has(+ .pcg-rvmeter[data-state="ok"]) { border-color: var(--pcg-success); }

.pcg-rvform__error {
  margin: 0 0 var(--pcg-space-3); padding: var(--pcg-space-2) var(--pcg-space-3);
  border-radius: var(--pcg-radius-sm); background: var(--pcg-warn-soft); color: var(--pcg-warn);
  font-size: var(--pcg-fs-sm);
}
.pcg-rvform__error[hidden] { display: none; }
/* Muted until there is enough to post — still clickable, so the check can say why. */
.pcg-rvform__submit:not(.is-ready) { opacity: .6; }
.pcg-rvform__submit.is-ready { opacity: 1; }

@media (max-width: 480px) {
  .pcg-stars__word { display: block; margin: var(--pcg-space-1) 0 0; }
  .pcg-rvmeter { flex-direction: column; align-items: stretch; gap: var(--pcg-space-1); }
  .pcg-rvmeter__track { flex-basis: auto; }
}

@media (max-width: 700px) {
  .pcg-reviews__summary { grid-template-columns: 1fr; }
}

.pcg-signal {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  background: var(--pcg-surface-alt); color: var(--pcg-text-muted); cursor: help;
}
.pcg-signal--good { background: #e7f5ec; color: #16653a; }
.pcg-signal--ok   { background: var(--pcg-primary-soft); color: var(--pcg-primary); }
.pcg-signal--warn { background: #fdf3e0; color: #8a6100; }

/* A sponsored card sits in the grid but must never be mistaken for a result in
   it. Own border, own tint, flag always drawn. */
.pcg-finder__ad { list-style: none; }
.pcg-ad--product {
  position: relative;
  display: block;
  border: 1px solid var(--pcg-primary, #2271b1);
  border-radius: var(--pcg-radius, 6px);
  background: var(--pcg-surface-alt, #f7fafd);
  padding: var(--pcg-space-3, 12px);
}
.pcg-ad--product .pcg-ad__flag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pcg-primary, #2271b1);
  margin-bottom: 6px;
}
.pcg-ad--product .pcg-ad__inner { display: block; text-decoration: none; color: inherit; }
.pcg-ad--product .pcg-ad__image {
  display: block; width: 100%; height: auto; max-height: 150px;
  object-fit: contain; margin-bottom: 8px;
}
.pcg-ad--product .pcg-ad__text { display: block; }
.pcg-ad--product .pcg-ad__pitch {
  display: block; font-size: var(--pcg-fs-sm, 13px);
  color: var(--pcg-text-muted, #555); margin-top: 2px;
}
.pcg-ad--product .pcg-ad__price { display: block; font-weight: 700; margin-top: 6px; }
.pcg-ad--product .pcg-ad__cta {
  display: inline-block; margin-top: 8px; font-weight: 600;
  color: var(--pcg-primary, #2271b1);
}
.pcg-ad--product .pcg-ad__by {
  display: block; margin-top: 6px;
  font-size: 11px; color: var(--pcg-text-muted, #666);
}

/* ── Top rated ─────────────────────────────────────────────────────────── */

.pcg-top { max-width: var(--pcg-maxw); margin: 0 auto; font-family: var(--pcg-font); }
.pcg-top__head { margin-bottom: var(--pcg-space-4); }
.pcg-top__title { margin: 0 0 var(--pcg-space-2); font-size: var(--pcg-fs-2xl); }
.pcg-top__lede { margin: 0; max-width: 62ch; color: var(--pcg-text-muted); font-size: var(--pcg-fs-sm); line-height: 1.55; }

.pcg-top__nav {
  display: flex; gap: var(--pcg-space-2); margin: 0 0 var(--pcg-space-3);
  overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.pcg-top__chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--pcg-border); background: var(--pcg-bg);
  color: var(--pcg-text); text-decoration: none; font-size: var(--pcg-fs-sm); white-space: nowrap;
}
.pcg-top__chip:hover { border-color: var(--pcg-primary); color: var(--pcg-primary); }
.pcg-top__chip.is-active { background: var(--pcg-primary); border-color: var(--pcg-primary); color: #fff; }
.pcg-top__chip-n { font-size: 11px; opacity: .7; font-variant-numeric: tabular-nums; }

.pcg-top__filter { margin: 0 0 var(--pcg-space-5); font-size: var(--pcg-fs-xs); color: var(--pcg-text-faint); }
.pcg-top__filter a { margin-left: 4px; }

.pcg-top__section { margin-bottom: var(--pcg-space-6); }
.pcg-top__section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--pcg-space-3);
  margin-bottom: var(--pcg-space-3);
}
.pcg-top__section-head h3 { margin: 0; font-size: var(--pcg-fs-xl); }
.pcg-top__section-head a { font-size: var(--pcg-fs-sm); white-space: nowrap; }

.pcg-top__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--pcg-space-3); }
.pcg-top__list > li::marker { content: none; }

.pcg-top__item {
  display: grid; align-items: center;
  grid-template-columns: 36px 96px minmax(0, 1fr) minmax(170px, auto);
  gap: var(--pcg-space-4);
  padding: var(--pcg-space-3) var(--pcg-space-4);
  background: var(--pcg-bg); border: 1px solid var(--pcg-border); border-radius: var(--pcg-radius);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.pcg-top__item:hover { border-color: var(--pcg-border-strong); box-shadow: var(--pcg-shadow-sm); }
.pcg-top__item.is-first { border-color: #e8a33d; }

.pcg-top__rank {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--pcg-surface-alt); color: var(--pcg-text-muted);
  font-weight: 800; font-variant-numeric: tabular-nums;
}
.pcg-top__item.is-first .pcg-top__rank { background: #e8a33d; color: #1a1205; }

.pcg-top__media {
  display: flex; align-items: center; justify-content: center;
  width: 96px; aspect-ratio: 1; border-radius: var(--pcg-radius-sm); background: var(--pcg-surface);
}
.pcg-top__media img { max-width: 86%; max-height: 86%; object-fit: contain; }

.pcg-top__main { min-width: 0; }
.pcg-top__name { margin: 2px 0 4px; font-size: var(--pcg-fs-lg); line-height: 1.3; }
.pcg-top__name a { color: var(--pcg-text); text-decoration: none; }
.pcg-top__name a:hover { color: var(--pcg-primary); }

.pcg-top__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: var(--pcg-fs-sm); }
.pcg-top__rating strong { font-variant-numeric: tabular-nums; }
.pcg-top__rating a { color: var(--pcg-text-muted); }
.pcg-top__early {
  padding: 1px 7px; border-radius: 999px; cursor: help;
  background: var(--pcg-surface-alt); color: var(--pcg-text-muted);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}

.pcg-top__specs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: var(--pcg-space-2) 0 0; padding: 0; list-style: none; font-size: var(--pcg-fs-xs); }
.pcg-top__specs span { color: var(--pcg-text-faint); }

.pcg-top__quote {
  margin: var(--pcg-space-2) 0 0; padding: 0 0 0 var(--pcg-space-3);
  border-left: 3px solid var(--pcg-border-strong);
  font-size: var(--pcg-fs-sm); font-style: normal; line-height: 1.5; color: var(--pcg-text-muted);
}
.pcg-top__quote cite { display: block; margin-top: 2px; font-style: normal; font-size: var(--pcg-fs-xs); color: var(--pcg-text-faint); }

.pcg-top__buy { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; }
.pcg-top__cta { margin-top: var(--pcg-space-2); white-space: nowrap; }

.pcg-top__list--short .pcg-top__item { grid-template-columns: 32px 64px minmax(0, 1fr) minmax(150px, auto); padding: var(--pcg-space-2) var(--pcg-space-3); }
.pcg-top__list--short .pcg-top__media { width: 64px; }
.pcg-top__list--short .pcg-top__name { font-size: var(--pcg-fs-base); }
.pcg-top__list--short .pcg-top__rank { width: 32px; height: 32px; }

.pcg-top__more { margin: var(--pcg-space-4) 0 0; text-align: right; font-size: var(--pcg-fs-sm); }

.pcg-top__empty {
  padding: var(--pcg-space-5); border: 1px dashed var(--pcg-border-strong); border-radius: var(--pcg-radius);
  color: var(--pcg-text-muted); text-align: center;
}
.pcg-top__empty p { margin: 0 0 var(--pcg-space-2); }

@media (max-width: 720px) {
  .pcg-top__item,
  .pcg-top__list--short .pcg-top__item {
    grid-template-columns: 28px 64px minmax(0, 1fr);
    gap: var(--pcg-space-3); padding: var(--pcg-space-3);
  }
  .pcg-top__media, .pcg-top__list--short .pcg-top__media { width: 64px; }
  .pcg-top__rank, .pcg-top__list--short .pcg-top__rank { width: 28px; height: 28px; font-size: var(--pcg-fs-sm); }
  .pcg-top__buy {
    grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center;
    justify-content: space-between; text-align: left; gap: 4px var(--pcg-space-3);
    padding-top: var(--pcg-space-2); border-top: 1px solid var(--pcg-border);
  }
  .pcg-top__cta { margin-top: 0; margin-left: auto; }
}

/* Stars on the product card, now that ratings exist to show. */
.pcg-product-card__rating { margin: 0 0 var(--pcg-space-2); font-size: var(--pcg-fs-xs); color: var(--pcg-text-muted); }
.pcg-product-card__rating .pcg-reviews__stars { font-size: var(--pcg-fs-sm); }

/* ── Pagination (finder, builder steps, laptop results) ─────────────────── */

.pcg-pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pcg-space-2);
  justify-content: center;
  margin-top: var(--pcg-space-5);
}