/* V2 shell/adapters only. Public page geometry is owned by business_pages.css and 06-shared-structural-responsive.css. */

body {
    margin: 0;
}

.bb-v2-builder-page {
    background: #ffffff;
    height: 100vh;
    inset: 0;
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    z-index: auto;
}

.bb-v2-builder-page--preview {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    position: static;
    z-index: auto;
    /* Its own layer, as the Studio page is: the split Hero's photo and the form band's colour are painted at z-index
       -1 and the white background above would cover them (owner 2026-10-14: blank photo half, white band). */
    isolation: isolate;
}

.bb-v2-builder-page--preview .editable-continer.edit-border,
.bb-v2-builder-page--preview .edit-border,
.bb-v2-builder-page--preview .bb-editor-object,
.bb-v2-builder-page--preview .bb-editor-button-placeholder,
.bb-v2-public-preview .editable-continer.edit-border,
.bb-v2-public-preview .edit-border,
.bb-v2-public-preview .bb-editor-object,
.bb-v2-public-preview .bb-editor-button-placeholder {
    border-color: transparent !important;
    outline: 0 !important;
}

.bb-v2-builder-page--preview .edit-design-btn,
.bb-v2-builder-page--preview .edit-design-elemnt-btn,
.bb-v2-builder-page--preview .hide-component-btn,
.bb-v2-builder-page--preview .delete-component-btn,
.bb-v2-builder-page--preview .delete-block-btn,
.bb-v2-builder-page--preview .edit-background-btn,
.bb-v2-builder-page--preview .padding-range,
.bb-v2-public-preview .edit-design-btn,
.bb-v2-public-preview .edit-design-elemnt-btn,
.bb-v2-public-preview .hide-component-btn,
.bb-v2-public-preview .delete-component-btn,
.bb-v2-public-preview .delete-block-btn,
.bb-v2-public-preview .edit-background-btn,
.bb-v2-public-preview .padding-range {
    display: none !important;
}

.bb-v2-builder-page .d-none {
    display: none !important;
}

.bb-v2-status {
    background: #db3a57;
    border: 0;
    border-radius: 4px;
    bottom: 18px;
    color: #ffffff;
    font-size: 12px;
    min-width: auto;
    padding: 8px 10px;
    position: fixed;
    right: 18px;
    z-index: 1200;
}

.bb-v2-status.is-error {
    background: #ffffff;
    border: 1px solid #db3a57;
    color: #db3a57;
}

.bb-v2-editor-root {
    background: #ffffff;
    border-radius: 0;
    margin: 0;
    min-height: 800px;
    padding: 0;
}

.bb-v2-editor-root--preview {
    /* flow-root contains child margins like the old overflow:hidden did, but
       does not clip the horizontal hero form that overlaps from .site-main. */
    display: flow-root;
    min-height: 0;
}

/* Unified intro text-object margins for every block with a text object part:
   label 0, title 1rem (0.7rem mobile), description 0, and one universal
   wrapper gap of 2.5rem (1.7rem mobile) to the block content. */
.bb-v2-builder-page .bb-block-intro,
.bb-v2-public-preview .bb-block-intro {
    margin-bottom: 2.5rem !important;
}

.bb-v2-builder-page .bb-block-intro .block-label,
.bb-v2-public-preview .bb-block-intro .block-label {
    margin: 0 !important;
}

.bb-v2-builder-page .bb-block-intro .block-title,
.bb-v2-public-preview .bb-block-intro .block-title {
    margin: 0 0 1rem !important;
}

.bb-v2-builder-page .bb-block-intro .block-text,
.bb-v2-public-preview .bb-block-intro .block-text {
    margin: 0 !important;
}

@media (max-width: 999.98px) {
    .bb-v2-builder-page .bb-block-intro,
    .bb-v2-public-preview .bb-block-intro {
        margin-bottom: 1.7rem !important;
    }

    .bb-v2-builder-page .bb-block-intro .block-title,
    .bb-v2-public-preview .bb-block-intro .block-title {
        margin-bottom: 0.7rem !important;
    }
}

/* V1 renders the feature description as a div with inline margin-top:1.25rem and
   no <p>, so V2's <p> must not add the legacy 30px top / global 24px bottom. */
.bb-v2-builder-page .bb-feature-card__body {
    margin-top: 1.25rem;
}

.bb-v2-builder-page .bb-feature-card__body p {
    margin: 0;
}

.bb-v2-builder-page .bb-review-card__body {
    position: relative;
}

/* V1 anchors the platform icon at the right edge just under the review text.
   The V2 body box already extends below the text, so bottom:0 lands the icon
   at the same visual spot as V1's bottom:-2rem. */
.bb-v2-builder-page .bb-review-card__platform,
.bb-v2-public-preview .bb-review-card__platform {
    bottom: 0;
    position: absolute;
    right: 0;
}

/* V1 card is d-flex flex-column justify-content-between, pinning the author
   row to the card bottom. */
.bb-v2-builder-page .bb-review-card,
.bb-v2-public-preview .bb-review-card {
    display: flex;
    flex-direction: column;
    row-gap: 0;
}

