/* Prevent horizontal page scrolling; clip keeps position: sticky working. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

body {
  display: grid;
  grid-template-columns: minmax(24rem, 30rem) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  align-items: start;
}

body > header {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  position: sticky !important;
  top: 0;
  z-index: 1000;
}

body > .mod_article {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}

body > main {
  grid-column: 2;
  grid-row: 3;
  min-width: 0;
}

body > footer {
  grid-column: 2;
  grid-row: 4;
  min-width: 0;
}

body {
  font-family: var(--builder-body-font-family, var(--bs-body-font-family));
  font-size: var(--builder-body-font-size, var(--bs-body-font-size));
  line-height: var(--builder-body-line-height, 1.5);
  --bs-primary: var(--builder-primary);
  --bs-secondary: var(--builder-secondary);
  --bs-success: var(--builder-success);
  --bs-danger: var(--builder-danger);
  --bs-warning: var(--builder-warning);
  --bs-info: var(--builder-info);
  --bs-light: var(--builder-light);
  --bs-dark: var(--builder-dark);
  --bs-link-color: var(--builder-link-color, var(--builder-primary));
  --bs-link-hover-color: var(--builder-link-hover-color, var(--builder-link-color));
}

body > .mod_article a:not(.btn),
body > main a:not(.btn) {
  color: var(--builder-link-color, var(--builder-primary));
}

body > .mod_article a:not(.btn):hover,
body > main a:not(.btn):hover {
  color: var(--builder-link-hover-color, var(--builder-link-color));
}

body.builder-button-shape--square .btn,
body.builder-input-shape--square input,
body.builder-input-shape--square select,
body.builder-input-shape--square textarea {
  border-radius: 0;
}

body.builder-button-shape--pill .btn {
  border-radius: 50rem;
}

body > .mod_article input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
body > .mod_article select,
body > .mod_article textarea,
body > main input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
body > main select,
body > main textarea {
  border-color: var(--builder-input-border-color, #adb5bd);
}

body > .mod_article input:focus,
body > .mod_article select:focus,
body > .mod_article textarea:focus,
body > main input:focus,
body > main select:focus,
body > main textarea:focus {
  border-color: var(--builder-input-focus-color, var(--builder-primary));
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--builder-input-focus-color, var(--builder-primary)) 25%, transparent);
}

body > .mod_article .card,
body > main .card {
  background-color: var(--builder-surface-color, #fff);
  box-shadow: var(--builder-surface-shadow, none);
}

body.builder-image-shape--square .content-image img,
body.builder-image-shape--square figure img,
body.builder-image-shape--square .image_container img {
  border-radius: 0;
}

body.builder-image-shape--circle .content-image img,
body.builder-image-shape--circle figure img,
body.builder-image-shape--circle .image_container img {
  border-radius: 50%;
}

body.builder-table--striped table tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, .035);
}

body.builder-accordion--flat .accordion-item {
  border: 0;
  border-radius: 0;
}

body.builder-tabs--underline .nav-tabs .nav-link {
  border-width: 0 0 2px;
  border-radius: 0;
}

body.builder-teaser--compact .card {
  min-height: 0;
}

body.builder-teaser-shape--rounded .object-teaser .wrapper {
  border-radius: var(--bs-border-radius-lg, .5rem) !important;
  overflow: hidden;
}

body.builder-teaser-shape--square .object-teaser .wrapper {
  border-radius: 0 !important;
}

body .object-teaser .wrapper:not(.compact-view) {
  color: var(--builder-teaser-standard-text-color, #3C505A) !important;
  background-color: var(--builder-teaser-standard-background-color, #ffffff) !important;
  border: var(--builder-teaser-standard-border-color, 1px solid rgba(60, 80, 90, .2)) !important;
}

body .object-teaser .wrapper:not(.compact-view) .wrapper-content {
  color: inherit !important;
}

body .object-teaser .wrapper.compact-view {
  color: var(--builder-teaser-compact-text-color, #ffffff) !important;
  background-color: var(--builder-teaser-compact-background-color, rgba(60, 80, 90, .5)) !important;
  border: var(--builder-teaser-compact-border-color, transparent) !important;
}

body .object-teaser .wrapper.compact-view .wrapper-content {
  color: inherit !important;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  font-size: var(--builder-heading-font-size, inherit);
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  font-family: var(--builder-heading-font-family, inherit);
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  font-weight: var(--builder-heading-font-weight, inherit);
}

body {
  font-weight: var(--builder-body-font-weight, inherit);
}

body h1 { font-size: var(--builder-heading-h1-size, 2.5rem); }
body h2 { font-size: var(--builder-heading-h2-size, 2rem); }
body h3 { font-size: var(--builder-heading-h3-size, 1.75rem); }
body h4 { font-size: var(--builder-heading-h4-size, 1.5rem); }
body h5 { font-size: var(--builder-heading-h5-size, 1.25rem); }
body h6 { font-size: var(--builder-heading-h6-size, 1rem); }

body h1 { font-size: var(--builder-heading-h1-desktop, 2.5rem); }
body h2 { font-size: var(--builder-heading-h2-desktop, 2rem); }
body h3 { font-size: var(--builder-heading-h3-desktop, 1.75rem); }
body h4 { font-size: var(--builder-heading-h4-desktop, 1.5rem); }
body h5 { font-size: var(--builder-heading-h5-desktop, 1.25rem); }
body h6 { font-size: var(--builder-heading-h6-desktop, 1rem); }
body {
  font-size: var(--builder-body-font-size-desktop, var(--bs-body-font-size));
}

body .subheadline,
body .item-info-subheadline {
  font-size: var(--builder-subheadline-font-size-desktop, 20px);
  color: var(--builder-subheadline-color, inherit) !important;
}

body .content-of-text.fs-1.mb-element {
  font-size: var(--builder-lead-text-font-size-desktop, 40px) !important;
}

body > header .header-link,
body > header .page-nav-link {
  font-size: var(--builder-navigation-font-size-desktop, 16px) !important;
  color: var(--builder-link-color, #5b8f22);
}

body > header .header-link:hover,
body > header .page-nav-link:hover {
  color: var(--builder-link-hover-color, #406816);
}

@media (max-width: 767px) {
  body h1 { font-size: var(--builder-heading-h1-mobile, 22px); }
  body h2 { font-size: var(--builder-heading-h2-mobile, 21px); }
  body h3 { font-size: var(--builder-heading-h3-mobile, 20px); }
  body h4 { font-size: var(--builder-heading-h4-mobile, 20px); }
  body h5 { font-size: var(--builder-heading-h5-mobile, 20px); }
  body h6 { font-size: var(--builder-heading-h6-mobile, 16px); }
  body {
    font-size: var(--builder-body-font-size-mobile, var(--bs-body-font-size));
  }

  body .subheadline,
  body .item-info-subheadline {
    font-size: var(--builder-subheadline-font-size-mobile, 18px);
  }

  body .content-of-text.fs-1.mb-element {
    font-size: var(--builder-lead-text-font-size-mobile, 24px) !important;
  }

  body > header .header-link,
  body > header .page-nav-link {
    font-size: var(--builder-navigation-font-size-mobile, 16px) !important;
  }
}

body > header.header,
body > header.header.header-stuck {
  --bs-header-background-color: var(--builder-header-background, transparent) !important;
  --bs-header-sticky-background-color: var(--builder-header-background, transparent) !important;
  --bs-header-link-color: var(--builder-link-color, var(--builder-primary)) !important;
  --bs-header-link-hover-color: var(--builder-link-hover-color, var(--builder-link-color)) !important;
  --bs-header-sticky-link-color: var(--builder-link-color, var(--builder-primary)) !important;
  --bs-header-sticky-link-hover-color: var(--builder-link-hover-color, var(--builder-link-color)) !important;
  background-color: var(--builder-header-background, transparent) !important;
}

body > header .header-collapse.page-menu-wrapper {
  --bs-page-menu-background-color: var(--builder-header-menu-background, transparent) !important;
  background-color: var(--builder-header-menu-background, transparent) !important;
}

body > header .header-collapse.page-menu-wrapper .page-nav {
  --bs-page-nav-bg: var(--builder-header-menu-background, transparent) !important;
  --bs-page-nav-link-color: var(--builder-link-color, var(--builder-primary)) !important;
  --bs-page-nav-link-hover-color: var(--builder-link-hover-color, var(--builder-link-color)) !important;
  --bs-page-nav-link-toggle-color: var(--builder-link-color, var(--builder-primary)) !important;
  --bs-page-nav-link-toggle-hover-color: var(--builder-link-hover-color, var(--builder-link-color)) !important;
  --bs-page-nav-link-back-color: var(--builder-link-color, var(--builder-primary)) !important;
  --bs-page-nav-link-back-hover-color: var(--builder-link-hover-color, var(--builder-link-color)) !important;
  background-color: var(--builder-header-menu-background, transparent) !important;
}

body > header .header-collapse.page-menu-wrapper .page-nav-link-toggle,
body > header .header-collapse.page-menu-wrapper .page-nav-link-back {
  color: var(--builder-link-color, var(--builder-primary)) !important;
}

body > header .header-collapse.page-menu-wrapper .page-nav-link-toggle:hover,
body > header .header-collapse.page-menu-wrapper .page-nav-link-back:hover {
  color: var(--builder-link-hover-color, var(--builder-link-color)) !important;
}

body > header .header-link,
body > header .page-nav-link {
  font-size: var(--builder-navigation-font-size, 1rem);
}

body > footer {
  background-color: var(--builder-footer-background, transparent) !important;
  color: var(--builder-footer-text-color, inherit) !important;
  font-size: var(--builder-footer-font-size-desktop, 16px) !important;
}

body > footer .footer-main,
body > footer .footer-bottom,
body > footer a,
body > footer .footer-link,
body > footer p,
body > footer li,
body > footer .nav-link,
body > footer h1,
body > footer h2,
body > footer h3,
body > footer h4,
body > footer h5,
body > footer h6 {
  color: var(--builder-footer-text-color, inherit) !important;
}

body > footer .footer-main,
body > footer .footer-bottom {
  background-color: var(--builder-footer-background, transparent) !important;
}

body > footer p,
body > footer li,
body > footer a,
body > footer .footer-link,
body > footer .nav-link,
body > footer .content-of-text {
  font-size: inherit !important;
}

body h1 {
  color: var(--builder-heading-h1-color, var(--builder-heading, inherit)) !important;
}

body h2 {
  color: var(--builder-heading-h2-color, var(--builder-heading, inherit)) !important;
}

body h3 {
  color: var(--builder-heading-h3-color, var(--builder-heading, inherit)) !important;
}

body h4 {
  color: var(--builder-heading-h4-color, var(--builder-heading, inherit)) !important;
}

body h5 {
  color: var(--builder-heading-h5-color, var(--builder-heading, inherit)) !important;
}

body h6 {
  color: var(--builder-heading-h6-color, var(--builder-heading, inherit)) !important;
}

body .wrapper a:not(.btn) {
  color: var(--builder-link-standard-text-color, var(--builder-link-color)) !important;
  background-color: transparent !important;
  text-decoration: underline !important;
}

body .wrapper a:not(.btn):hover,
body .wrapper a:not(.btn):focus {
  color: var(--builder-link-hover-text-color, var(--builder-link-hover-color)) !important;
  background-color: transparent !important;
  text-decoration: none !important;
}

body .wrapper .btn-primary {
  color: var(--builder-button-primary-standard-text-color, var(--builder-light)) !important;
  background-color: var(--builder-button-primary-standard-background-color, var(--builder-primary)) !important;
  border-color: var(--builder-button-primary-standard-border-color, var(--builder-primary)) !important;
}

body .wrapper .btn-primary:hover,
body .wrapper .btn-primary:focus {
  color: var(--builder-button-primary-hover-text-color, var(--builder-primary)) !important;
  background-color: var(--builder-button-primary-hover-background-color, var(--builder-light)) !important;
  border-color: var(--builder-button-primary-hover-border-color, var(--builder-primary)) !important;
}

body .wrapper .btn-outline-primary {
  color: var(--builder-button-outline-primary-standard-text-color, var(--builder-primary)) !important;
  background-color: var(--builder-button-outline-primary-standard-background-color, var(--builder-light)) !important;
  border-color: var(--builder-button-outline-primary-standard-border-color, var(--builder-primary)) !important;
}

body .wrapper .btn-outline-primary:hover,
body .wrapper .btn-outline-primary:focus {
  color: var(--builder-button-outline-primary-hover-text-color, var(--builder-light)) !important;
  background-color: var(--builder-button-outline-primary-hover-background-color, var(--builder-primary)) !important;
  border-color: var(--builder-button-outline-primary-hover-border-color, var(--builder-primary)) !important;
}

body .wrapper .btn-secondary,
body .wrapper .btn-success,
body .wrapper .btn-danger,
body .wrapper .btn-warning,
body .wrapper .btn-light,
body .wrapper .btn-dark {
  color: var(--builder-button-current-text-color, inherit) !important;
  background-color: var(--builder-button-current-background-color, inherit) !important;
  border-color: var(--builder-button-current-border-color, inherit) !important;
}

body .wrapper .btn-secondary {
  --builder-button-current-text-color: var(--builder-button-secondary-standard-text-color, var(--builder-dark));
  --builder-button-current-background-color: var(--builder-button-secondary-standard-background-color, var(--builder-secondary));
  --builder-button-current-border-color: var(--builder-button-secondary-standard-border-color, var(--builder-secondary));
}

body .wrapper .btn-secondary:hover,
body .wrapper .btn-secondary:focus {
  --builder-button-current-text-color: var(--builder-button-secondary-hover-text-color, var(--builder-dark));
  --builder-button-current-background-color: var(--builder-button-secondary-hover-background-color, var(--builder-light));
  --builder-button-current-border-color: var(--builder-button-secondary-hover-border-color, var(--builder-secondary));
}

body .wrapper .btn-success {
  --builder-button-current-text-color: var(--builder-button-success-standard-text-color, var(--builder-light));
  --builder-button-current-background-color: var(--builder-button-success-standard-background-color, var(--builder-success));
  --builder-button-current-border-color: var(--builder-button-success-standard-border-color, var(--builder-success));
}

body .wrapper .btn-success:hover,
body .wrapper .btn-success:focus {
  --builder-button-current-text-color: var(--builder-button-success-hover-text-color, var(--builder-success));
  --builder-button-current-background-color: var(--builder-button-success-hover-background-color, var(--builder-light));
  --builder-button-current-border-color: var(--builder-button-success-hover-border-color, var(--builder-success));
}

body .wrapper .btn-danger {
  --builder-button-current-text-color: var(--builder-button-danger-standard-text-color, var(--builder-light));
  --builder-button-current-background-color: var(--builder-button-danger-standard-background-color, var(--builder-danger));
  --builder-button-current-border-color: var(--builder-button-danger-standard-border-color, var(--builder-danger));
}

body .wrapper .btn-danger:hover,
body .wrapper .btn-danger:focus {
  --builder-button-current-text-color: var(--builder-button-danger-hover-text-color, var(--builder-danger));
  --builder-button-current-background-color: var(--builder-button-danger-hover-background-color, var(--builder-light));
  --builder-button-current-border-color: var(--builder-button-danger-hover-border-color, var(--builder-danger));
}

body .wrapper .btn-warning {
  --builder-button-current-text-color: var(--builder-button-warning-standard-text-color, var(--builder-dark));
  --builder-button-current-background-color: var(--builder-button-warning-standard-background-color, var(--builder-warning));
  --builder-button-current-border-color: var(--builder-button-warning-standard-border-color, var(--builder-warning));
}

body .wrapper .btn-warning:hover,
body .wrapper .btn-warning:focus {
  --builder-button-current-text-color: var(--builder-button-warning-hover-text-color, var(--builder-dark));
  --builder-button-current-background-color: var(--builder-button-warning-hover-background-color, var(--builder-warning));
  --builder-button-current-border-color: var(--builder-button-warning-hover-border-color, var(--builder-warning));
}

body .wrapper .btn-light {
  --builder-button-current-text-color: var(--builder-button-light-standard-text-color, var(--builder-dark));
  --builder-button-current-background-color: var(--builder-button-light-standard-background-color, var(--builder-light));
  --builder-button-current-border-color: var(--builder-button-light-standard-border-color, var(--builder-light));
}

body .wrapper .btn-light:hover,
body .wrapper .btn-light:focus {
  --builder-button-current-text-color: var(--builder-button-light-hover-text-color, var(--builder-light));
  --builder-button-current-background-color: var(--builder-button-light-hover-background-color, var(--builder-dark));
  --builder-button-current-border-color: var(--builder-button-light-hover-border-color, var(--builder-light));
}

body .wrapper .btn-dark {
  --builder-button-current-text-color: var(--builder-button-dark-standard-text-color, var(--builder-light));
  --builder-button-current-background-color: var(--builder-button-dark-standard-background-color, var(--builder-dark));
  --builder-button-current-border-color: var(--builder-button-dark-standard-border-color, var(--builder-dark));
}

body .wrapper .btn-dark:hover,
body .wrapper .btn-dark:focus {
  --builder-button-current-text-color: var(--builder-button-dark-hover-text-color, var(--builder-dark));
  --builder-button-current-background-color: var(--builder-button-dark-hover-background-color, var(--builder-light));
  --builder-button-current-border-color: var(--builder-button-dark-hover-border-color, var(--builder-dark));
}

body .wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
body .wrapper select,
body .wrapper textarea {
  color: var(--builder-input-text-color, inherit) !important;
  background-color: var(--builder-input-background-color, inherit) !important;
  border-color: var(--builder-input-border-color, var(--builder-dark)) !important;
}

body .wrapper .accordion .accordion-button {
  color: var(--builder-accordion-title-text-color, var(--builder-dark)) !important;
  background-color: var(--builder-accordion-title-background-color, var(--builder-primary)) !important;
  border-color: var(--builder-accordion-title-border-color, var(--builder-primary)) !important;
}

body .wrapper .accordion .accordion-item {
  border-color: var(--builder-accordion-title-border-color, var(--builder-primary)) !important;
}

body .wrapper .accordion .accordion-body {
  color: var(--builder-accordion-text-text-color, var(--builder-dark)) !important;
  background-color: var(--builder-accordion-text-background-color, transparent) !important;
  border-color: var(--builder-accordion-text-border-color, var(--builder-primary)) !important;
}

body .wrapper .nav-tabs .nav-link.active {
  color: var(--builder-tabs-active-text-color, var(--builder-dark)) !important;
  background-color: var(--builder-tabs-active-background-color, var(--builder-light)) !important;
  border-color: var(--builder-tabs-active-border-color, var(--builder-primary)) !important;
}

body .wrapper .nav-tabs .nav-link:not(.active) {
  color: var(--builder-tabs-inactive-text-color, var(--builder-dark)) !important;
  background-color: var(--builder-tabs-inactive-background-color, transparent) !important;
  border-color: var(--builder-tabs-inactive-border-color, transparent) !important;
}

@media (max-width: 767px) {
  body > footer {
    font-size: var(--builder-footer-font-size-mobile, 16px) !important;
  }
}

body.builder-footer-column-1--hidden .footer-main .row > div:nth-child(1),
body.builder-footer-column-2--hidden .footer-main .row > div:nth-child(2),
body.builder-footer-column-3--hidden .footer-main .row > div:nth-child(3),
body.builder-footer-column-4--hidden .footer-main .row > div:nth-child(4) {
  display: none;
}

body.builder-viewport--mobile > header,
body.builder-viewport--mobile > .mod_article,
body.builder-viewport--mobile > main,
body.builder-viewport--mobile > footer {
  display: none !important;
}

.builder-mobile-preview {
  position: sticky;
  top: 0;
  grid-column: 2;
  grid-row: 1 / 5;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  height: 100vh;
  padding: 2rem 1rem;
  overflow: hidden;
  background: #e9ecef;
}

.builder-mobile-preview[hidden] {
  display: none;
}

/* Reserves the scaled device size, because transforms do not affect layout. */
.builder-mobile-preview__slot {
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--builder-device-width) * var(--builder-device-scale, 1));
  height: calc(var(--builder-device-height) * var(--builder-device-scale, 1));
}

