/* PP Variation Groups — frontend styles
   Includes both the product card variant count and the PDP pill switcher. */

/* ── Shop card variant count ─────────────────────────────────────────────── */

.pp-card__variants {
  font-size: var(--pp-fs-xs);
  font-weight: var(--pp-fw-medium);
  color: var(--pp-magenta);
  margin-top: var(--pp-sp-1);
}

/* ── PDP pill switcher ───────────────────────────────────────────────────── */

.pp-vg-pills {
  margin: 0 0 20px;
}

.pp-vg-pills__label {
  font-family: var(--pp-font);
  font-size: var(--pp-fs-xs);
  font-weight: var(--pp-fw-semibold);
  color: var(--pp-text-3);
  text-transform: uppercase;
  letter-spacing: var(--pp-ls-kicker);
  margin: 0 0 var(--pp-sp-2);
}

.pp-vg-pills__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pp-sp-2);
}

/* Base pill */
.pp-vg-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px var(--pp-sp-4);
  border-radius: var(--pp-r-md);
  border: var(--pp-bw-mid) solid var(--pp-border-strong);
  background: var(--pp-bg);
  font-family: var(--pp-font);
  font-size: var(--pp-fs-sm);
  font-weight: var(--pp-fw-medium);
  color: var(--pp-ink);
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

/* Hover state for link pills */
a.pp-vg-pill:hover {
  border-color: var(--pp-magenta);
  background: var(--pp-bg-soft);
  color: var(--pp-magenta);
}

/* Active / current product pill */
.pp-vg-pill--active {
  border-color: var(--pp-magenta);
  background: var(--pp-magenta-soft);
  color: var(--pp-magenta);
  font-weight: var(--pp-fw-semibold);
  cursor: default;
}