/* PCG Market — vendor portal and claiming.
   Same token language as the public side, but denser: this is a work surface,
   not a browse surface. */

.pcg-vp, .pcg-claim {
  max-width: 980px; margin: 0 auto;
  font-family: var(--pcg-font); color: var(--pcg-text);
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.pcg-vp__head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--pcg-space-4);
  padding-bottom: var(--pcg-space-4);
  border-bottom: 1px solid var(--pcg-border);
}
.pcg-vp__eyebrow {
  margin: 0; font-size: var(--pcg-fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--pcg-text-faint);
}
.pcg-vp__name { margin: 2px 0 4px; font-size: var(--pcg-fs-2xl); letter-spacing: -0.02em; }
.pcg-vp__meta { margin: 0; font-size: var(--pcg-fs-sm); color: var(--pcg-text-muted); }

.pcg-vp__alert {
  margin: var(--pcg-space-4) 0 0;
  padding: var(--pcg-space-3) var(--pcg-space-4);
  background: var(--pcg-warn-soft);
  border-left: 3px solid var(--pcg-warn);
  border-radius: var(--pcg-radius-sm);
  font-size: var(--pcg-fs-sm);
}

.pcg-vp__notice {
  margin: var(--pcg-space-4) 0 0;
  padding: var(--pcg-space-3) var(--pcg-space-4);
  border-radius: var(--pcg-radius-sm);
  font-size: var(--pcg-fs-sm);
}
.pcg-vp__notice--ok   { background: var(--pcg-success-soft); border-left: 3px solid var(--pcg-success); }
.pcg-vp__notice--warn { background: var(--pcg-warn-soft);    border-left: 3px solid var(--pcg-warn); }

/* ── Nav ────────────────────────────────────────────────────────────────── */

.pcg-vp__nav {
  display: flex; flex-wrap: wrap; gap: var(--pcg-space-1);
  margin: var(--pcg-space-4) 0;
  border-bottom: 1px solid var(--pcg-border);
}
.pcg-vp__nav a {
  padding: var(--pcg-space-2) var(--pcg-space-3);
  font-size: var(--pcg-fs-sm); font-weight: 600;
  color: var(--pcg-text-muted); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pcg-vp__nav a:hover { color: var(--pcg-text); }
.pcg-vp__nav a.is-active { color: var(--pcg-primary); border-bottom-color: var(--pcg-primary); }

.pcg-vp__toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--pcg-space-3); margin-bottom: var(--pcg-space-3);
}
.pcg-vp__tabs { display: flex; gap: var(--pcg-space-1); }
.pcg-vp__tabs a {
  padding: 5px var(--pcg-space-3); border-radius: 999px;
  font-size: var(--pcg-fs-sm); font-weight: 600;
  color: var(--pcg-text-muted); text-decoration: none;
}
.pcg-vp__tabs a.is-active { background: var(--pcg-surface-alt); color: var(--pcg-text); }

/* ── Panels & tables ────────────────────────────────────────────────────── */

.pcg-vp__panel {
  padding: var(--pcg-space-5);
  background: var(--pcg-bg);
  border: 1px solid var(--pcg-border);
  border-radius: var(--pcg-radius);
  margin-bottom: var(--pcg-space-4);
}
.pcg-vp__panel h2 { margin: 0 0 var(--pcg-space-2); font-size: var(--pcg-fs-lg); }
.pcg-vp__panel h3 { margin: var(--pcg-space-5) 0 var(--pcg-space-2); font-size: var(--pcg-fs-base); }

.pcg-vp__table { width: 100%; border-collapse: collapse; font-size: var(--pcg-fs-sm); }
.pcg-vp__table th {
  text-align: left; padding: var(--pcg-space-2) var(--pcg-space-3);
  font-size: var(--pcg-fs-xs); text-transform: uppercase; letter-spacing: .04em;
  color: var(--pcg-text-faint); border-bottom: 1px solid var(--pcg-border);
}
.pcg-vp__table td { padding: var(--pcg-space-3); border-bottom: 1px solid var(--pcg-border); vertical-align: middle; }
.pcg-vp__table tr.is-inactive { opacity: .5; }
.pcg-vp__table .pcg-price { font-variant-numeric: tabular-nums; white-space: nowrap; }

.pcg-vp__stats { display: flex; flex-wrap: wrap; gap: var(--pcg-space-5); margin: 0 0 var(--pcg-space-4); padding: 0; list-style: none; font-size: var(--pcg-fs-sm); }
.pcg-vp__stats strong { display: block; font-size: var(--pcg-fs-xl); font-variant-numeric: tabular-nums; }