.bb-v2-builder-page .bb-review-card__rating,
.bb-v2-public-preview .bb-review-card__rating {
    column-gap: 0.5rem;
}

.bb-v2-builder-page .bb-review-card__author {
    align-items: center;
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    margin-top: auto;
    padding-top: 1rem;
}

.bb-v2-builder-page .bb-review-card__author-copy {
    min-width: 0;
    width: 100%;
}

/* V1 renders the subtitle with mb-0, cancelling the legacy .review-date 12px. */
.bb-v2-builder-page .bb-review-card__subtitle {
    margin-bottom: 0 !important;
}

.bb-v2-structural,
.bb-v2-structural *,
.bb-v2-structural *::before,
.bb-v2-structural *::after {
    box-sizing: border-box;
}

.bb-v2-structural a {
    color: inherit;
    text-decoration: none;
}

.bb-v2-structural-form-shell--embedded#header-form {
    margin-top: 0 !important;
}

/* In the editor the form is configured through its side panel, never by typing
   into the live snippet preview. The snippet <iframe> otherwise swallows the
   click, so the form is unselectable and its "Lead Gen Form" / "Form design"
   panel is unreachable (clicking the form did nothing, or fell through to the
   Background panel). Make the iframe click-through so the click lands on the
   form shell, whose edit trigger opens the form panel. Scoped to
   .editable-continer, which only the EDITOR adds — the public render keeps the
   form fully interactive. */
.bb-v2-structural-form-shell.editable-continer iframe {
    pointer-events: none;
}

/* Body Conversion Form iframes are click-through only while editing, so the
   block opens its inspector. Public previews also contain data-bb-editor-stage;
   excluding their preview root keeps the actual form controls usable there. */
[data-bb-studio-canvas] .conversions-block iframe,
.bb-v2-editor-root:not(.bb-v2-editor-root--preview) [data-bb-editor-stage] .conversions-block iframe {
    pointer-events: none;
}

.bb-v2-structural-form-shell--hidden {
    background: #141b34;
    border-radius: 8px;
    color: #ffffff;
    display: grid;
    gap: 10px;
    min-height: 140px;
    padding: 30px 32px;
}

