body {
  min-width: 320px;
  background: var(--background);
  color: var(--on-surface);
  font: var(--body-md);
}

h1, h2, h3, .brand, .price-display { font-family: var(--font-display); }
h1 { font: var(--headline-lg-mobile); letter-spacing: var(--letter-spacing-headline); }
h2 { font: var(--headline-md); letter-spacing: var(--letter-spacing-headline-md); }

.page-shell {
  width: min(100%, 72rem);
  min-height: 100dvh;
  margin: 0 auto;
  padding: 6.5rem var(--page-gutter) 8rem;
}

.eyebrow {
  color: var(--on-surface-variant);
  font: var(--label-md);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
}

:focus-visible { outline: 2px solid var(--on-surface); outline-offset: 3px; }

.body-no-scroll { overflow: hidden; }

.placeholder-icon { width: 2rem; height: 2rem; opacity: 0.3; }

.icon { width: 1rem; height: 1rem; flex: 0 0 auto; }

@media (min-width: 48rem) {
  :root { --page-gutter: 2rem; }
  h1 { font: var(--headline-lg); letter-spacing: var(--letter-spacing-headline); }
  .page-shell { padding-top: 7.5rem; }
}