/* ── Search & results ───────────────────────────────────────────────────── */

.pcg-vp__searchbar { display: grid; grid-template-columns: 1fr 200px auto; gap: var(--pcg-space-2); margin-top: var(--pcg-space-3); }

.pcg-vp__results { margin: 0; padding: 0; list-style: none; }
.pcg-vp__results > li {
  display: flex; align-items: center; 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);
  margin-bottom: var(--pcg-space-2);
}
.pcg-vp__results img, .pcg-vp__noimg {
  flex: 0 0 auto; width: 52px; height: 52px; object-fit: contain;
  background: var(--pcg-surface); border-radius: var(--pcg-radius-sm);
}
.pcg-vp__result-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pcg-vp__result-body span { font-size: var(--pcg-fs-xs); }

.pcg-vp__product { display: flex; gap: var(--pcg-space-4); align-items: center; padding-bottom: var(--pcg-space-4); margin-bottom: var(--pcg-space-4); border-bottom: 1px solid var(--pcg-border); }
.pcg-vp__product img { width: 76px; height: 76px; object-fit: contain; background: var(--pcg-surface); border-radius: var(--pcg-radius-sm); }
.pcg-vp__product h2 { margin: 0; }

/* ── Forms ──────────────────────────────────────────────────────────────── */

.pcg-vp__form { display: flex; flex-direction: column; gap: var(--pcg-space-4); }
.pcg-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--pcg-space-3); }
.pcg-field { display: flex; flex-direction: column; gap: 5px; border: 0; padding: 0; margin: 0; min-width: 0; }
.pcg-field > label, .pcg-field > legend {
  font-size: var(--pcg-fs-sm); font-weight: 600; padding: 0;
}
.pcg-field .pcg-input, .pcg-field .pcg-select {
  width: 100%; min-height: 42px; padding: 0 var(--pcg-space-3);
  font: inherit; font-size: var(--pcg-fs-base);
  border: 1px solid var(--pcg-border); border-radius: var(--pcg-radius-sm);
  background: var(--pcg-bg); color: var(--pcg-text); box-sizing: border-box;
}
.pcg-field textarea.pcg-input { min-height: 72px; padding: var(--pcg-space-2) var(--pcg-space-3); line-height: 1.5; }
.pcg-field .pcg-input:focus, .pcg-field .pcg-select:focus {
  outline: 2px solid var(--pcg-primary); outline-offset: 1px; border-color: var(--pcg-primary);
}
.pcg-hint { margin: 0; font-size: var(--pcg-fs-xs); color: var(--pcg-text-faint); }

.pcg-vp__actions { display: flex; flex-wrap: wrap; gap: var(--pcg-space-2); }
.pcg-btn--sm { min-height: 32px; padding: 0 var(--pcg-space-3); font-size: var(--pcg-fs-xs); }
.pcg-btn--danger { background: var(--pcg-danger-soft); color: var(--pcg-danger); border-color: transparent; }
.pcg-btn--danger:hover { background: var(--pcg-danger); color: #fff; }

.pcg-vp__danger { margin-top: var(--pcg-space-5); padding-top: var(--pcg-space-4); border-top: 1px solid var(--pcg-border); }

.pcg-vp__history { margin-top: var(--pcg-space-4); font-size: var(--pcg-fs-sm); }
.pcg-vp__history summary { cursor: pointer; color: var(--pcg-primary); }
.pcg-vp__history ul { margin: var(--pcg-space-3) 0 0; padding: 0; list-style: none; max-width: 320px; }
.pcg-vp__history li { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid var(--pcg-border); font-variant-numeric: tabular-nums; }

.pcg-vp__sample { margin-bottom: var(--pcg-space-4); font-size: var(--pcg-fs-sm); }
.pcg-vp__sample summary { cursor: pointer; color: var(--pcg-primary); }
.pcg-vp__sample pre {
  margin: var(--pcg-space-3) 0; padding: var(--pcg-space-3);
  background: var(--pcg-surface); border-radius: var(--pcg-radius-sm);
  overflow-x: auto; font-size: var(--pcg-fs-xs); font-family: var(--pcg-font-mono);
}
.pcg-vp__branches { margin: 0; padding: 0; list-style: none; }
.pcg-vp__branches li { padding: var(--pcg-space-2) 0; border-bottom: 1px solid var(--pcg-border); }
.pcg-vp__branches span { display: block; font-size: var(--pcg-fs-xs); }

/* ── Claiming ───────────────────────────────────────────────────────────── */

.pcg-claim { max-width: 620px; }
.pcg-claim h1 { font-size: var(--pcg-fs-2xl); letter-spacing: -0.02em; margin: 0 0 var(--pcg-space-2); }
.pcg-claim__card {
  padding: var(--pcg-space-5); margin: var(--pcg-space-4) 0;
  background: var(--pcg-bg); border: 1px solid var(--pcg-border); border-radius: var(--pcg-radius);
}
.pcg-claim__card h2 { margin: 0 0 var(--pcg-space-2); font-size: var(--pcg-fs-lg); }
.pcg-claim__alt summary { cursor: pointer; font-size: var(--pcg-fs-sm); color: var(--pcg-text-muted); }
.pcg-claim__resend { margin-top: var(--pcg-space-3); }
.pcg-linkbtn { background: none; border: 0; padding: 0; color: var(--pcg-primary); cursor: pointer; font: inherit; font-size: var(--pcg-fs-sm); text-decoration: underline; }

/* A one-time code is read digit by digit, so give it room. */
.pcg-code {
  font-size: var(--pcg-fs-2xl) !important;
  letter-spacing: .32em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  max-width: 260px;
}

.pcg-claim__list { margin: var(--pcg-space-4) 0; padding: 0; list-style: none; }
.pcg-claim__list li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--pcg-space-3);
  padding: var(--pcg-space-3); border: 1px solid var(--pcg-border); border-radius: var(--pcg-radius);
  margin-bottom: var(--pcg-space-2);
}
.pcg-claim__list span { display: block; font-size: var(--pcg-fs-xs); }

