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

.c-variants {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.c-variants__note {
  color: #6b7280;
  font-size: 0.95rem;
  min-height: 1.2em;
}

/* Group wrapper (new markup) */
.c-variantGroup {
  display: grid;
  gap: 8px;
}

.c-variantGroup__label {
  font-weight: 700;
  font-size: 0.95rem;
  color: #111827;
}

.c-variantGroup__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Option chip (new markup) */
.c-optionChip {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 80ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.c-optionChip:hover {
  border-color: #cbd5e1;
}

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

.c-optionChip:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.35);
  outline-offset: 2px;
}

.c-optionChip.is-selected {
  border-color: #111827;
  box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.14);
  background: #f9fafb;
  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: 8px 0 6px;
}

.c-variantOptions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.c-chip {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 0.9rem;
  cursor: pointer;
}

.c-chip.is-selected,
.c-chip[aria-pressed="true"] {
  border-color: #111827;
  box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.14);
  background: #f9fafb;
  font-weight: 700;
}

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