.fb-themebuilder {
  --fb-sticky-offset: 0px;
  --fb-admin-bar-offset: 0px;
  --fb-scroll-progress: 0;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  z-index: 20;
  width: 100%;
}
.fb-themebuilder,
.fb-themebuilder * { box-sizing: border-box; }
.fb-themebuilder--header { box-shadow: 0 1px 0 rgba(15, 23, 42, .08); }
.fb-themebuilder--footer { margin-top: 0; }
.fb-themebuilder .fb-json-layout { width: 100%; }
.fb-themebuilder--location-before,
.fb-themebuilder--location-after { width: 100%; }

/* Sticky headers remain in normal document flow, including Canvas mode. */
.fb-themebuilder--header.fb-themebuilder--sticky {
  position: sticky;
  top: calc(var(--fb-sticky-offset) + var(--fb-admin-bar-offset));
  z-index: 9990;
  transition: box-shadow .2s ease, background-color .2s ease, backdrop-filter .2s ease;
}
body.admin-bar .fb-themebuilder--header.fb-themebuilder--sticky { --fb-admin-bar-offset: 32px; }
.fb-themebuilder--header.fb-themebuilder--sticky.is-scrolled {
  box-shadow: 0 12px 30px rgba(15, 23, 42, .14);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
}

/* Transparent-at-top is a controlled state. The template's own design returns after scrolling. */
.fb-themebuilder--header.fb-themebuilder--transparent:not(.is-scrolled) {
  background: transparent;
  box-shadow: none;
}
.fb-themebuilder--header.fb-themebuilder--transparent:not(.is-scrolled) > .fb-json-layout > .fb-widget--container:first-child {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Shrink is intentionally scoped to the first root container and only after scroll. */
.fb-themebuilder--header.fb-themebuilder--shrink > .fb-json-layout > .fb-widget--container:first-child .fb-container__inner {
  transition: padding-block .2s ease, min-height .2s ease, transform .2s ease;
}
.fb-themebuilder--header.fb-themebuilder--shrink.is-scrolled > .fb-json-layout > .fb-widget--container:first-child .fb-container__inner {
  padding-top: clamp(8px, 1vw, 12px) !important;
  padding-bottom: clamp(8px, 1vw, 12px) !important;
}

.fb-render-error {
  padding: 12px 16px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #991b1b;
  font: 600 13px/1.4 system-ui, sans-serif;
}

@media (max-width: 782px) {
  body.admin-bar .fb-themebuilder--header.fb-themebuilder--sticky { --fb-admin-bar-offset: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .fb-themebuilder--header,
  .fb-themebuilder--header * { transition-duration: .01ms !important; }
}