.bb-v2-structural-form-shell--hidden h2 {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.bb-v2-structural-form-shell--hidden p {
    color: #d8dcff;
    margin: 0;
}

/* Studio only: a conversion form the plan does not include names itself in a dashed box. */
.bb-v2-builder-page .bb-v2-image-placeholder.bb-v2-form-locked-placeholder {
    border: 1px dashed currentColor;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.4;
    min-height: 140px;
    padding: 24px;
    text-align: center;
    width: 100%;
}

/* The hero button lives inside the copy column (V1: .btn mt-4 under the
   text) and follows the column's alignment. */
.bb-v2-structural-estimate-button {
    align-items: center;
    display: flex;
    /* One gap for both buttons: side by side when they fit, stacked when they wrap. */
    gap: 0.5rem;
    position: relative;
    width: max-content;
}

.bb-v2-structural-estimate-button .bb-v2-structural-estimate__submit {
    width: 100%;
}

.bb-v2-structural-estimate__submit {
    border: 1px solid transparent;
    cursor: pointer;
    padding: 0 1.5rem;
    text-decoration: none;
}

a.bb-v2-structural-estimate__submit:hover {
    text-decoration: none;
}

.bb-v2-structural-social-icon {
    background: currentColor;
    display: block;
    height: 1em;
    mask: var(--bb-v2-social-icon) center / contain no-repeat;
    -webkit-mask: var(--bb-v2-social-icon) center / contain no-repeat;
    opacity: 0.72;
    width: 1em;
}

.bb-v2-structural-panel-form .file-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bb-v2-structural-panel-form .image-preview-container.navigation,
.bb-v2-structural-panel-form .image-preview-container.column {
    height: 92px;
    min-width: 92px;
    width: 92px;
}

.bb-v2-structural-panel-form .preview-image {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.bb-v2-structural-panel-form .nav-category-cards,
.bb-v2-structural-panel-form .nav-standalone-links,
.bb-v2-structural-panel-form .nav-category-links,
.bb-v2-structural-panel-form .nav-item-controls {
    display: flex;
    flex-direction: column;
}

.bb-v2-structural-panel-form .nav-category-cards,
.bb-v2-structural-panel-form .nav-standalone-links {
    gap: 14px;
}

.bb-v2-structural-panel-form .nav-category-links {
    gap: 12px;
    margin-top: 12px;
}

.bb-v2-structural-panel-form .nav-item-controls {
    gap: 10px;
    margin-top: 10px;
}

.bb-v2-structural-panel-form .bb-v2-nav-manager-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.bb-v2-structural-panel-form .bb-v2-nav-manager-actions .btn {
    min-width: 0;
    padding-left: 13px;
    padding-right: 13px;
    white-space: nowrap;
}

.bb-v2-structural-panel-form .nav-standalone-section,
.bb-v2-structural-panel-form .nav-category-card {
    border: 1px solid #d8dee8;
    border-radius: 4px;
    padding: 12px;
}

.bb-v2-structural-panel-form .nav-category-card-header,
.bb-v2-structural-panel-form .nav-item-row-header {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 8px;
}

.bb-v2-structural-panel-form .nav-category-card-title {
    color: #58667d;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.bb-v2-structural-panel-form .nav-item-row {
    border-left: 2px solid #e6ebf2;
    padding-left: 10px;
}

.bb-v2-icon-trash-btn {
    align-items: center;
    display: inline-flex;
    flex: 0 0 36px;
    height: 32px;
    justify-content: center;
    min-width: 36px;
    padding: 0 !important;
    width: 36px;
}

.bb-v2-icon-trash-btn img {
    display: block;
    height: 16px;
    object-fit: contain;
    width: 16px;
}

/* Image Content Block: V1's flex-md-row(-reverse) utilities and inline img sizing. */
@media (min-width: 768px) {
    .bb-v2-builder-page .page-block.text-left-image,
    .bb-v2-public-preview .page-block.text-left-image {
        flex-direction: row-reverse !important;
    }

    .bb-v2-builder-page .page-block.text-right-image,
    .bb-v2-public-preview .page-block.text-right-image {
        flex-direction: row !important;
    }
}

/* V1 renders this image with INLINE height:21.875rem - !important keeps
   business_pages.css's .text-bottom-image height:100% rule from
   stretching it (V1's inline style wins there; a class can't). */
.bb-v2-builder-page .bb-image-content__img,
.bb-v2-public-preview .bb-image-content__img {
    height: 21.875rem !important;
    object-fit: cover;
    width: 100%;
}

/* Unified button model (owner ruling 2026-07-03): every button component
   centers its text at any font size. The style height acts as a MINIMUM -
   the box grows instead of overflowing - and side paddings/width follow
   V1's .btn recipe (width max-content, max-width 100%, padding 0 2rem). */
.bb-v2-builder-page .bb-v2-btn,
.bb-v2-public-preview .bb-v2-btn {
    align-items: center !important;
    box-sizing: border-box;
    display: inline-flex !important;
    height: auto !important;
    justify-content: center !important;
    line-height: 1.2 !important;
    max-width: 100%;
    min-height: 52px;
    overflow-wrap: anywhere;
    padding: 0.375rem 2rem !important;
    text-align: center;
    white-space: normal;
    width: max-content;
}

/* Text Link view keeps typography without button chrome. */
.bb-v2-builder-page .bb-builder-button--link.bb-v2-btn,
.bb-v2-public-preview .bb-builder-button--link.bb-v2-btn {
    display: inline !important;
    min-height: 0;
    padding: 0 !important;
    width: auto;
}

/* Video Content Block frame mirrors the V1 text-video iframe box. */
.bb-v2-builder-page .bb-video-content__frame,
.bb-v2-public-preview .bb-video-content__frame {
    border: 0;
    display: block;
    height: 21.875rem;
    width: 100%;
}

/* Owner ruling (2026-07-03): in media-beside-text rows the copy column
   FILLS the remaining width. Flexbox otherwise packs the natural-width
   text against the media and leaves a dead gap on the opposite side. */
.bb-v2-builder-page .bb-image-content__row .block-text-container,
.bb-v2-public-preview .bb-image-content__row .block-text-container {
    flex: 1 1 0%;
    min-width: 0;
}

/* Owner ruling (2026-07-03): in the BOTTOM layout the media keeps V2's
   taller look (~500px) for both picture and video - the 21.875rem V1 pin
   applies to the side layouts only. */
.bb-v2-builder-page .page-block.text-bottom-image .bb-image-content__img,
.bb-v2-public-preview .page-block.text-bottom-image .bb-image-content__img,
.bb-v2-builder-page .page-block.text-bottom-image .bb-video-content__frame,
.bb-v2-public-preview .page-block.text-bottom-image .bb-video-content__frame {
    height: 31.25rem !important;
}

/* Conversion Form: view 2 shows the button instead of the form; v1/v2
   columns span full width like V1's blade-added w-100. Side-by-side views
   pin the form to the section's outer edge regardless of text alignment. */
.bb-v2-builder-page .bb-conversion-form__btn,
.bb-v2-public-preview .bb-conversion-form__btn {
    display: none !important;
}

.bb-v2-builder-page .conversions-block-content.v2 .bb-conversion-form__btn,
.bb-v2-public-preview .conversions-block-content.v2 .bb-conversion-form__btn {
    display: inline-flex !important;
}

.bb-v2-builder-page .conversions-block-content.v2 .bb-conversion-form__form,
.bb-v2-public-preview .conversions-block-content.v2 .bb-conversion-form__form {
    display: none;
}

.bb-v2-builder-page .conversions-block-content.v1 .column,
.bb-v2-public-preview .conversions-block-content.v1 .column,
.bb-v2-builder-page .conversions-block-content.v2 .column,
.bb-v2-public-preview .conversions-block-content.v2 .column {
    width: 100%;
}

/* V1's side-by-side form layouts always keep breathing room between the
   iframe and the copy.  The gap is a layout concern (not section padding),
   so it remains present for every frame/content-width combination. */
.bb-v2-builder-page .conversions-block-content.v3,
.bb-v2-public-preview .conversions-block-content.v3,
#template-demo-frame .conversions-block .conversions-block-content.v3,
.bb-v2-builder-page .conversions-block-content.v4,
.bb-v2-public-preview .conversions-block-content.v4,
#template-demo-frame .conversions-block .conversions-block-content.v4 {
    --bb-conversion-column-gap: clamp(1.5rem, 4vw, 4rem);
    column-gap: var(--bb-conversion-column-gap);
}

.bb-v2-builder-page .conversions-block-content.v3 > .column,
.bb-v2-public-preview .conversions-block-content.v3 > .column,
#template-demo-frame .conversions-block .conversions-block-content.v3 > .column,
.bb-v2-builder-page .conversions-block-content.v4 > .column,
.bb-v2-public-preview .conversions-block-content.v4 > .column,
#template-demo-frame .conversions-block .conversions-block-content.v4 > .column {
    width: calc(50% - (var(--bb-conversion-column-gap) / 2)) !important;
}

