/*
 * Storefront runtime containment contract.
 *
 * This file is loaded after every template stylesheet so the rendered page has
 * one predictable canvas at runtime.  Template styles still own their colours,
 * typography and component composition; this layer only normalises the outer
 * geometry and responsive gutters.
 */
.merchant-store-body {
  --storefront-canvas: 1240px;
  --storefront-gutter: 32px;
  margin: 0;
  overflow-x: clip;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .merchant-store-body { --storefront-gutter: 24px; }
}

@media (max-width: 767px) {
  .merchant-store-body { --storefront-gutter: 16px; }
}

/* Shared themed storefronts (NusaMart, Education, Services and variants). */
.merchant-themed-store {
  --storefront-canvas: 1240px;
  --storefront-gutter: 32px;
  overflow-x: clip;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .merchant-themed-store { --storefront-gutter: 24px; }
}

@media (max-width: 767px) {
  .merchant-themed-store { --storefront-gutter: 16px; }
}

.merchant-themed-store .merchant-theme-header,
.merchant-themed-store .merchant-theme-section,
.merchant-themed-store .checkout-section {
  box-sizing: border-box;
  width: min(var(--storefront-canvas), calc(100% - (var(--storefront-gutter) * 2)));
  max-width: none;
  margin-inline: auto;
}

.merchant-themed-store .merchant-theme-header {
  padding-inline: var(--storefront-gutter);
}

.merchant-themed-store .merchant-theme-section {
  padding-inline: 54px;
}

/* Rounded marketplace hero and ordinary hero surfaces use the same canvas. */
.merchant-themed-store .merchant-theme-hero.layout-full-bleed,
.merchant-themed-store .merchant-theme-hero:not(.layout-split):not(.layout-cover) {
  box-sizing: border-box;
  width: min(var(--storefront-canvas), calc(100% - (var(--storefront-gutter) * 2)));
  max-width: none;
  margin-inline: auto;
}

/* Full-bleed editorial heroes retain their image surface, with contained copy. */
.merchant-themed-store .merchant-theme-hero.layout-split,
.merchant-themed-store .merchant-theme-hero.layout-cover {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  box-sizing: border-box;
  padding-inline: max(var(--storefront-gutter), calc((100% - var(--storefront-canvas)) / 2));
}

/* School admission sites use a contained editorial hero rather than the
   full-bleed split treatment used by other storefront families. Keep this
   exception scoped to the school template so the shared contract is intact. */
.merchant-themed-store.theme-school_admissions .merchant-theme-hero.layout-split {
  width: min(var(--storefront-canvas), calc(100% - (var(--storefront-gutter) * 2)));
  margin-inline: auto;
  margin-top: 20px;
  border-radius: 24px;
  padding-inline: clamp(24px, 4vw, 52px);
}

@media (min-width: 981px) {
  .merchant-themed-store.theme-school_admissions .merchant-theme-hero.layout-split {
    aspect-ratio: auto;
    min-height: 540px;
  }
}

@media (max-width: 767px) {
  .merchant-themed-store.theme-school_admissions .merchant-theme-hero.layout-split {
    width: calc(100% - (var(--storefront-gutter) * 2));
    margin-top: 14px;
    border-radius: 20px;
    padding-inline: 20px;
  }
}

.merchant-themed-store .merchant-theme-footer {
  padding-inline: max(var(--storefront-gutter), calc((100% - var(--storefront-canvas)) / 2));
}

/* Aksara Academy keeps its course hero as a contained split surface.  This
   scoped override is intentionally placed after the generic split-hero rule
   so the education renderer's rounded canvas is not widened by the global
   editorial treatment. */