@media (max-width: 700px) {
  .pcg-vp__searchbar { grid-template-columns: 1fr; }
  .pcg-vp__head { flex-direction: column; }
  .pcg-vp__table thead { display: none; }
  .pcg-vp__table tr { display: block; padding: var(--pcg-space-3) 0; border-bottom: 1px solid var(--pcg-border); }
  .pcg-vp__table td { display: flex; justify-content: space-between; gap: var(--pcg-space-3); padding: 3px 0; border: 0; }
  .pcg-vp__table td::before { content: attr(data-label); font-weight: 600; color: var(--pcg-text-faint); }
}

/* ── Inline price editing ───────────────────────────────────────────────────
   The weekly job is: walk the list, change the two or three that moved, save.
   Making that one submit instead of twenty page loads is the difference
   between prices staying fresh and quietly rotting. */

.pcg-vp__hint {
  margin: 0 0 var(--pcg-space-3);
  font-size: var(--pcg-fs-sm);
  color: var(--pcg-text-muted);
  max-width: 70ch;
}

.pcg-vp__table--edit td { padding: var(--pcg-space-2) var(--pcg-space-3); }

.pcg-input--num {
  width: 100%; max-width: 120px; min-height: 36px;
  padding: 0 var(--pcg-space-2);
  font: inherit; font-size: var(--pcg-fs-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
  border: 1px solid var(--pcg-border); border-radius: var(--pcg-radius-sm);
  background: var(--pcg-bg); color: var(--pcg-text); box-sizing: border-box;
}
.pcg-input--xs { max-width: 66px; }
.pcg-input--num:focus {
  outline: 2px solid var(--pcg-primary); outline-offset: 1px; border-color: var(--pcg-primary);
}

.pcg-select--sm {
  min-height: 36px; padding: 0 var(--pcg-space-2);
  font: inherit; font-size: var(--pcg-fs-sm);
  border: 1px solid var(--pcg-border); border-radius: var(--pcg-radius-sm);
  background: var(--pcg-bg); color: var(--pcg-text);
}

.pcg-inline-unit { display: flex; align-items: center; gap: 6px; }
.pcg-inline-unit span { font-size: var(--pcg-fs-xs); color: var(--pcg-text-faint); }

.pcg-vp__more { font-size: var(--pcg-fs-xs); color: var(--pcg-primary); white-space: nowrap; }

/* Sticky save bar: on a long list the button must always be reachable. */
.pcg-vp__savebar {
  position: sticky; bottom: 0;
  display: flex; align-items: center; gap: var(--pcg-space-3);
  margin-top: var(--pcg-space-3);
  padding: var(--pcg-space-3);
  background: var(--pcg-bg);
  border: 1px solid var(--pcg-border);
  border-radius: var(--pcg-radius);
  box-shadow: var(--pcg-shadow);
}

/* ── Quick add ─────────────────────────────────────────────────────────── */

.pcg-quickadd { display: flex; align-items: flex-end; gap: var(--pcg-space-2); flex: 0 0 auto; }
.pcg-quickadd__field { display: flex; flex-direction: column; gap: 2px; }
.pcg-quickadd__field span { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--pcg-text-faint); }
.pcg-quickadd__more { align-self: center; font-size: var(--pcg-fs-xs); color: var(--pcg-text-muted); white-space: nowrap; }
.pcg-quickadd__more:hover { color: var(--pcg-primary); }

