.variants-editor { display: grid; gap: 16px; }
.variants-editor h5 { margin: 0 0 4px; font-size: var(--font-size-base, 0.875rem); }
.variants-editor__hint { margin: 0 0 8px; color: var(--text-secondary, #6b7280); font-size: var(--font-size-sm, 0.8125rem); }

.attribute-card {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-color, #d3dad9);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.attribute-card--new { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.attribute-card__head { display: flex; align-items: center; gap: 8px; }
.attribute-card__tag {
  font-size: var(--font-size-xs, 0.75rem); text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-secondary, #6b7280); border: 1px solid var(--border-color, #d3dad9);
  border-radius: var(--radius-full, 999px); padding: 1px 8px;
}
.attribute-card__remove {
  margin-left: auto; border: none; background: transparent; cursor: pointer;
  font-size: var(--font-size-lg, 1rem); color: var(--text-secondary, #6b7280);
  &:hover { color: var(--error-color); }
}

.attribute-card__values { display: flex; flex-wrap: wrap; gap: 6px; }
.attribute-card__add { display: flex; align-items: center; gap: 8px; }
.attribute-card__color-toggle { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-sm, 0.8125rem); }

.value-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: var(--radius-full, 999px);
  border: 1px solid var(--border-color, #d3dad9);
  font-size: var(--font-size-sm, 0.8125rem);

  button {
    border: none; background: transparent; cursor: pointer; padding: 0;
    color: var(--text-secondary, #6b7280); font-size: var(--font-size-sm, 0.8125rem); line-height: 1;
  }
}

.value-chip__label:empty { display: none; }

.value-chip__swatch {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  display: inline-block;
}

.variants-editor__list { display: grid; gap: 10px; }

.variant-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-color, #d3dad9);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary, #f7f8f8);
}

.variant-card__combo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.variant-card__remove {
  margin-left: auto; border: none; background: transparent; cursor: pointer;
  color: var(--text-secondary, #6b7280); font-size: var(--font-size-sm, 0.8125rem); text-decoration: underline;
}

.variant-card__fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;

  label { display: grid; gap: 4px; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #6b7280); }
}

.variant-card__prices { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.price-row {
  display: flex; align-items: center; gap: 6px;

  app-input { width: 100px; }

  button { border: none; background: transparent; cursor: pointer; color: var(--text-secondary, #6b7280); }
}
.price-row__currency { font-weight: var(--font-weight-bold, 700); font-size: var(--font-size-sm, 0.8125rem); min-width: 32px; }
.price-row--add { gap: 4px; }

@media (max-width: 640px) {
  .variant-card__fields { grid-template-columns: 1fr; }
}
