/* 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;
}

.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;
}

/* Same click-through for the body Conversion Form block: its snippet iframe
   otherwise eats the click so the block is unselectable in the editor. Scoped
   to the editor canvas/stage only ([data-bb-studio-canvas] = Studio,
   [data-bb-editor-stage] = both editors); the demo/public preview has neither,
   so those forms stay live. */
[data-bb-studio-canvas] .conversions-block iframe,
[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;
}

/* 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;
    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 {
    max-width: 58.125rem;
    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;
    }
}

/* 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 layouts: intro text left/right beside the accordion, or above it. */
@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 !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-reverse !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);
}