/* ── Claiming ──────────────────────────────────────────────────────────── */

.pcg-claim__steps { margin: 0 0 var(--pcg-space-4); padding-left: 1.3em; }
.pcg-claim__steps li { margin-bottom: var(--pcg-space-2); }
.pcg-claim__steps strong { display: block; }
.pcg-claim__steps span { font-size: var(--pcg-fs-sm); color: var(--pcg-text-muted); }

.pcg-claim__contact {
  padding: var(--pcg-space-4);
  background: var(--pcg-surface);
  border-radius: var(--pcg-radius);
  margin-top: var(--pcg-space-4);
}
.pcg-claim__contact h3 { margin: 0 0 4px; font-size: var(--pcg-fs-base); }
.pcg-claim__contact p { margin: 0 0 var(--pcg-space-3); font-size: var(--pcg-fs-sm); color: var(--pcg-text-muted); }
.pcg-claim__numbers { display: flex; flex-wrap: wrap; gap: var(--pcg-space-2); margin: 0; }

.pcg-claim__done { text-align: center; padding: var(--pcg-space-6) var(--pcg-space-4); }
.pcg-claim__done h1 { margin-bottom: var(--pcg-space-2); }
.pcg-lead { font-size: var(--pcg-fs-lg); color: var(--pcg-text-muted); margin: 0 auto var(--pcg-space-5); max-width: 46ch; }

/* The reference is read aloud on a phone call, so it gets room to breathe. */
.pcg-claim__ref {
  display: inline-flex; flex-direction: column; gap: 4px;
  padding: var(--pcg-space-3) var(--pcg-space-5);
  margin-bottom: var(--pcg-space-4);
  background: var(--pcg-surface); border: 1px dashed var(--pcg-border-strong);
  border-radius: var(--pcg-radius);
}
.pcg-claim__ref span { font-size: var(--pcg-fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--pcg-text-faint); }
.pcg-claim__ref strong { font-size: var(--pcg-fs-xl); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.pcg-claim__done .pcg-claim__numbers { justify-content: center; }

@media (max-width: 760px) {
  .pcg-quickadd { flex-wrap: wrap; width: 100%; }
  .pcg-vp__results > li { flex-wrap: wrap; }
  .pcg-vp__savebar { position: sticky; }
  .pcg-input--num { max-width: 100%; }
}

/* ── Guidance ──────────────────────────────────────────────────────────── */

.pcg-guide {
  margin: var(--pcg-space-4) 0 0;
  padding: var(--pcg-space-4);
  list-style: none;
  background: var(--pcg-surface);
  border-radius: var(--pcg-radius);
  font-size: var(--pcg-fs-sm);
}
.pcg-guide li { padding: var(--pcg-space-2) 0; border-bottom: 1px solid var(--pcg-border); }
.pcg-guide li:last-child { border-bottom: 0; padding-bottom: 0; }
.pcg-guide li:first-child { padding-top: 0; }
.pcg-guide strong { display: block; }
.pcg-guide em { font-style: normal; font-weight: 600; color: var(--pcg-primary); }

/* ── Front-end login ───────────────────────────────────────────────────── */

.pcg-login {
  max-width: 420px; margin: 0 auto;
  padding: var(--pcg-space-6) var(--pcg-space-5);
  background: var(--pcg-bg);
  border: 1px solid var(--pcg-border);
  border-radius: var(--pcg-radius);
}
.pcg-login h1 { margin: 0 0 var(--pcg-space-2); font-size: var(--pcg-fs-xl); }
.pcg-login .pcg-vp__form { margin-top: var(--pcg-space-4); }
.pcg-login__links { margin: var(--pcg-space-4) 0 0; font-size: var(--pcg-fs-sm); }

/* ── Claim picker / shop registration ──────────────────────────────────── */

.pcg-claim--wide { max-width: 720px; }
.pcg-claim__search { display: flex; gap: var(--pcg-space-2); margin: var(--pcg-space-4) 0; }
.pcg-claim__search .pcg-input { flex: 1; min-height: 44px; padding: 0 var(--pcg-space-3);
  border: 1px solid var(--pcg-border); border-radius: var(--pcg-radius-sm); font: inherit; }

.pcg-claim__register {
  margin-top: var(--pcg-space-5);
  padding: var(--pcg-space-5);
  background: var(--pcg-surface);
  border-radius: var(--pcg-radius);
}
.pcg-claim__register h2 { margin: 0 0 var(--pcg-space-2); font-size: var(--pcg-fs-lg); }
.pcg-claim__register .pcg-vp__form { margin-top: var(--pcg-space-4); }
.pcg-vp__notice .pcg-btn { margin-left: var(--pcg-space-2); }

/* ── Claim page ────────────────────────────────────────────────────────── */

.pcg-claim__hero { margin-bottom: var(--pcg-space-5); }
.pcg-claim__hero h1 { margin: 0 0 var(--pcg-space-2); font-size: var(--pcg-fs-2xl); letter-spacing: -0.02em; }
.pcg-claim__hero p { margin: 0; max-width: 56ch; color: var(--pcg-text-muted); }

.pcg-claim__panel {
  padding: var(--pcg-space-5);
  margin-bottom: var(--pcg-space-4);
  background: var(--pcg-bg);
  border: 1px solid var(--pcg-border);
  border-radius: var(--pcg-radius);
}
.pcg-claim__panel--alt { background: var(--pcg-surface); }

/* Numbered steps: two panels read as a sequence rather than two options. */
.pcg-claim__step {
  display: flex; align-items: center; gap: var(--pcg-space-3);
  margin: 0 0 var(--pcg-space-3); font-size: var(--pcg-fs-lg);
}
.pcg-claim__step span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: 0 0 auto;
  background: var(--pcg-primary); color: #fff;
  border-radius: 50%; font-size: var(--pcg-fs-sm); font-weight: 700;
}