.bb-v2-builder-page .conversions-block-content.v3:not(.bb-conv-orient-2) > .bb-conversion-form__form-col,
.bb-v2-public-preview .conversions-block-content.v3:not(.bb-conv-orient-2) > .bb-conversion-form__form-col {
    justify-content: flex-start !important;
}

.bb-v2-builder-page .conversions-block-content.v4:not(.bb-conv-orient-2) > .bb-conversion-form__form-col,
.bb-v2-public-preview .conversions-block-content.v4:not(.bb-conv-orient-2) > .bb-conversion-form__form-col {
    justify-content: flex-end !important;
}

/* Side-by-side conversion layouts: the columns are flex children whose
   intrinsic minimum lets long unbroken words spill over the form column
   (owner report at <=1600px). Let columns shrink and wrap long words, and
   never clip the form box's bottom edge. */
.bb-v2-builder-page .conversions-block-content:not(.bb-conv-orient-2) > .column,
.bb-v2-public-preview .conversions-block-content:not(.bb-conv-orient-2) > .column,
#template-demo-frame .conversions-block .conversions-block-content:not(.bb-conv-orient-2) > .column {
    min-width: 0;
    overflow-wrap: break-word;
}

.bb-v2-builder-page .bb-conversion-form__form-col,
.bb-v2-public-preview .bb-conversion-form__form-col,
#template-demo-frame .conversions-block .bb-conversion-form__form-col {
    min-width: 0;
}

.bb-v2-builder-page .bb-conversion-form__form iframe,
.bb-v2-public-preview .bb-conversion-form__form iframe,
#template-demo-frame .conversions-block .bb-conversion-form__form iframe {
    margin-bottom: 0.5rem;
}

/* Horizontal forms always sit below the text (hero behaviour); the form
   column then follows the text orientation via its inline justify-content. */
.bb-v2-builder-page .conversions-block-content.bb-conv-orient-2,
.bb-v2-public-preview .conversions-block-content.bb-conv-orient-2,
#template-demo-frame .conversions-block .conversions-block-content.bb-conv-orient-2 {
    flex-direction: column-reverse !important;
    row-gap: 1.5rem;
}

.bb-v2-builder-page .conversions-block-content.bb-conv-orient-2 .column,
.bb-v2-public-preview .conversions-block-content.bb-conv-orient-2 .column,
#template-demo-frame .conversions-block .conversions-block-content.bb-conv-orient-2 .column {
    width: 100% !important;
}

/* V1 forces snippet iframes visible; they arrive hidden until sized. The
   form fills its column, and the iframe fills the form. */
.bb-v2-builder-page .bb-conversion-form__form,
.bb-v2-public-preview .bb-conversion-form__form,
#template-demo-frame .conversions-block .bb-conversion-form__form {
    width: 100%;
}

.bb-v2-builder-page .bb-conversion-form__form iframe,
.bb-v2-public-preview .bb-conversion-form__form iframe,
#template-demo-frame .conversions-block .bb-conversion-form__form iframe {
    border: 0;
    display: block;
    min-height: 520px;
    overflow: hidden;
    position: static !important;
    visibility: visible !important;
    width: 100% !important;
}

/* The block alignment is canonical. Imported per-field text-align values
   must not override it, and the button/form column uses the same alignment
   through its inline justify-content rule. */
.bb-v2-builder-page .conversions-block-content .bb-conversion-form__text-col .bb-block-intro,
.bb-v2-public-preview .conversions-block-content .bb-conversion-form__text-col .bb-block-intro,
#template-demo-frame .conversions-block .bb-conversion-form__text-col .bb-block-intro,
.bb-v2-builder-page .conversions-block-content .bb-conversion-form__text-col .block-label,
.bb-v2-public-preview .conversions-block-content .bb-conversion-form__text-col .block-label,
#template-demo-frame .conversions-block .bb-conversion-form__text-col .block-label,
.bb-v2-builder-page .conversions-block-content .bb-conversion-form__text-col .block-title,
.bb-v2-public-preview .conversions-block-content .bb-conversion-form__text-col .block-title,
#template-demo-frame .conversions-block .bb-conversion-form__text-col .block-title,
.bb-v2-builder-page .conversions-block-content .bb-conversion-form__text-col .block-text,
.bb-v2-public-preview .conversions-block-content .bb-conversion-form__text-col .block-text,
#template-demo-frame .conversions-block .bb-conversion-form__text-col .block-text {
    text-align: inherit !important;
}