.builder-mobile-preview__device {
  --builder-device-bezel: 12px;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: var(--builder-device-width);
  height: var(--builder-device-height);
  padding: var(--builder-device-bezel);
  border-radius: 3rem;
  background: #212529;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .3);
  transform: scale(var(--builder-device-scale, 1));
  transform-origin: top left;
}

.builder-mobile-preview iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 2.25rem;
  background: #fff;
}

body.builder-preview-frame > .builder-panel {
  display: none !important;
}

body.builder-theme--custom .wrapper {
  --bs-wrapper-bg-color: var(--builder-background);
  --bs-wrapper-color: var(--builder-text);
  --bs-body-color: var(--builder-text);
  --bs-heading-color: var(--builder-heading);
  --bs-link-color: var(--builder-primary);
  --bs-primary: var(--builder-primary);
  --bs-secondary: var(--builder-secondary);
}

body.builder-theme--dark .wrapper {
  --bs-wrapper-bg-color: var(--builder-background);
  --bs-wrapper-color: var(--builder-text);
  --bs-body-color: var(--builder-text);
  --bs-heading-color: var(--builder-heading);
  --bs-link-color: var(--builder-primary);
  --bs-primary: var(--builder-primary);
  --bs-secondary: var(--builder-secondary);
}

body.builder-theme--light .wrapper {
  --bs-wrapper-bg-color: var(--builder-background);
  --bs-wrapper-color: var(--builder-text);
  --bs-body-color: var(--builder-text);
  --bs-heading-color: var(--builder-heading);
  --bs-link-color: var(--builder-primary);
  --bs-primary: var(--builder-primary);
  --bs-secondary: var(--builder-secondary);
}

