.vf-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--vf-space-2);
  min-height: var(--vf-button-height); padding: var(--vf-space-2) var(--vf-space-6);
  border: 1px solid transparent; border-radius: var(--vf-radius-pill);
  font-size: var(--vf-type-button); font-weight: var(--vf-weight-semibold); line-height: 1.3;
  text-align: center; text-decoration: none;
  transition: background-color var(--vf-duration-fast) var(--vf-ease), border-color var(--vf-duration-fast) var(--vf-ease), box-shadow var(--vf-duration-fast) var(--vf-ease);
}
.vf-button--primary { color: var(--vf-on-dark); background: var(--vf-green-600); }
.vf-button--primary:hover { color: var(--vf-on-dark); background: var(--vf-green-700); }
.vf-button--primary:active { background: var(--vf-green-800); }
.vf-button--secondary { color: var(--vf-green-700); background: var(--vf-surface); border-color: var(--vf-green-600); }
.vf-button--secondary:hover { color: var(--vf-green-950); background: var(--vf-green-100); }
.vf-button--ghost { color: var(--vf-green-700); background: transparent; }
.vf-button--ghost:hover { color: var(--vf-green-950); background: var(--vf-green-100); }
.vf-button--block { width: 100%; }
.vf-button--square { border-radius: var(--vf-radius-sm); }
.vf-button:disabled, .vf-button[aria-disabled="true"] { color: var(--vf-text-muted); background: var(--vf-cream); border-color: var(--vf-border-strong); cursor: not-allowed; box-shadow: none; }
.vf-card { border: var(--vf-card-border); border-radius: var(--vf-radius-lg); background: var(--vf-surface); box-shadow: var(--vf-shadow-card); padding: var(--vf-space-6); min-width: 0; }
.vf-card--quiet { background: var(--vf-off-white); box-shadow: none; }
.vf-pill { display: inline-flex; align-items: center; gap: var(--vf-space-1); padding: var(--vf-space-1) var(--vf-space-3); border-radius: var(--vf-radius-pill); background: var(--vf-green-100); color: var(--vf-green-700); font-size: var(--vf-type-small); font-weight: var(--vf-weight-semibold); line-height: 1.4; }
.vf-pill--solid { background: var(--vf-green-600); color: var(--vf-on-dark); }
.vf-icon-button { display: inline-flex; align-items: center; justify-content: center; width: var(--vf-touch-target); height: var(--vf-touch-target); flex: 0 0 auto; border: var(--vf-control-border); border-radius: var(--vf-radius-pill); background: var(--vf-surface); color: var(--vf-green-700); }
.vf-icon-button:hover { background: var(--vf-green-100); }
.vf-icon-button:disabled { color: var(--vf-text-muted); background: var(--vf-cream); cursor: not-allowed; }
.vf-alert { display: flex; align-items: flex-start; gap: var(--vf-space-3); padding: var(--vf-space-4); border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-cream); color: var(--vf-text); font-size: var(--vf-type-small); }
.vf-alert > p { margin: 0; }
.vf-alert--success { background: var(--vf-success-surface); color: var(--vf-success); border-color: var(--vf-success); }
.vf-alert--warning { background: var(--vf-warning-surface); color: var(--vf-warning); border-color: var(--vf-warning); }
.vf-alert--error { background: var(--vf-error-surface); color: var(--vf-error); border-color: var(--vf-error); }
.vf-field { display: grid; gap: var(--vf-space-2); }
.vf-field > label, .vf-field__label { font-size: var(--vf-type-small); font-weight: var(--vf-weight-medium); }
.vf-field :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  width: 100%; min-height: var(--vf-input-height); padding: var(--vf-space-3) var(--vf-space-4);
  border: var(--vf-control-border); border-radius: var(--vf-radius-sm); background: var(--vf-surface); color: var(--vf-text);
}
.vf-field textarea { min-height: 7rem; resize: vertical; }
.vf-field :where(input, textarea)::placeholder { color: var(--vf-text-muted); opacity: 1; }
.vf-field :where(input, select, textarea)[aria-invalid="true"] { border-color: var(--vf-error); }
.vf-field :where(input, select, textarea):disabled { background: var(--vf-cream); color: var(--vf-text-muted); cursor: not-allowed; }
.vf-field__hint, .vf-field__error { margin: 0; font-size: var(--vf-type-small); }
.vf-field__hint { color: var(--vf-text-muted); }
.vf-field__error { color: var(--vf-error); }
.vf-section-heading { display: grid; gap: var(--vf-space-3); max-width: var(--vf-reading-width); margin-block-end: var(--vf-space-8); }
.vf-section-heading > * { margin: 0; }
.vf-section-heading__eyebrow { color: var(--vf-green-700); font-size: var(--vf-type-caption); font-weight: var(--vf-weight-semibold); letter-spacing: .06em; text-transform: uppercase; }
.vf-section-heading::after { content: ''; width: 2rem; height: 2px; background: var(--vf-green-600); }
.vf-quantity { display: inline-flex; align-items: stretch; max-width: 100%; min-height: var(--vf-touch-target); border: var(--vf-control-border); border-radius: var(--vf-radius-md); background: var(--vf-surface); }
.vf-quantity :where(button, input, output) { min-width: var(--vf-touch-target); min-height: var(--vf-touch-target); border: 0; background: transparent; color: var(--vf-text); text-align: center; }
.vf-quantity button { border-radius: var(--vf-radius-md); font-size: 1.25rem; }
.vf-quantity button:hover { background: var(--vf-green-100); }
.vf-quantity button:disabled { color: var(--vf-text-muted); background: var(--vf-cream); }
.vf-quantity :where(input, output) { width: 5rem; padding: var(--vf-space-2); border-inline: var(--vf-card-border); border-radius: 0; font-variant-numeric: tabular-nums; }
.vf-quantity output { display: inline-flex; align-items: center; justify-content: center; }
.vf-stepper { display: flex; align-items: flex-start; list-style: none; padding: 0; margin: 0; counter-reset: vf-step; }
.vf-stepper > li { flex: 1; min-width: 0; position: relative; display: grid; justify-items: center; gap: var(--vf-space-2); padding-inline: var(--vf-space-1); text-align: center; font-size: var(--vf-type-small); counter-increment: vf-step; }
.vf-stepper > li::before { content: counter(vf-step); display: grid; place-items: center; width: var(--vf-touch-target); height: var(--vf-touch-target); border: var(--vf-card-border); border-radius: 50%; background: var(--vf-cream); color: var(--vf-text); z-index: 1; }
.vf-stepper > li:not(:last-child)::after { content: ''; position: absolute; inset-block-start: calc(var(--vf-touch-target) / 2); inset-inline-start: 50%; width: 100%; border-block-start: 1px solid var(--vf-border-strong); }
.vf-stepper > li[aria-current="step"] { color: var(--vf-green-700); font-weight: var(--vf-weight-bold); }
.vf-stepper > li[aria-current="step"]::before, .vf-stepper > li.is-complete::before { color: var(--vf-on-dark); background: var(--vf-green-600); border-color: var(--vf-green-600); }
.vf-stepper > li[aria-current="step"]::before { outline: 2px solid var(--vf-green-600); outline-offset: 3px; }
.vf-radio-card { display: flex; align-items: flex-start; gap: var(--vf-space-3); min-height: var(--vf-touch-target); padding: var(--vf-space-4); border: var(--vf-control-border); border-radius: var(--vf-radius-md); background: var(--vf-surface); color: var(--vf-text); cursor: pointer; }
.vf-radio-card input { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; margin: .15rem 0 0; accent-color: var(--vf-green-600); }
.vf-radio-card:has(input:checked) { border-color: var(--vf-green-600); background: var(--vf-success-surface); }
.vf-radio-card:has(input:focus-visible) { outline: var(--vf-focus-width) solid var(--vf-focus); outline-offset: var(--vf-focus-offset); }
.vf-radio-card:has(input:disabled) { cursor: not-allowed; background: var(--vf-cream); color: var(--vf-text-muted); }
.vf-radio-card__title { display: block; font-weight: var(--vf-weight-semibold); }
.vf-radio-card__description { display: block; margin-block-start: var(--vf-space-1); font-size: var(--vf-type-small); }
[data-vf-wishlist][aria-pressed="true"]{color:var(--vf-green-700)} [data-vf-wishlist][aria-pressed="true"] svg{fill:currentColor}