/* Vertical form snippets scale their type with the iframe viewport, so an
   uncapped wide iframe renders giant text. The 36rem cap of the earlier fix
   was still too generous (owner: "conversion forms are huge... old bug came
   back") - the snippet's natural vertical width is 420px, which is exactly
   what V1-parity pages render. Cap there. */
.bb-v2-builder-page .conversions-block-content:not(.bb-conv-orient-2):not(.v1) .bb-conversion-form__form iframe,
.bb-v2-public-preview .conversions-block-content:not(.bb-conv-orient-2):not(.v1) .bb-conversion-form__form iframe,
#template-demo-frame .conversions-block .conversions-block-content:not(.bb-conv-orient-2):not(.v1) .bb-conversion-form__form iframe {
    max-width: 26.25rem;
}

/* Stacked horizontal form: V1 caps the full-width iframe at 58.125rem
   (.conversions-block-content.v1 .full-container iframe). */
.bb-v2-builder-page .bb-conv-orient-2 .bb-conversion-form__form iframe,
.bb-v2-public-preview .bb-conv-orient-2 .bb-conversion-form__form iframe,
#template-demo-frame .conversions-block .bb-conv-orient-2 .bb-conversion-form__form iframe,
.bb-v2-builder-page .conversions-block-content.v1 .bb-conversion-form__form iframe,
.bb-v2-public-preview .conversions-block-content.v1 .bb-conversion-form__form iframe,
#template-demo-frame .conversions-block .conversions-block-content.v1 .bb-conversion-form__form iframe {
    /* Horizontal Conversion is the same 930px product form regardless of the
       host page's responsive root font size or the loader's inline width. */
    max-width: 930px !important;
    min-height: 260px;
}

/* Horizontal conversion form follows the TEXT orientation (the column
   carries the alignment as inline text-align). */
.bb-v2-builder-page .bb-conv-orient-2 .bb-conversion-form__form iframe,
.bb-v2-public-preview .bb-conv-orient-2 .bb-conversion-form__form iframe,
#template-demo-frame .conversions-block .bb-conv-orient-2 .bb-conversion-form__form iframe,
.bb-v2-builder-page .conversions-block-content.v1 .bb-conversion-form__form iframe,
.bb-v2-public-preview .conversions-block-content.v1 .bb-conversion-form__form iframe,
#template-demo-frame .conversions-block .conversions-block-content.v1 .bb-conversion-form__form iframe {
    /* !important: the snippet loader writes inline centering margins. */
    margin-left: 0 !important;
    margin-right: auto !important;
}

.bb-v2-builder-page .bb-conv-orient-2 .bb-conversion-form__form-col[style*="text-align: center"] .bb-conversion-form__form iframe,
.bb-v2-public-preview .bb-conv-orient-2 .bb-conversion-form__form-col[style*="text-align: center"] .bb-conversion-form__form iframe,
#template-demo-frame .conversions-block .bb-conv-orient-2 .bb-conversion-form__form-col[style*="text-align: center"] .bb-conversion-form__form iframe,
.bb-v2-builder-page .conversions-block-content.v1 .bb-conversion-form__form-col[style*="text-align: center"] .bb-conversion-form__form iframe,
.bb-v2-public-preview .conversions-block-content.v1 .bb-conversion-form__form-col[style*="text-align: center"] .bb-conversion-form__form iframe,
#template-demo-frame .conversions-block .conversions-block-content.v1 .bb-conversion-form__form-col[style*="text-align: center"] .bb-conversion-form__form iframe {
    margin-left: auto !important;
    margin-right: auto !important;
}

.bb-v2-builder-page .bb-conv-orient-2 .bb-conversion-form__form-col[style*="text-align: right"] .bb-conversion-form__form iframe,
.bb-v2-public-preview .bb-conv-orient-2 .bb-conversion-form__form-col[style*="text-align: right"] .bb-conversion-form__form iframe,
#template-demo-frame .conversions-block .bb-conv-orient-2 .bb-conversion-form__form-col[style*="text-align: right"] .bb-conversion-form__form iframe,
.bb-v2-builder-page .conversions-block-content.v1 .bb-conversion-form__form-col[style*="text-align: right"] .bb-conversion-form__form iframe,
.bb-v2-public-preview .conversions-block-content.v1 .bb-conversion-form__form-col[style*="text-align: right"] .bb-conversion-form__form iframe,
#template-demo-frame .conversions-block .conversions-block-content.v1 .bb-conversion-form__form-col[style*="text-align: right"] .bb-conversion-form__form iframe {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* On mobile the horizontal form renders as the vertical snippet. */
.bb-conv-form-mobile {
    display: none;
}