body .wrapper .btn-primary {
  --bs-btn-bg: var(--builder-primary);
  --bs-btn-border-color: var(--builder-primary);
  --bs-btn-hover-bg: var(--builder-primary);
  --bs-btn-hover-border-color: var(--builder-primary);
}

body .wrapper .btn-outline-primary {
  --bs-btn-color: var(--builder-primary);
  --bs-btn-border-color: var(--builder-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--builder-primary);
  --bs-btn-hover-border-color: var(--builder-primary);
}

body .wrapper .btn-secondary {
  --bs-btn-bg: var(--builder-secondary);
  --bs-btn-border-color: var(--builder-secondary);
  --bs-btn-hover-bg: var(--builder-secondary);
  --bs-btn-hover-border-color: var(--builder-secondary);
}

body .wrapper .btn-success {
  --bs-btn-bg: var(--builder-success);
  --bs-btn-border-color: var(--builder-success);
  --bs-btn-hover-bg: var(--builder-success);
  --bs-btn-hover-border-color: var(--builder-success);
}

body .wrapper .btn-danger {
  --bs-btn-bg: var(--builder-danger);
  --bs-btn-border-color: var(--builder-danger);
  --bs-btn-hover-bg: var(--builder-danger);
  --bs-btn-hover-border-color: var(--builder-danger);
}