.merchant-themed-store.theme-education .merchant-education-course-hero {
  width: min(var(--storefront-canvas), calc(100% - (var(--storefront-gutter) * 2)));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

.merchant-themed-store.theme-education .merchant-education-course-benefits {
  width: min(var(--storefront-canvas), calc(100% - (var(--storefront-gutter) * 2)));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

/* School websites use a full-width header region with a contained inner rail.
   This rule intentionally follows the generic storefront containment rule so
   the school header cannot regress into a floating card. */
.merchant-themed-store.theme-school_admissions .merchant-education-header {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  box-sizing: border-box;
  padding-inline: max(var(--storefront-gutter), calc((100% - var(--storefront-canvas)) / 2));
  border-radius: 0;
}

/* Education sections had viewport-based 160px padding after the visual pass.
   Keep their generous editorial spacing while aligning their inner content to
   the same 1,240px canvas. */
.theme-school_admissions .merchant-education-about,
.theme-school_admissions .merchant-education-stats {
  padding-inline: max(var(--storefront-gutter), calc((var(--storefront-canvas) - 1120px) / 2));
}

/* NusaStay owns a shell around header, content and footer. */
.nusastay-storefront {
  --storefront-canvas: 1240px;
  --storefront-gutter: 32px;
  overflow-x: clip;
}

.nusastay-shell {
  box-sizing: border-box;
  width: min(var(--storefront-canvas), calc(100% - (var(--storefront-gutter) * 2)));
  max-width: var(--storefront-canvas);
  margin-inline: auto;
  padding-inline: 0;
}

/* BUMDes keeps its colourful surfaces full-bleed; these paddings are the
   contained content rail inside each surface. */
.bumdes-sukamaju-storefront .bumdes-header,
.bumdes-sukamaju-storefront .bumdes-section,
.bumdes-sukamaju-storefront .bumdes-producer-banner,
.bumdes-sukamaju-storefront .bumdes-footer {
  padding-inline: max(var(--storefront-gutter), calc((100% - var(--storefront-canvas)) / 2));
}

.bumdes-sukamaju-storefront .bumdes-hero-copy {
  margin-left: max(var(--storefront-gutter), calc((100% - var(--storefront-canvas)) / 2));
}

@media (min-width: 768px) and (max-width: 1279px) {
  .nusastay-storefront { --storefront-gutter: 24px; }
}

@media (max-width: 767px) {
  .merchant-themed-store .merchant-theme-header {
    width: 100%;
    margin-inline: 0;
    padding-inline: var(--storefront-gutter);
  }

  .merchant-themed-store .merchant-theme-section,
  .merchant-themed-store .checkout-section,
  .merchant-themed-store .merchant-theme-hero.layout-full-bleed,
  .merchant-themed-store .merchant-theme-hero:not(.layout-split):not(.layout-cover) {
    width: calc(100% - (var(--storefront-gutter) * 2));
  }

  .merchant-themed-store .merchant-theme-section {
    padding-inline: var(--storefront-gutter);
  }

  .merchant-themed-store .merchant-theme-hero.layout-split,
  .merchant-themed-store .merchant-theme-hero.layout-cover {
    padding-inline: var(--storefront-gutter);
  }

  .merchant-themed-store .merchant-theme-footer {
    padding-inline: var(--storefront-gutter);
  }

  .merchant-themed-store.theme-education .merchant-education-course-hero,
  .merchant-themed-store.theme-education .merchant-education-course-benefits {
    width: calc(100% - (var(--storefront-gutter) * 2));
  }

  .merchant-themed-store.theme-education .merchant-education-course-hero {
    padding-inline: 0;
  }

  .theme-school_admissions .merchant-education-about,
  .theme-school_admissions .merchant-education-stats {
    padding-inline: var(--storefront-gutter);
  }

  .nusastay-storefront { --storefront-gutter: 16px; }
  .nusastay-shell {
    width: calc(100% - (var(--storefront-gutter) * 2));
    max-width: none;
  }

  .bumdes-sukamaju-storefront .bumdes-header,
  .bumdes-sukamaju-storefront .bumdes-section,
  .bumdes-sukamaju-storefront .bumdes-producer-banner,
  .bumdes-sukamaju-storefront .bumdes-footer {
    padding-inline: var(--storefront-gutter);
  }

  .bumdes-sukamaju-storefront .bumdes-hero-copy {
    width: calc(100% - (var(--storefront-gutter) * 2));
    margin-inline: auto;
  }
}