.pcg-claim__search { display: flex; gap: var(--pcg-space-2); margin: 0 0 var(--pcg-space-4); }
.pcg-claim__search .pcg-input {
  flex: 1; min-height: 46px; padding: 0 var(--pcg-space-3);
  border: 1px solid var(--pcg-border); border-radius: var(--pcg-radius-sm);
  font: inherit; font-size: var(--pcg-fs-base); box-sizing: border-box;
}
.pcg-claim__search .pcg-btn { min-height: 46px; }

.pcg-claim__list { margin: 0; padding: 0; list-style: none; }
.pcg-claim__list li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--pcg-space-3);
  padding: var(--pcg-space-3);
  border: 1px solid var(--pcg-border); border-radius: var(--pcg-radius);
  margin-bottom: var(--pcg-space-2);
  transition: border-color .15s ease;
}
.pcg-claim__list li:hover { border-color: var(--pcg-primary); }
.pcg-claim__shop strong { display: block; }
.pcg-claim__shop span { display: block; font-size: var(--pcg-fs-sm); color: var(--pcg-text-muted); }
.pcg-claim__none { margin: 0; color: var(--pcg-text-muted); font-size: var(--pcg-fs-sm); }
.pcg-claim__back { margin-bottom: var(--pcg-space-3); font-size: var(--pcg-fs-sm); }
.pcg-claim__foot { margin-top: var(--pcg-space-4); font-size: var(--pcg-fs-sm); }

.pcg-fieldset {
  border: 0; padding: 0; margin: 0 0 var(--pcg-space-4);
  display: flex; flex-direction: column; gap: var(--pcg-space-3);
}
.pcg-fieldset legend {
  padding: 0; margin-bottom: var(--pcg-space-1);
  font-size: var(--pcg-fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--pcg-text-faint);
}

/* ── Claim: hero and step rail ─────────────────────────────────────────── */

.pcg-claim__eyebrow {
  margin: 0 0 var(--pcg-space-1);
  font-size: var(--pcg-fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--pcg-text-faint);
}
.pcg-claim__benefits {
  display: flex; flex-wrap: wrap; gap: var(--pcg-space-2) var(--pcg-space-4);
  margin: var(--pcg-space-3) 0 0; padding: 0; list-style: none;
  font-size: var(--pcg-fs-sm); color: var(--pcg-text-muted);
}
.pcg-claim__benefits li { display: flex; align-items: center; gap: 6px; }
.pcg-claim__benefits li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--pcg-success); flex: 0 0 auto;
}