body .wrapper .btn-warning {
  --bs-btn-bg: var(--builder-warning);
  --bs-btn-border-color: var(--builder-warning);
  --bs-btn-hover-bg: var(--builder-warning);
  --bs-btn-hover-border-color: var(--builder-warning);
}

body .wrapper .btn-info {
  --bs-btn-bg: var(--builder-info);
  --bs-btn-border-color: var(--builder-info);
  --bs-btn-hover-bg: var(--builder-info);
  --bs-btn-hover-border-color: var(--builder-info);
}

body .wrapper .btn-light {
  --bs-btn-bg: var(--builder-light);
  --bs-btn-border-color: var(--builder-light);
  --bs-btn-hover-bg: var(--builder-light);
  --bs-btn-hover-border-color: var(--builder-light);
}

body .wrapper .btn-dark {
  --bs-btn-bg: var(--builder-dark);
  --bs-btn-border-color: var(--builder-dark);
  --bs-btn-hover-bg: var(--builder-dark);
  --bs-btn-hover-border-color: var(--builder-dark);
}

/* ----------------------------------------------------------------
  Builder panel
  Placed after the preview rules so panel controls are not affected
  by preview options such as builder-input-shape--square.
-----------------------------------------------------------------*/
.builder-panel {
  --bp-bg: #f3f5f7;
  --bp-surface: #fff;
  --bp-surface-muted: #f8fafb;
  --bp-border: #e3e7eb;
  --bp-border-strong: #cbd2d9;
  --bp-border-hover: #a9b4be;
  --bp-text: #1e2a31;
  --bp-muted: #66747e;
  --bp-subtle: #98a2ab;
  --bp-accent: #3c505a;
  --bp-accent-hover: #2c3c44;
  --bp-accent-soft: #e9eff2;
  --bp-focus-ring: 0 0 0 3px rgba(60, 80, 90, .2);
  --bp-danger: #b42318;
  --bp-danger-border: #f2c4bf;
  --bp-danger-soft: #fef3f2;
  --bp-radius: .75rem;
  --bp-radius-sm: .5rem;
  --bp-control-height: 2.375rem;
  --bp-control-height-sm: 2.125rem;
  --bp-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2366747e' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  position: sticky;
  z-index: 1100;
  top: 1rem;
  grid-column: 1;
  grid-row: 1 / 5;
  box-sizing: border-box;
  width: auto;
  max-height: calc(100vh - 2rem);
  margin: 1rem 0 1rem 1rem;
  padding: 0 1rem;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--bp-border-strong) transparent;
  scrollbar-width: thin;
  color: var(--bp-text);
  background: var(--bp-bg);
  border: 1px solid var(--bp-border);
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .06);
  font: 400 .875rem/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.builder-panel *,
