.cg-field,
.cg-fieldset {
  display: grid;
  gap: var(--cg-space-2);
  padding: var(--cg-space-4);
  border: var(--cg-border);
  border-radius: var(--cg-radius-lg);
  background: var(--cg-color-surface);
}

.cg-field label,
.cg-fieldset legend {
  font-size: var(--cg-font-size-label);
  font-weight: var(--cg-font-weight-semibold);
}

.cg-field input,
.cg-field select,
.cg-field textarea {
  width: 100%;
  min-height: var(--cg-control-height);
  border: var(--cg-border);
  border-radius: var(--cg-radius-md);
  padding: 0 var(--cg-space-4);
  font-family: var(--cg-font-sans);
  font-size: 1rem;
  color: var(--cg-color-ink-900);
  background: var(--cg-color-surface);
}

.cg-field textarea {
  padding-block: var(--cg-space-3);
  min-height: 7rem;
}

@media (max-width: 47.99rem) {
  .cg-field input,
  .cg-field select,
  .cg-field textarea {
    min-height: var(--cg-control-height-lg);
  }
}

.cg-help {
  color: var(--cg-color-ink-700);
  font-size: var(--cg-font-size-sm);
}

.cg-input-error-wrap {
  position: relative;
}

.cg-input-error-wrap > span {
  position: absolute;
  top: 50%;
  right: var(--cg-space-3);
  transform: translateY(-50%);
  color: var(--cg-color-error);
  font-weight: 700;
}

.has-error input {
  border-color: var(--cg-color-error);
}

.cg-error-text {
  color: var(--cg-color-error);
  font-size: var(--cg-font-size-sm);
}

.cg-check-control {
  display: grid;
  grid-template-columns: var(--cg-size-md) 1fr;
  align-items: center;
  min-height: var(--cg-touch-target);
  gap: var(--cg-space-3);
}

.cg-check-control input {
  inline-size: var(--cg-icon-md);
  block-size: var(--cg-icon-md);
}

.cg-quantity {
  display: grid;
  grid-template-columns: var(--cg-control-height) 1fr var(--cg-control-height);
  border: var(--cg-border);
  border-radius: var(--cg-radius-md);
  overflow: hidden;
}

.cg-quantity button,
.cg-quantity input {
  min-height: var(--cg-control-height);
  border: 0;
  background: var(--cg-color-surface);
  text-align: center;
}