/* A two-step rail reads as a short process rather than an open-ended form. */
.pcg-steps {
  display: flex; flex-wrap: wrap; gap: var(--pcg-space-2);
  margin: 0 0 var(--pcg-space-4); padding: 0; list-style: none;
  counter-reset: none;
}
.pcg-steps__item {
  display: flex; align-items: center; gap: var(--pcg-space-2);
  flex: 1 1 200px; min-width: 0;
  padding: var(--pcg-space-3);
  background: var(--pcg-surface);
  border: 1px solid transparent;
  border-radius: var(--pcg-radius);
  font-size: var(--pcg-fs-sm);
}
.pcg-steps__item.is-current { background: var(--pcg-bg); border-color: var(--pcg-primary); }
.pcg-steps__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: 0 0 auto;
  border-radius: 50%; font-size: var(--pcg-fs-xs); font-weight: 700;
  background: var(--pcg-surface-alt); color: var(--pcg-text-muted);
}
.pcg-steps__item.is-current .pcg-steps__num { background: var(--pcg-primary); color: #fff; }
.pcg-steps__item strong { display: block; line-height: 1.3; }
.pcg-steps__item span { display: block; font-size: var(--pcg-fs-xs); color: var(--pcg-text-faint); }

.pcg-btn--lg { min-height: 48px; padding: 0 var(--pcg-space-5); font-size: var(--pcg-fs-base); }

.pcg-claim__alt { margin-top: var(--pcg-space-4); }
.pcg-claim__alt summary {
  cursor: pointer; padding: var(--pcg-space-2) 0;
  font-size: var(--pcg-fs-sm); color: var(--pcg-text-muted);
}
.pcg-claim__alt summary:hover { color: var(--pcg-primary); }

.pcg-inline-form { display: flex; gap: 6px; align-items: center; }

/* ── Defend against theme and extension text-decoration ────────────────────
   Everything inside these blocks was rendering underlined on hover — headings,
   labels, even placeholder text. That comes from a global rule (a theme's
   `:hover` selector, or a translation extension marking every text node), and
   it makes a form look broken. So decoration is stated explicitly here rather
   than inherited: only real links get it, and only when hovered.

   WHAT THIS CANNOT DO, which cost a bug: a text decoration set on an ANCESTOR
   block is drawn across its in-flow descendants. It is not inherited, so no
   amount of `text-decoration: none` on a child removes it — `!important` does
   not help either, because the child is not what is being decorated. The rules
   below only neutralise decoration set directly on these elements. When every
   word on a page underlines together, look for a `:hover` rule on the wrapper
   and fix it there; the cause of the last one was a class-name collision
   between a link and a page wrapper. */

.pcg-vp, .pcg-claim, .pcg-login, .pcg-shop, .pcg-directory,
.pcg-vp *, .pcg-claim *, .pcg-login *, .pcg-shop *, .pcg-directory * {
  text-decoration: none;
}

/* Links: no underline at rest, underline on hover — deliberate, not inherited. */
.pcg-vp a:not(.pcg-btn), .pcg-claim a:not(.pcg-btn),
.pcg-login a:not(.pcg-btn), .pcg-shop a:not(.pcg-btn) {
  text-decoration: none;
  color: var(--pcg-primary);
}
.pcg-vp a:not(.pcg-btn):hover, .pcg-claim a:not(.pcg-btn):hover,
.pcg-login a:not(.pcg-btn):hover, .pcg-shop a:not(.pcg-btn):hover {
  text-decoration: underline;
}
.pcg-btn, .pcg-btn:hover, .pcg-btn:focus { text-decoration: none !important; }

/* ── Auth screens ──────────────────────────────────────────────────────── */

.pcg-auth {
  max-width: 420px; margin: 0 auto;
  padding: var(--pcg-space-6) var(--pcg-space-5);
  background: var(--pcg-bg);
  border: 1px solid var(--pcg-border);
  border-radius: var(--pcg-radius-lg);
  box-shadow: var(--pcg-shadow-sm);
}
.pcg-auth h1 { margin: 0 0 var(--pcg-space-2); font-size: var(--pcg-fs-xl); letter-spacing: -0.01em; }
.pcg-auth__sub { margin: 0 0 var(--pcg-space-5); color: var(--pcg-text-muted); font-size: var(--pcg-fs-sm); }

/* Google first: it is one tap versus typing a password, so it gets the
   position of least resistance. */
.pcg-google {
  display: flex; align-items: center; justify-content: center; gap: var(--pcg-space-2);
  width: 100%; min-height: 46px;
  padding: 0 var(--pcg-space-4);
  background: var(--pcg-bg);
  border: 1px solid var(--pcg-border-strong);
  border-radius: var(--pcg-radius-sm);
  font: inherit; font-size: var(--pcg-fs-base); font-weight: 600;
  color: var(--pcg-text);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.pcg-google:hover { background: var(--pcg-surface); border-color: var(--pcg-text-faint); color: var(--pcg-text); }
.pcg-google svg { width: 18px; height: 18px; flex: 0 0 auto; }

.pcg-auth__or {
  display: flex; align-items: center; gap: var(--pcg-space-3);
  margin: var(--pcg-space-4) 0;
  font-size: var(--pcg-fs-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--pcg-text-faint);
}
.pcg-auth__or::before, .pcg-auth__or::after {
  content: ""; flex: 1; height: 1px; background: var(--pcg-border);
}

.pcg-auth__tabs {
  display: flex; gap: 2px; padding: 3px;
  margin-bottom: var(--pcg-space-4);
  background: var(--pcg-surface); border-radius: var(--pcg-radius-sm);
}
.pcg-auth__tabs a {
  flex: 1; text-align: center; padding: var(--pcg-space-2);
  border-radius: calc(var(--pcg-radius-sm) - 1px);
  font-size: var(--pcg-fs-sm); font-weight: 600;
  color: var(--pcg-text-muted);
}
.pcg-auth__tabs a.is-active { background: var(--pcg-bg); color: var(--pcg-text); box-shadow: var(--pcg-shadow-sm); }
.pcg-auth__links { margin: var(--pcg-space-4) 0 0; font-size: var(--pcg-fs-sm); text-align: center; }
.pcg-auth__note {
  margin: var(--pcg-space-4) 0 0; padding-top: var(--pcg-space-3);
  border-top: 1px solid var(--pcg-border);
  font-size: var(--pcg-fs-xs); color: var(--pcg-text-faint); text-align: center;
}

/* ── Dashboard launcher ────────────────────────────────────────────────────
   A vendor who signs in and cannot find their dashboard simply leaves, and the
   theme's menu is not ours to restructure. This sits out of the way until it
   is needed. */

.pcgm-launcher {
  position: fixed;
  right: var(--pcg-space-4);
  bottom: var(--pcg-space-4);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: var(--pcg-space-2);
  padding: var(--pcg-space-3) var(--pcg-space-4);
  background: var(--pcg-text);
  color: #fff !important;
  border-radius: 999px;
  box-shadow: var(--pcg-shadow-lg);
  font-family: var(--pcg-font);
  font-size: var(--pcg-fs-sm);
  font-weight: 600;
  text-decoration: none !important;
  transition: transform .15s ease, background-color .15s ease;
}
.pcgm-launcher:hover { background: var(--pcg-primary); transform: translateY(-1px); color: #fff !important; }

.pcgm-launcher__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--pcg-warn); color: #2a1a00;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}

.pcgm-menu-dashboard > a { font-weight: 600; }

@media (max-width: 600px) {
  .pcgm-launcher { right: var(--pcg-space-3); bottom: var(--pcg-space-3); padding: var(--pcg-space-2) var(--pcg-space-3); }
}
@media (prefers-reduced-motion: reduce) {
  .pcgm-launcher { transition: none; }
  .pcgm-launcher:hover { transform: none; }
}

/* ── Warranty value + unit ─────────────────────────────────────────────────
   A shop offering three years typing "3" into a months-only field is a mistake
   nobody catches until a buyer turns up expecting cover that expired. The unit
   sits attached to the number so the pair reads as one control. */

/* Both halves get the SAME explicit height. Relying on align-items: stretch let
   the theme's own select styling win, so the unit sat shorter than the number
   and the whole control looked broken. */
.pcg-unitfield {
  --pcg-unit-h: 38px;
  display: inline-flex;
  align-items: stretch;
  height: var(--pcg-unit-h);
  border: 1px solid var(--pcg-border);
  border-radius: var(--pcg-radius-sm);
  background: var(--pcg-bg);
  overflow: hidden;
  box-sizing: border-box;
  vertical-align: middle;
}
.pcg-unitfield:focus-within { outline: 2px solid var(--pcg-primary); outline-offset: 1px; border-color: var(--pcg-primary); }

.pcg-unitfield .pcg-input,
.pcg-unitfield input[type="number"] {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  width: 62px;
  text-align: right;
  padding: 0 var(--pcg-space-2);
  font: inherit; font-size: var(--pcg-fs-sm); line-height: 1;
  font-variant-numeric: tabular-nums;
  background: transparent;
  box-sizing: border-box;
}

.pcg-unitfield__unit {
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-left: 1px solid var(--pcg-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--pcg-surface);
  padding: 0 22px 0 var(--pcg-space-2);
  font: inherit; font-size: var(--pcg-fs-xs); line-height: 1;
  color: var(--pcg-text-muted);
  cursor: pointer;
  box-sizing: border-box;

  /* The theme's select arrow is sized for a taller control, so draw our own. */
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%235c6672' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 9px 5px;
}
.pcg-unitfield__unit:focus { outline: none; }

.pcg-field .pcg-unitfield { --pcg-unit-h: 42px; align-self: flex-start; }
.pcg-field .pcg-unitfield input[type="number"] { width: 90px; font-size: var(--pcg-fs-base); }
.pcg-field .pcg-unitfield .pcg-unitfield__unit { font-size: var(--pcg-fs-sm); }

/* ── Multi-select toggles ──────────────────────────────────────────────────
   Ports were a free-text JSON box — impossible to fill consistently and
   impossible to filter afterwards. A row of toggles is both. */

.pcg-toggles { display: flex; flex-wrap: wrap; gap: var(--pcg-space-2); }
.pcg-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px var(--pcg-space-3);
  background: var(--pcg-bg);
  border: 1px solid var(--pcg-border);
  border-radius: 999px;
  font-size: var(--pcg-fs-sm);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.pcg-toggle:hover { border-color: var(--pcg-border-strong); }
.pcg-toggle input { margin: 0; }
.pcg-toggle:has(input:checked) {
  background: var(--pcg-primary-soft);
  border-color: var(--pcg-primary);
  font-weight: 600;
}

.pcg-field--wide { grid-column: 1 / -1; }

.pcg-moredetails {
  margin: var(--pcg-space-4) 0;
  padding: var(--pcg-space-4);
  background: var(--pcg-surface);
  border-radius: var(--pcg-radius);
}
.pcg-moredetails summary {
  cursor: pointer; font-weight: 600; font-size: var(--pcg-fs-base);
  color: var(--pcg-primary);
}
.pcg-moredetails[open] summary { margin-bottom: var(--pcg-space-3); }

/* ── Bulk price entry ──────────────────────────────────────────────────────
   Type, press Add, wait for a page load, find your place again — repeated
   forty times is why a shop lists four products instead of forty. */

.pcg-bulkadd__lead { margin: 0 0 var(--pcg-space-3); font-size: var(--pcg-fs-sm); color: var(--pcg-text-muted); }
.pcg-bulkadd__bar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pcg-space-3);
  margin-top: var(--pcg-space-3); padding: var(--pcg-space-3) var(--pcg-space-4);
  background: var(--pcg-bg); border: 1px solid var(--pcg-border);
  border-radius: var(--pcg-radius); box-shadow: var(--pcg-shadow);
}

