/* Public pages share the 1176px visual boundary of the store navigation. */
html body { --supara-content-width: 1176px; --supara-frame-width: 1200px; }
html body .header-area .header-middle > .container,
html body .header-area .header-bottom > .container,
html body footer .container {
  box-sizing: border-box;
  width: 100% !important;
  max-width: var(--supara-frame-width) !important;
  margin-inline: auto !important;
  padding-inline: 12px !important;
}
html body main.main .container {
  box-sizing: border-box;
  width: 100% !important;
  max-width: var(--supara-frame-width) !important;
  margin-inline: auto !important;
  padding-inline: 12px !important;
}
html body main.main .container .container {
  max-width: 100% !important;
  padding-inline: 0 !important;
}
html body main.main .page-header.breadcrumb-wrap > .container,
html body main.main > .container.supara-membership {
  width: calc(100% - 24px) !important;
  max-width: var(--supara-content-width) !important;
}
html body main.main .page-header.breadcrumb-wrap > .container { padding-inline: 20px !important; }
html body main.main > .container.supara-membership { padding-inline: 0 !important; }
html body.single-product main.main > .container.mb-30 {
  width: calc(100% - 24px) !important;
  max-width: var(--supara-content-width) !important;
  padding-inline: 0 !important;
}
html body main.main .supara-wide-slider-wrap { max-width: 100% !important; }
/* Text layouts and forms can shrink inside the shared frame. */
html body main.main .ts-lead,
html body main.main .ts-layout,
html body main.main .ts-field,
html body main.main .supara-member-columns > * { min-width: 0; }
html body main.main .ts-lead p { max-width: 100%; }
@media (max-width: 767px) {
  html body main.main .page-header.breadcrumb-wrap > .container { padding-inline: 15px !important; }
}
/* Standalone public services use the same visual boundary. */
html body .site-header > .container.site-nav,
html body main.container.supara-main,
html body footer.directory-footer.container,
html body .calendar-container,
html body .apply-topbar > .topbar-inner,
html body main.apply-shell,
html body header.top > .wrap,
html body nav.util > .wrap,
html body main.wrap {
  box-sizing: border-box;
  width: calc(100% - 24px) !important;
  max-width: var(--supara-content-width) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}