/* SAW Layout.jsx and Admin/Dashboard.jsx own these reference dimensions. */
:root {
  --site-gutter: 24px;
  --site-content-width: 1280px;
  --site-header-width: 1152px;
  --site-footer-width: 1600px;
  --site-footer-inset: max(var(--site-gutter), calc((100% - var(--site-footer-width)) / 2 + var(--site-gutter)));
}
@media (min-width: 640px) { :root { --site-gutter: 32px; } }
@media (min-width: 1024px) { :root { --site-gutter: 48px; } }
@media (min-width: 1280px) { :root { --site-gutter: 64px; } }
.admin-top,.yfas-header {
  padding-inline: max(28px, calc((100% - var(--site-header-width)) / 2 + 16px));
}
@media (min-width: 768px) {
  .admin-top,.yfas-header {
    padding-inline: max(36px, calc((100% - var(--site-header-width)) / 2 + 24px));
  }
}
.admin-main,.platform-commerce-page {
  width: min(100%, calc(var(--site-content-width) + 2 * var(--site-gutter)));
  margin-inline: auto;
  padding: 96px var(--site-gutter);
}
.platform-dashboard-workbench {
  width: 100%;
  padding-inline: var(--site-gutter);
}
.platform-site-footer {
  padding-inline: var(--site-footer-inset);
}
.platform-footer-grid,.platform-footer-bottom { width: 100%; }
.yfas-body .hero,.yfas-body .features,.yfas-body .pricing {
  padding-inline: max(var(--site-gutter), calc((100% - var(--site-content-width)) / 2));
}
.commerce-hero,.commerce-page,.commerce-grid,.offer-detail {
  width: min(100%, calc(var(--site-content-width) + 2 * var(--site-gutter)));
  padding-inline: var(--site-gutter);
}