@media (max-width: 999.98px) {
    .bb-conv-orient-2 .bb-conv-form-desktop,
    .conversions-block-content.v1 .bb-conv-form-desktop {
        display: none;
    }

    .bb-conv-orient-2 .bb-conv-form-mobile,
    .conversions-block-content.v1 .bb-conv-form-mobile {
        display: block;
    }

    .bb-v2-builder-page .bb-conv-orient-2 .bb-conv-form-mobile iframe,
    .bb-v2-public-preview .bb-conv-orient-2 .bb-conv-form-mobile iframe,
    #template-demo-frame .conversions-block .bb-conv-orient-2 .bb-conv-form-mobile iframe {
        margin: 0 auto;
        max-width: 36rem;
        min-height: 520px;
    }
}

/* Centered text: each contact detail centres on its own line (stacked) or in its share of the row. */
.bb-conversion-form__text-col[style*="text-align: center"] .bb-image-content__details > .bb-image-content__detail {
    justify-content: center;
}

/* Horizontal form: the contact details sit in one row across the full width, each an equal share (more items, each
   narrower), and stack again below the same 1000px width at which
   the form turns vertical. Studio's add button keeps its own line. */
@media (min-width: 1000px) {
    .bb-conv-orient-2 .bb-image-content__details {
        display: flex;
        flex-wrap: wrap;
    }

    .bb-conv-orient-2 .bb-image-content__details > .bb-image-content__detail {
        flex: 1 1 0;
    }

    .bb-conv-orient-2 .bb-image-content__details > .bb-editor-add-item {
        flex: 0 0 100%;
    }

    .bb-conv-orient-2 .bb-image-content__details--separators-between > .bb-image-content__detail + .bb-image-content__detail::before {
        border-left: 1px solid var(--bb-image-content-detail-separator-color, currentColor);
        border-top: 0;
        bottom: 0;
        height: auto;
        right: auto;
        transform: translateX(-50%);
        width: var(--bb-image-content-detail-gap, 10px);
    }
}

/* Layout picker previews reuse V1's palette cards at panel width. */
.builder-side-panel .bb-conv-layout-option .conversion-block {
    pointer-events: none;
    width: 100%;
}

.builder-side-panel .bb-conv-layout-option .conversion-block-form-container img {
    max-height: 5rem;
    object-fit: cover;
    width: 100%;
}

.builder-side-panel .bb-conv-layout-option .conversion-block.view-3 .conversion-block-form-container,
.builder-side-panel .bb-conv-layout-option .conversion-block.view-4 .conversion-block-form-container {
    width: 50%;
}

@media (max-width: 870px) {
    .bb-v2-builder-page .conversions-block-content.v3,
    .bb-v2-public-preview .conversions-block-content.v3 {
        flex-direction: column-reverse !important;
        row-gap: 1.5rem;
    }

    .bb-v2-builder-page .conversions-block-content.v4,
    .bb-v2-public-preview .conversions-block-content.v4 {
        flex-direction: column !important;
        row-gap: 1.5rem;
    }

    .bb-v2-builder-page .conversions-block-content.v3 .column,
    .bb-v2-public-preview .conversions-block-content.v3 .column,
    .bb-v2-builder-page .conversions-block-content.v4 .column,
    .bb-v2-public-preview .conversions-block-content.v4 .column {
        align-items: center;
        width: 100% !important;
    }
}

/* Gallery: V1-style empty preview (7-tile mosaic) until images exist, and
   the Images panel thumbnail manager. */
.bb-v2-builder-page .bb-gallery__tile {
    position: relative;
}

/* Editor only: shrink gallery images ~12% inside their tiles so the corner
   edit/delete hotspots of neighbouring tiles stay clickable. No hover
   animation in the editor — moving targets are impossible to click. */
.bb-v2-builder-page .bb-gallery__tile,
.bb-v2-builder-page .bb-gallery__tile:hover,
.bb-v2-builder-page .bb-gallery__tile img,
.bb-v2-builder-page .bb-gallery__tile:hover img {
    animation: none !important;
    transition: none !important;
}

/* V1's .mosaic-cont:hover { transform: scale(1.05) !important } scales the
   whole TILE — pin it in the editor or hover still zooms. */
.bb-v2-builder-page .bb-gallery__tile,
.bb-v2-builder-page .bb-gallery__tile:hover {
    transform: none !important;
}

.bb-v2-builder-page .bb-gallery__tile img,
.bb-v2-builder-page .bb-gallery__tile:hover img {
    display: block;
    transform: scale(0.95) !important;
    transform-origin: center;
}

/* The hotspots follow the SHRUNKEN image corners (2.5% inset per side)
   instead of the tile corners, so neighbouring tiles' buttons don't overlap. */
.bb-v2-builder-page .bb-gallery__tile .bb-editor-hotspot--top-left {
    left: calc(2.5% - 6px);
    top: calc(2.5% - 6px);
}

.bb-v2-builder-page .bb-gallery__tile .bb-editor-hotspot--top-right {
    right: calc(2.5% - 6px);
    top: calc(2.5% - 6px);
}

