/* Neutral foundation. Not enqueued by the admin plugin. Scope overrides per storefront root. */
.ttb-storefront {
  --ttb-font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --ttb-font-heading: var(--ttb-font-body);
  --ttb-text-sm: .875rem;
  --ttb-text-base: 1rem;
  --ttb-text-lg: 1.25rem;
  --ttb-text-hero: clamp(2rem, 5vw, 4.5rem);
  --ttb-space-1: .25rem;
  --ttb-space-2: .5rem;
  --ttb-space-3: .75rem;
  --ttb-space-4: 1rem;
  --ttb-space-6: 1.5rem;
  --ttb-space-8: 2rem;
  --ttb-space-12: 3rem;
  --ttb-space-16: 4rem;
  --ttb-background: #f7f6f2;
  --ttb-surface: #fff;
  --ttb-surface-muted: #eeede8;
  --ttb-text: #171717;
  --ttb-text-muted: #595959;
  --ttb-border: #d5d4ce;
  --ttb-accent: #181818;
  --ttb-on-accent: #fff;
  --ttb-radius: .25rem;
  --ttb-content: 80rem;
  --ttb-reading: 44rem;
  --ttb-control-height: 2.75rem;
  --ttb-focus: 0 0 0 3px #818181;
  color: var(--ttb-text);
  background: var(--ttb-background);
  font: var(--ttb-text-base)/1.5 var(--ttb-font-body);
}
.ttb-storefront *, .ttb-storefront *::before, .ttb-storefront *::after { box-sizing: border-box; }
.ttb-container { width: min(100% - 2 * var(--ttb-space-6), var(--ttb-content)); margin-inline: auto; }
.ttb-section { padding-block: var(--ttb-space-12); }
.ttb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ttb-space-6); }
.ttb-button, .ttb-storefront button, .ttb-storefront input, .ttb-storefront select {
  min-height: var(--ttb-control-height);
  border-radius: var(--ttb-radius);
  font: inherit;
}
.ttb-button, .ttb-storefront button {
  padding: var(--ttb-space-2) var(--ttb-space-6);
  background: var(--ttb-accent); color: var(--ttb-on-accent);
  border: 1px solid var(--ttb-accent); text-decoration: none; cursor: pointer;
}
.ttb-storefront input, .ttb-storefront select {
  padding: var(--ttb-space-2) var(--ttb-space-3); border: 1px solid var(--ttb-border);
  background: var(--ttb-surface); color: var(--ttb-text); max-width: 100%;
}
.ttb-storefront :focus-visible { outline: 2px solid var(--ttb-text); outline-offset: 3px; }
.ttb-storefront :disabled { opacity: .55; cursor: not-allowed; }
.ttb-storefront img { max-width: 100%; height: auto; }
@media (max-width: 64rem) { .ttb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) {
  .ttb-grid { grid-template-columns: 1fr; }
  .ttb-section { padding-block: var(--ttb-space-8); }
  .ttb-container { width: calc(100% - 2 * var(--ttb-space-4)); }
}
