/* Variant selector component
   Supports 1..N attributes and keeps selection obvious + accessible.
*/

.c-variants {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-3);
}

.c-variants__note {
  color: var(--n-600);
  font-size: 0.95rem;
  min-height: 1.2em;
}

/* Group wrapper (new markup) */
.c-variantGroup {
  display: grid;
  gap: var(--s-2);
}

.c-variantGroup__label {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--n-900);
}

.c-variantGroup__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* Option chip (new markup) */
.c-optionChip {
  border: 1px solid var(--n-200);
  background: var(--bg-0);
  border-radius: var(--r-pill);
  padding: 7px var(--s-3);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  color: var(--n-900);
  transition: transform 80ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.c-optionChip:hover {
  border-color: var(--n-300);
}

.c-optionChip:active {
  transform: translateY(1px);
}

.c-optionChip:focus-visible {
  outline: 3px solid rgba(17, 102, 214, 0.35);
  outline-offset: 2px;
}

.c-optionChip.is-selected {
  border-color: var(--n-800);
  box-shadow: 0 0 0 2px rgba(32, 42, 60, 0.14);
  background: var(--bg-50);
  font-weight: 700;
}

.c-optionChip.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ------------------------------------------------------------------
   Backwards-compatible styles (older markup / other pages)
   ------------------------------------------------------------------ */

.c-variantGroupTitle {
  font-weight: 700;
  margin: var(--s-2) 0 6px;
  color: var(--n-900);
}

.c-variantOptions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.c-chip {
  border: 1px solid var(--n-200);
  background: var(--bg-0);
  border-radius: var(--r-pill);
  padding: 7px var(--s-3);
  font-size: 0.9rem;
  color: var(--n-900);
  cursor: pointer;
}

.c-chip.is-selected,
.c-chip[aria-pressed="true"] {
  border-color: var(--n-800);
  box-shadow: 0 0 0 2px rgba(32, 42, 60, 0.14);
  background: var(--bg-50);
  font-weight: 700;
}

.c-chip.is-disabled,
.c-chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}