.builder-side-panel .bb-gallery-panel-thumbs {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.builder-side-panel .bb-gallery-panel-thumb {
    position: relative;
}

.builder-side-panel .bb-gallery-panel-thumb img {
    border-radius: 4px;
    display: block;
    height: 90px;
    object-fit: cover;
    width: 100%;
}

.builder-side-panel .bb-gallery-panel-thumb__delete {
    align-items: center;
    background: #ffffff;
    border: 1px solid #db3a57;
    border-radius: 50%;
    color: #db3a57;
    cursor: pointer;
    display: flex;
    height: 20px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: -6px;
    top: -6px;
    width: 20px;
}

/* FAQ question row: the question always keeps a 16px gap before the +/x icon and wraps
   instead of running into it; the icon never shrinks and sits on the first line. */
.bb-v2-builder-page .faq-item .deploy-faq-item-btn,
.bb-v2-public-preview .faq-item .deploy-faq-item-btn {
    align-items: flex-start;
    column-gap: 16px;
}

.bb-v2-builder-page .faq-item .deploy-faq-item-btn > .faq-subtitle,
.bb-v2-public-preview .faq-item .deploy-faq-item-btn > .faq-subtitle {
    min-width: 0;
    overflow-wrap: anywhere;
}

.bb-v2-builder-page .faq-item .deploy-faq-item-btn > svg,
.bb-v2-public-preview .faq-item .deploy-faq-item-btn > svg {
    flex: 0 0 auto;
}

/* FAQ layouts: faq_layout.position names the ACCORDION side (block-7-faq-accordion.md: left = accordion on left,
   intro on right; right = intro on left, accordion on right), or the intro above it. The intro comes first in the HTML. */
@media (min-width: 768px) {
    .bb-v2-builder-page .page-block.bb-faq--left,
    .bb-v2-public-preview .page-block.bb-faq--left {
        column-gap: 2rem;
        flex-direction: row-reverse !important;
    }

    .bb-v2-builder-page .page-block.bb-faq--right,
    .bb-v2-public-preview .page-block.bb-faq--right {
        column-gap: 2rem;
        flex-direction: row !important;
    }

    .bb-v2-builder-page .page-block.bb-faq--left > .bb-block-intro,
    .bb-v2-public-preview .page-block.bb-faq--left > .bb-block-intro,
    .bb-v2-builder-page .page-block.bb-faq--right > .bb-block-intro,
    .bb-v2-public-preview .page-block.bb-faq--right > .bb-block-intro {
        align-self: center;
        margin-bottom: 0 !important;
        width: 50%;
    }

    .bb-v2-builder-page .page-block.bb-faq--left > .bb-faq__list,
    .bb-v2-public-preview .page-block.bb-faq--left > .bb-faq__list,
    .bb-v2-builder-page .page-block.bb-faq--right > .bb-faq__list,
    .bb-v2-public-preview .page-block.bb-faq--right > .bb-faq__list {
        width: 50%;
    }
}

/* Full Size Video: the frame fills the V1 .page-block.videos min-height. */
.bb-v2-builder-page .bb-full-video__frame-wrap,
.bb-v2-public-preview .bb-full-video__frame-wrap {
    display: flex;
    flex: 1;
}

.bb-v2-builder-page .bb-full-video__frame,
.bb-v2-public-preview .bb-full-video__frame {
    border: 0;
    flex: 1;
    height: auto;
    min-height: 100%;
    width: 100%;
}

.bb-v2-builder-page .bb-full-video__frame-wrap .bb-v2-video-wrap,
.bb-v2-public-preview .bb-full-video__frame-wrap .bb-v2-video-wrap {
    display: flex;
    flex: 1;
}

/* A still image in the full-size video slot keeps the V1 iframe box
   (min-height 510px) instead of its natural height. */
.bb-v2-builder-page img.bb-full-video__frame,
.bb-v2-public-preview img.bb-full-video__frame {
    height: 31.875rem;
    min-height: 0;
    object-fit: cover;
}

.bb-v2-builder-page .bb-v2-video-wrap {
    position: relative;
}

.bb-v2-builder-page .bb-v2-video-overlay {
    cursor: pointer;
    inset: 0;
    position: absolute;
}

.bb-v2-builder-page .page-block.text-bottom-image,
.bb-v2-public-preview .page-block.text-bottom-image {
    flex-direction: column-reverse !important;
}

/* V1 centered feature items stack the icon ABOVE the title
   (services__item-header gets flex-column) and centre all text;
   right-aligned items reverse the row (V1 service_block.blade). */
.bb-v2-builder-page .bb-feature-card--align-center,
.bb-v2-public-preview .bb-feature-card--align-center {
    text-align: center;
}

.bb-v2-builder-page .bb-feature-card--align-center .services__item-header,
.bb-v2-public-preview .bb-feature-card--align-center .services__item-header {
    flex-direction: column;
}

.bb-v2-builder-page .bb-feature-card--align-right,
.bb-v2-public-preview .bb-feature-card--align-right {
    text-align: right;
}

.bb-v2-builder-page .bb-feature-card--align-right .services__item-header,
.bb-v2-public-preview .bb-feature-card--align-right .services__item-header {
    flex-direction: row-reverse;
}

/* Buttons follow the item text alignment (V1 justify-content-* wrapper classes). */
.bb-v2-builder-page .bb-feature-card--align-center .block-control,
.bb-v2-public-preview .bb-feature-card--align-center .block-control {
    justify-content: center !important;
}

.bb-v2-builder-page .bb-feature-card--align-right .block-control,
.bb-v2-public-preview .bb-feature-card--align-right .block-control {
    justify-content: flex-end !important;
}

/* OWNER RULING (2026-07-04): a single-image gallery renders taller than
   V1's 21.875rem cap - same ~500px presence as the full-size video and
   bottom-layout media. Desktop only; mobile keeps V1's stacked height. */
@media (min-width: 768px) {
    .bb-v2-builder-page .page-block.images .mosaic-1,
    .bb-v2-public-preview .page-block.images .mosaic-1 {
        height: 31.25rem !important;
    }

    .bb-v2-builder-page .page-block.images .mosaic-1 img,
    .bb-v2-public-preview .page-block.images .mosaic-1 img {
        max-height: 31.25rem !important;
    }
}

/* Review items follow reviews_layout.item_layout / per-item text_align
   (bb-review-card--align-*): text alignment plus the rating and author
   flex rows. Left is the natural flow, like feature cards. */
.bb-v2-builder-page .bb-review-card--align-center,
.bb-v2-public-preview .bb-review-card--align-center {
    text-align: center;
}

.bb-v2-builder-page .bb-review-card--align-center .bb-review-card__rating,
.bb-v2-public-preview .bb-review-card--align-center .bb-review-card__rating,
.bb-v2-builder-page .bb-review-card--align-center .bb-review-card__author,
.bb-v2-public-preview .bb-review-card--align-center .bb-review-card__author {
    justify-content: center;
}

.bb-v2-builder-page .bb-review-card--align-right,
.bb-v2-public-preview .bb-review-card--align-right {
    text-align: right;
}

.bb-v2-builder-page .bb-review-card--align-right .bb-review-card__rating,
.bb-v2-public-preview .bb-review-card--align-right .bb-review-card__rating,
.bb-v2-builder-page .bb-review-card--align-right .bb-review-card__author,
.bb-v2-public-preview .bb-review-card--align-right .bb-review-card__author {
    justify-content: flex-end;
}

/* Centered/right cards: the author copy must shrink to its content or the
   avatar+name cluster centers inside the leftover column, not the card
   (owner: "center but not center"). Left cards keep the stretched copy. */
.bb-v2-builder-page .bb-review-card--align-center .bb-review-card__author-copy,
.bb-v2-public-preview .bb-review-card--align-center .bb-review-card__author-copy,
.bb-v2-builder-page .bb-review-card--align-right .bb-review-card__author-copy,
.bb-v2-public-preview .bb-review-card--align-right .bb-review-card__author-copy {
    width: auto;
}

/* Text Link button view (V1 button_view_type=link). */
.bb-v2-builder-page a.bb-builder-button--link,
.bb-v2-public-preview a.bb-builder-button--link {
    background: none !important;
    border: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    text-decoration: underline !important;
}



/* Hidden hero form: V1 renders a dashed box in the exact shape of the
   vertical form with "Form Hidden" centered - no card background/title. */
.bb-v2-builder-page .bb-v2-structural-form-shell--hidden {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.bb-v2-builder-page .bb-v2-structural-form-shell--hidden .form-layout {
    appearance: none;
    background: transparent;
    border: 1px dashed #ffffff;
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    height: 31.25rem;
    padding: 0;
    width: 22.5rem;
}

/* A hidden form is still a real editable object in Studio. Make the whole
   silhouette (not only the tiny pencil) the hit target and give it the same
   hover/focus feedback as visible editor objects. */
.bb-v2-builder-page .bb-v2-structural-form-shell--hidden {
    cursor: pointer;
}

.bb-v2-builder-page .bb-v2-structural-form-shell--hidden .form-layout {
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.bb-v2-builder-page .bb-v2-structural-form-shell--hidden:hover .form-layout,
.bb-v2-builder-page .bb-v2-structural-form-shell--hidden:focus-visible .form-layout,
.bb-v2-builder-page .bb-v2-structural-form-shell--hidden:focus-within .form-layout {
    background: rgba(255, 255, 255, 0.08);
    border-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.24);
}

@media (max-width: 767.98px) {
    /* business_pages.css (main.scss) gives body min-width: 350px for the app;
       on a website that made every page scroll sideways on 320-349px phones. */
    body {
        min-width: 0;
    }

    /* Big titles shrink less on phones (44-48px floors), so even out their
       lines instead of leaving one word alone on the last line. */
    .bb-v2-builder-page :is(h1, h2, .block-title) {
        text-wrap: balance;
    }

    /* The hero form keeps its 362px width (snippet client) but never runs
       past a narrower screen: at 360px it overflowed the page by 1px. */
    .bb-v2-builder-page .bb-v2-structural-hero iframe#bizbaby-snippet {
        max-width: 100vw;
    }
}