/* Token values come from config/design.json and the two settings scopes. */
body, .editor-styles-wrapper {
  --theme-font-family: var(--mb-font-body);
  font-family: var(--mb-font-body);
}
h1,h2,h3,h4,h5,h6,.price,.poppins {
  font-family: var(--mb-font-heading) !important;
}
.mb-layout {
  width: min(100% - var(--mb-space-5) * 2, var(--mb-content-width));
  margin-inline: auto;
  padding-block: var(--mb-space-8);
}
.mb-layout--wide { max-width: var(--mb-wide-width); width: calc(100% - var(--mb-space-5) * 2); }
.mb-layout--landing { max-width: none; width: 100%; padding: 0; }
.mb-section { padding: var(--mb-space-8) var(--mb-space-5); }
.mb-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)); gap:var(--mb-space-5); }
.mb-card { padding:var(--mb-space-5); background:var(--mb-surface); border-radius:var(--mb-radius); }
.mb-product-dialog {
  box-sizing:border-box; width:min(480px,100vw); height:100dvh; max-height:100dvh;
  max-width:100vw; margin:0 0 0 auto; padding:0; border:0;
  background:var(--mb-palette-8); color:var(--mb-palette-4);
}
.mb-product-dialog::backdrop { background:rgb(0 0 0 / .4); }
.mb-dialog__header { position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; gap:var(--mb-space-4); padding:var(--mb-space-5); background:var(--mb-palette-8); z-index:1; }
.mb-dialog__header h4 { margin:0; }
.mb-dialog__close { border:0; background:transparent; color:inherit; padding:var(--mb-space-3); cursor:pointer; }
.mb-dialog__body { padding:0 var(--mb-space-5) var(--mb-space-5); }
html:has(.mb-product-dialog[open]) { overflow:hidden; }

/* Mobile header spans the viewport; retain only its inner control padding. */
#header [data-device=mobile] [data-row='middle:boxed'] {
  background-color: var(--theme-palette-color-8);
}

#header [data-device=mobile] [data-row='middle:boxed'] > .ct-container {
  width: 100%;
  max-width: none;
}

/* Reusable content rails: inset copy and opt-in full-bleed media.
   Use parent width, never 100vw (which includes the scrollbar). */
:root { --mb-page-gutter: var(--mb-space-5); }
.mb-inset { padding-inline: var(--mb-page-gutter); }
.mb-bleed img, .mb-bleed video { display:block; width:100%; height:auto; }
@media (max-width: 768px) {
  .mb-layout:not(.mb-layout--landing):not(.mb-layout--retail) {
    width:calc(100% - 2 * var(--mb-page-gutter));
  }
  /* A section inside an already inset page must not add another gutter. */
  .mb-layout:not(.mb-layout--landing):not(.mb-layout--retail) .mb-section:not(.alignfull):not(.mb-bleed) {
    padding-inline:0;
  }
  .mb-layout:not(.mb-layout--landing):not(.mb-layout--retail) > article > .entry-content > :is(.alignfull,.mb-bleed) {
    width:calc(100% + 2 * var(--mb-page-gutter));
    max-width:none;
    margin-inline:calc(-1 * var(--mb-page-gutter));
  }
  .mb-layout--retail { width:100%; max-width:none; padding-block:var(--mb-space-8); }
  .mb-layout--retail > article > header { padding-inline:var(--mb-page-gutter); }
  .mb-layout--retail > article > .entry-content > :not(.alignfull):not(.mb-bleed):not(.mb-section) {
    max-width:none;
    margin-inline:var(--mb-page-gutter);
  }
  .mb-layout--retail > article > .entry-content > :is(.alignfull,.mb-bleed,.mb-section) {
    width:100%; max-width:none; margin-inline:0;
  }
  .mb-layout--retail .mb-section { padding-inline:var(--mb-page-gutter); }
  .mb-section .mb-section, .mb-inset .mb-inset { padding-inline:0; }
  .ct-footer [data-row] > .ct-container {
    width:calc(100% - 2 * var(--mb-page-gutter));
  }
}

@media (max-width:768px) {
  .mb-bleed > figcaption, .mb-layout .alignfull > figcaption {
    padding-inline:var(--mb-page-gutter);
  }
}

/* A full-page landing provides its own inset text and edge-to-edge media.
   Override the mobile wide-template gutter, not the hero content padding. */
.mb-layout.mb-layout--wide:has(> article > .entry-content > .mbmaps-landing) {
  width: 100%;
  max-width: none;
  padding: 0;
}