/**
 * Layout Utilities - Magneto SPA
 * Composable layout primitives using CSS custom properties
 */

/* ─── Container ─── */
.container {
  width: min(var(--max-content-width), 100% - var(--container-padding) * 2);
  margin-inline: auto;
}

@media (max-width: 720px) {
  .container {
    width: min(100% - var(--container-padding-mobile) * 2, var(--max-content-width));
  }
}

/* ─── Spacing ─── */
.mt-8 { margin-top: var(--space-8); }

/* ─── Visibility ─── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}