.builder-panel *::before,
.builder-panel *::after {
  box-sizing: border-box;
}

.builder-panel [hidden] {
  display: none !important;
}

/* Header with title and Desktop/Mobile switch, sticky inside the panel. */
.builder-panel__header {
  position: sticky;
  z-index: 4;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 0 -1rem 1rem;
  padding: .75rem 1rem;
  background: var(--bp-surface);
  border-bottom: 1px solid var(--bp-border);
}

.builder-panel h1 {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  color: var(--bp-text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.builder-panel h1::before {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: .45rem;
  background: linear-gradient(135deg, #659b7a 0%, #3c505a 100%);
  content: "";
}

.builder-viewport-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, auto);
  gap: .125rem;
  padding: .1875rem;
  background: #eaeef1;
  border-radius: .625rem;
}

.builder-viewport-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  min-height: 2rem;
  padding: .25rem .75rem;
  color: var(--bp-muted);
  background: transparent;
  border: 0;
  border-radius: .5rem;
  cursor: pointer;
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.builder-viewport-switch button:hover {
  color: var(--bp-text);
}

.builder-viewport-switch button[aria-pressed="true"] {
  color: var(--bp-text);
  background: var(--bp-surface);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .14);
}

.builder-viewport-switch button:focus-visible {
  outline: 0;
  box-shadow: var(--bp-focus-ring);
}

