/* Shared commerce design tokens — safe on cart + checkout */
:root {
  --vs-commerce-ink: var(--vs-ink, #252822);
  --vs-commerce-muted: var(--vs-muted, #575b54);
  --vs-commerce-line: var(--vs-line, #d8d8d2);
  --vs-commerce-surface: var(--vs-surface, #fff);
  --vs-commerce-surface-tint: var(--vs-surface-tint, #f7f5f0);
  --vs-commerce-action: var(--vs-action, #eee7db);
  --vs-commerce-focus: var(--vs-focus, #697d5a);
  --vs-commerce-brand: #58743c;
  --vs-commerce-brand-hover: #4a6333;
  --vs-commerce-font: var(--vs-font-sans, "Proxima Nova", Arial, sans-serif);
  --vs-commerce-container: var(--vs-container-max, 1200px);
}

.vs-commerce {
  width: 100%;
  padding: 0 0 72px;
  color: var(--vs-commerce-ink);
  font-family: var(--vs-commerce-font);
}
.vs-commerce > .container.w-container {
  width: 100%;
  max-width: var(--vs-commerce-container);
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}
.vs-commerce *,
.vs-commerce *::before,
.vs-commerce *::after { box-sizing: border-box; }
.vs-commerce a:focus-visible,
.vs-commerce button:focus-visible,
.vs-commerce input:focus-visible {
  outline: 2px solid var(--vs-commerce-focus);
  outline-offset: 2px;
}
.vs-commerce .commerce-page-header { margin: 24px 0 40px; }
.vs-commerce .commerce-page-title {
  margin: 0 0 12px;
  color: var(--vs-commerce-ink);
  font: 400 48px/48px var(--vs-commerce-font);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.vs-commerce .commerce-page-subtitle {
  margin: 0;
  max-width: 42rem;
  color: var(--vs-commerce-muted);
  font: 400 16px/24px var(--vs-commerce-font);
}
@media (max-width: 767px) {
  .vs-commerce > .container.w-container { padding-left: 20px; padding-right: 20px; }
  .vs-commerce { padding-bottom: 64px; }
  .vs-commerce .commerce-page-header { margin-bottom: 24px; }
  .vs-commerce .commerce-page-title { font-size: 32px; line-height: 36px; }
  .vs-commerce .commerce-page-subtitle { font-size: 14px; line-height: 21px; }
}