.pcg-vp__listed {
  display: block; margin-top: 2px;
  font-size: var(--pcg-fs-xs); color: var(--pcg-success);
}

/* The theme's select styling made this taller than the fields beside it, so
   the row no longer lined up. Sized explicitly, like the warranty unit. */
.pcg-minisel {
  height: 36px; min-height: 0; margin: 0;
  padding: 0 26px 0 var(--pcg-space-2);
  border: 1px solid var(--pcg-border); border-radius: var(--pcg-radius-sm);
  background-color: var(--pcg-bg); color: var(--pcg-text);
  font: inherit; font-size: var(--pcg-fs-sm); line-height: 1;
  box-sizing: border-box; cursor: pointer;

  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%235c6672' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 9px 5px;
}
.pcg-minisel:focus { outline: 2px solid var(--pcg-primary); outline-offset: 1px; border-color: var(--pcg-primary); }

/* Promotions screen. */
.pcg-promo__grid {
  display: grid; gap: var(--pcg-space-3);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.pcg-promo__slot {
  border: 1px solid var(--pcg-border); border-radius: var(--pcg-radius);
  padding: var(--pcg-space-3); background: var(--pcg-surface);
}
.pcg-promo__slot.is-full { opacity: .65; }
.pcg-promo__slot h3 { margin: 0 0 6px; }
.pcg-promo__price { margin: 10px 0; font-size: var(--pcg-fs-lg, 18px); }
.pcg-promo__full { color: var(--pcg-text-muted); font-style: italic; }
.pcg-promo__confirm { border-left: 4px solid var(--pcg-primary); }