.builder-viewport-switch svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

/* Cards */
.builder-card,
.builder-panel fieldset,
.builder-subsection {
  min-width: 0;
  margin: 0 0 .75rem;
  padding: 1rem;
  background: var(--bp-surface);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.builder-panel legend,
.builder-card__title,
.builder-subsection > h3 {
  margin: 0 0 .875rem;
  padding: 0;
  color: var(--bp-text);
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 650;
  letter-spacing: -.005em;
  line-height: 1.3;
}

/* Floating the legend keeps it inside the card instead of on the border. */
.builder-panel legend {
  float: left;
  width: 100%;
}

.builder-panel legend + * {
  clear: both;
}

.builder-section {
  margin: 1.5rem 0 0;
}

/* Shield panel headings from the !important preview heading colors. */
.builder-panel :is(h1, h2, h3, h4, h5, h6) {
  color: var(--bp-heading-color, var(--bp-text)) !important;
}

.builder-section > h2 {
  --bp-heading-color: var(--bp-muted);
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 .75rem;
  padding: 0 .125rem;
  color: var(--bp-muted);
  font-family: inherit;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.builder-section > h2::after {
  flex: 1;
  height: 1px;
  background: var(--bp-border-strong);
  content: "";
}

.builder-section__hint {
  margin: -.5rem 0 .875rem;
  color: var(--bp-muted);
  font-size: .75rem;
}

/* Form controls */
.builder-panel label {
  display: grid;
  gap: .375rem;
  margin: .875rem 0 0;
  color: var(--bp-text);
  font-size: .8125rem;
  font-weight: 500;
}

.builder-panel label:first-of-type {
  margin-top: 0;
}

.builder-color-label {
  display: block;
  margin: 1rem 0 .375rem;
  color: var(--bp-text);
  font-size: .8125rem;
  font-weight: 600;
}

body .builder-panel input:where(:not([type="color"], [type="checkbox"], [type="radio"], [type="hidden"], [type="file"])),
body .builder-panel select {
  display: block;
  width: 100%;
  min-width: 0;
  height: var(--bp-control-height);
  margin: 0;
  padding: 0 .75rem;
  color: var(--bp-text);
  background-color: var(--bp-surface);
  border: 1px solid var(--bp-border-strong);
  border-radius: var(--bp-radius-sm);
  box-shadow: 0 1px 1px rgba(16, 24, 40, .03);
  font: inherit;
  font-size: .875rem;
  line-height: 1.2;
  transition: border-color .15s ease, box-shadow .15s ease;
}

body .builder-panel select {
  padding-right: 2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-image: var(--bp-chevron);
  background-position: right .625rem center;
  background-repeat: no-repeat;
  background-size: .875rem;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

body .builder-panel input::placeholder {
  color: var(--bp-subtle);
}

body .builder-panel input:hover:not(:disabled):not(:focus),
body .builder-panel select:hover:not(:disabled):not(:focus) {
  border-color: var(--bp-border-hover);
}

body .builder-panel input:focus,
body .builder-panel select:focus {
  outline: 0;
  border-color: var(--bp-accent);
  box-shadow: var(--bp-focus-ring);
}

body .builder-panel input:disabled,
body .builder-panel select:disabled {
  color: var(--bp-muted);
  background-color: var(--bp-surface-muted);
  cursor: not-allowed;
  opacity: .7;
}

body .builder-panel input[type="color"] {
  display: block;
  width: 100%;
  height: var(--bp-control-height);
  min-height: 0;
  margin: 0;
  padding: .1875rem;
  background: var(--bp-surface);
  border: 1px solid var(--bp-border-strong);
  border-radius: var(--bp-radius-sm);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

body .builder-panel input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

body .builder-panel input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: .3125rem;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .1);
}

body .builder-panel input[type="color"]::-moz-color-swatch {
  border: 0;
  border-radius: .3125rem;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .1);
}

/* HEX inputs show the current colour as a stripe on the left. */
body .builder-panel .builder-color-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .8125rem;
  box-shadow: inset .1875rem 0 0 var(--builder-input-color, transparent);
}

body .builder-panel .builder-color-input:user-invalid {
  border-color: var(--bp-danger);
  box-shadow: inset .1875rem 0 0 var(--bp-danger);
}

