/* Layout helpers for the API-driven pages (product, checkout).
   Kept separate from the original stylesheets so the static page designs stay untouched. */

.app-split {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr 1fr;
}

.app-split-aside {
  display: grid;
  gap: 24px;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: start;
}

.app-field-grid {
  display: grid;
  gap: 10px;
}

.app-field-grid input,
.app-field-grid textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .app-split,
  .app-split-aside {
    grid-template-columns: 1fr;
  }
}