/* Buttons */
.builder-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  min-height: var(--bp-control-height);
  margin: 0;
  padding: .375rem .875rem;
  color: var(--bp-text);
  background: var(--bp-surface);
  border: 1px solid var(--bp-border-strong);
  border-radius: var(--bp-radius-sm);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  cursor: pointer;
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.builder-button:hover:not(:disabled) {
  background: var(--bp-surface-muted);
  border-color: var(--bp-border-hover);
}

.builder-button:focus-visible {
  outline: 0;
  box-shadow: var(--bp-focus-ring);
}

.builder-button:disabled {
  cursor: not-allowed;
  opacity: .5;
  box-shadow: none;
}

.builder-button--primary {
  color: #fff;
  background: var(--bp-accent);
  border-color: var(--bp-accent);
}

.builder-button--primary:hover:not(:disabled) {
  background: var(--bp-accent-hover);
  border-color: var(--bp-accent-hover);
}

.builder-button--danger {
  color: var(--bp-danger);
  border-color: var(--bp-danger-border);
}

.builder-button--danger:hover:not(:disabled) {
  background: var(--bp-danger-soft);
  border-color: var(--bp-danger);
}

.builder-button--ghost {
  color: var(--bp-muted);
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}

.builder-button--ghost:hover:not(:disabled) {
  color: var(--bp-text);
  background: var(--bp-surface);
}

.builder-button-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

/* Template manager */
.builder-template-manager__group {
  display: grid;
  gap: .625rem;
}

.builder-template-manager__group + .builder-template-manager__group,
.builder-template-manager__transfer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bp-border);
}

/* Colour palette as compact swatches */
.builder-palette {
  margin-bottom: .25rem;
}

.builder-palette > .builder-color-label {
  margin-top: 0;
}

.builder-palette-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem .5rem;
}

.builder-panel .builder-palette-grid label {
  display: flex;
  flex-direction: column-reverse;
  gap: .3125rem;
  margin: 0;
  color: var(--bp-muted);
  font-size: .75rem;
  text-align: center;
}

body .builder-panel .builder-palette-grid input[type="color"] {
  height: 2.75rem;
}

body .builder-panel .builder-color-source {
  margin-bottom: .5rem;
}

.builder-color-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.75rem;
  gap: .5rem;
  align-items: end;
}

/* Field labels stay available to screen readers but are hidden visually. */
.builder-panel .builder-color-fields label {
  gap: 0;
  margin: 0;
  font-size: 0;
}

body .builder-panel .builder-color-picker:disabled {
  cursor: not-allowed;
  opacity: .5;
}

/* Editor lock: no active template */
.builder-template-manager__hint {
  margin: 0 0 .875rem;
  padding: .625rem .75rem;
  color: var(--bp-text);
  font-size: .8125rem;
  line-height: 1.45;
  background: var(--bp-accent-soft);
  border-radius: var(--bp-radius-sm);
}

.builder-section--locked {
  opacity: .45;
  filter: grayscale(1);
  user-select: none;
}

/* Google fonts: search field with suggestion list */
.builder-google-font-option {
  display: grid;
  gap: .375rem;
}

.builder-panel .builder-google-font-option > label {
  margin: 0;
}

.builder-panel .builder-google-font-option > .builder-google-font-option__title {
  font-weight: 600;
}

.builder-panel .builder-google-font-option > label:last-child {
  margin-top: .375rem;
  color: var(--bp-muted);
  font-size: .75rem;
}

.builder-google-font-option + .builder-google-font-option {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bp-border);
}

.builder-font-search {
  position: relative;
}

body .builder-panel .builder-font-search input {
  padding-left: 2.125rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%2366747e' stroke-linecap='round' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='m10.5 10.5 3 3'/%3E%3C/g%3E%3C/svg%3E");
  background-position: .75rem 50%;
  background-repeat: no-repeat;
  background-size: .9375rem;
}

.builder-font-search__list {
  position: absolute;
  z-index: 5;
  top: calc(100% + .25rem);
  right: 0;
  left: 0;
  max-height: 16rem;
  margin: 0;
  padding: .25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  background: var(--bp-surface);
  border: 1px solid var(--bp-border-strong);
  border-radius: var(--bp-radius-sm);
  box-shadow: 0 .75rem 1.5rem rgba(16, 24, 40, .14);
}

.builder-font-search__option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .4375rem .625rem;
  border-radius: .375rem;
  cursor: pointer;
}

.builder-font-search__option:hover,
.builder-font-search__option[aria-selected="true"] {
  background: var(--bp-accent-soft);
}

.builder-font-search__name {
  min-width: 0;
  overflow: hidden;
  color: var(--bp-text);
  font-size: .8125rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-font-search__meta {
  flex-shrink: 0;
  color: var(--bp-muted);
  font-size: .6875rem;
}

.builder-font-search__message {
  padding: .5rem .625rem;
  color: var(--bp-muted);
  font-size: .75rem;
}

/* Desktop/Mobile size tables */
.builder-font-size-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: .375rem .5rem;
  align-items: center;
}

.builder-font-size-grid strong {
  color: var(--bp-muted);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.builder-panel .builder-font-size-grid label {
  margin: 0;
  font-size: .8125rem;
}

body .builder-panel .builder-font-size-grid input {
  height: var(--bp-control-height-sm);
  padding: 0 .5rem;
}

.builder-subsection--header > .builder-font-size-grid {
  margin-top: 1rem;
}

/* Heading colours: label, palette, HEX value and picker on one line */
.builder-template-heading-colors {
  display: grid;
  grid-template-columns: 6.75rem minmax(0, 1fr) minmax(0, 1fr) 2.375rem;
  gap: .5rem;
  align-items: center;
}

.builder-template-heading-colors .builder-color-label {
  margin: 0;
  font-weight: 500;
}

body .builder-panel .builder-template-heading-colors .builder-color-source {
  margin: 0;
}

/* Generated colour tables (buttons, forms, accordion, tabs) */
.builder-button-color-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 .5rem;
  align-items: end;
}

.builder-button-color-grid > strong {
  padding-bottom: .5rem;
  color: var(--bp-muted);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.builder-button-color-grid > strong:first-child {
  display: none;
}

.builder-button-color-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .375rem .5rem;
  align-items: start;
  padding: .75rem 0;
  border-top: 1px solid var(--bp-border);
}

.builder-button-color-row:last-child {
  padding-bottom: 0;
}

.builder-button-color-row > span {
  grid-column: 1 / -1;
  color: var(--bp-text);
  font-size: .8125rem;
  font-weight: 600;
}

body .builder-panel .builder-button-color-row select,
body .builder-panel .builder-button-color-row input:not([type="color"]):not([type="hidden"]) {
  height: var(--bp-control-height-sm);
  padding-left: .5rem;
  font-size: .8125rem;
}

body .builder-panel .builder-button-color-row select {
  padding-right: 1.5rem;
  background-position: right .375rem center;
  background-size: .75rem;
}

body .builder-panel .builder-button-color-row input[type="color"] {
  height: var(--bp-control-height-sm);
}

.builder-form-color-control {
  display: grid;
  gap: .375rem;
  min-width: 0;
}

body .builder-panel .builder-button-color-row .builder-color-source {
  margin: 0;
}

/* Teaser colours: one card per teaser type */
.builder-panel .builder-template-teaser-colors > label {
  margin-bottom: 1rem;
}

.builder-teaser-colors .builder-button-color-grid {
  display: block;
}

.builder-teaser-colors .builder-button-color-grid > strong {
  display: none;
}

.builder-teaser-colors .builder-button-color-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: .625rem 0 0;
  padding: .75rem;
  background: var(--bp-surface-muted);
  border: 1px solid var(--bp-border);
  border-radius: .625rem;
}

.builder-teaser-colors .builder-button-color-row:first-of-type {
  margin-top: 0;
}

.builder-teaser-colors .builder-form-color-control::before {
  color: var(--bp-muted);
  content: attr(data-builder-label);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Footer with status and version, sticky at the bottom of the panel. */
.builder-panel__footer {
  position: sticky;
  z-index: 3;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 1rem -1rem 0;
  padding: .625rem 1rem;
  background: var(--bp-surface);
  border-top: 1px solid var(--bp-border);
}

/* Save confirmation, floats above the sticky footer */
.builder-toast {
  position: absolute;
  right: 1rem;
  bottom: calc(100% + .625rem);
  left: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem .875rem;
  color: #fff;
  background: #2f7d52;
  border-radius: var(--bp-radius-sm);
  box-shadow: 0 .75rem 1.5rem rgba(16, 24, 40, .18);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translateY(.5rem);
  transition: opacity .2s ease, transform .2s ease;
}

.builder-toast--visible {
  opacity: 1;
  transform: none;
}

.builder-toast__icon {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
}

.builder-panel .builder-button--saved,
.builder-panel .builder-button--saved:hover:not(:disabled) {
  color: #fff;
  background: #2f7d52;
  border-color: #2f7d52;
}

@media (prefers-reduced-motion: reduce) {
  .builder-toast {
    transition: none;
  }
}

.builder-panel__status {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  margin: 0;
  color: var(--bp-muted);
  font-size: .75rem;
}

.builder-panel__status::before {
  flex: 0 0 auto;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: #3fa36b;
  content: "";
}

.builder-panel__status--error {
  color: var(--bp-danger);
}

.builder-panel__status--error::before {
  background: var(--bp-danger);
}

.builder-panel__version {
  flex: 0 0 auto;
  margin: 0;
  padding: .125rem .5rem;
  color: var(--bp-muted);
  background: var(--bp-bg);
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 600;
  white-space: nowrap;
}

.builder-panel__version:empty {
  display: none;
}

@media (max-width: 767px) {
  body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  body > header,
  body > .mod_article,
  body > main,
  body > footer {
    grid-column: 1;
    grid-row: auto;
  }

  .builder-panel {
    position: relative;
    top: 0;
    grid-row: auto;
    width: auto;
    max-height: calc(100vh - 1rem);
    margin: .5rem;
  }

  /* The panel scrolls away with the page here, so keep the switch fixed. */
  .builder-viewport-switch {
    position: fixed;
    z-index: 1200;
    right: .75rem;
    bottom: 4.25rem;
    box-shadow: 0 .5rem 1.5rem rgba(16, 24, 40, .25);
  }

  .builder-palette-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .builder-mobile-preview {
    position: relative;
    top: 0;
    grid-column: 1;
    grid-row: auto;
  }
}