/* ============================================================
   V2 "Studio" canvas interaction skin — ONLY on the ?studio=1
   page (.bb-studio root). Hides the legacy editing chrome and
   provides the draft's selection/toolbar/add-block visuals.
   The legacy controls stay in the DOM (hidden) — the Studio
   toolbars carry the same data-bb-* datasets so the existing
   dispatcher executes everything.
   ============================================================ */

/* The page sheet must let toolbars sit just above its first section. Keep
   the outer website corners on the Hero/Footer instead of clipping chrome. */
.bb-studio .bb-studio-sheet {
    margin-top: 32px;
    overflow: visible;
}
.bb-studio [data-bb-structural-block="hero"] {
    border-radius: 14px 14px 0 0;
}
.bb-studio [data-bb-structural-block="footer"] {
    border-radius: 0 0 14px 14px;
}

/* The public hero image continues behind the navigation. In Studio, keep
   navigation clicks above that image and begin the Hero selection boundary
   where the editable hero content actually starts. */
.bb-studio #site-navigation[data-bb-structural-block="header-menu"] {
    z-index: 80;
}

/* ---------------- hide legacy editor chrome ---------------- */
/* pencils hidden EVERYWHERE in Studio (structural hero/footer too) —
   the structural click handler .click()s them programmatically */
.bb-studio .bb-editor-block-hotspot,
.bb-studio .bb-editor-hotspot,
.bb-studio [data-bb-studio-canvas] .edit-design-btn,
.bb-studio [data-bb-studio-canvas] .edit-design-elemnt-btn,
.bb-studio [data-bb-studio-canvas] .hide-component-btn,
.bb-studio .bb-v2-add-block-row,
.bb-studio .bb-editor-menu {
    display: none !important;
}

/* Hide only legacy editing outlines. Authored borders remain visible. */
.bb-studio [data-bb-editor-stage] .edit-border,
.bb-studio [data-bb-editor-stage] .editable-continer,
.bb-studio [data-bb-editor-stage] .bb-editor-object,
.bb-studio [data-bb-studio-canvas] .editable-header-block,
.bb-studio [data-bb-studio-canvas] .bb-v2-structural-form-shell,
.bb-studio [data-bb-studio-canvas] [data-bb-structural-block] .editable-continer,
.bb-studio [data-bb-studio-canvas] [data-bb-structural-block] .edit-border {
    outline: none !important;
}

/* Legacy .edit-border draws a red dashed editor border. Neutralize it only
   when the element has no authored inline border to preserve. */
.bb-studio [data-bb-editor-stage] .bb-editor-object.edit-border:not([style*="border:"]):not([style*="border-color:"]),
.bb-studio [data-bb-studio-canvas] [data-bb-structural-block] .editable-continer.edit-border:not([style*="border:"]):not([style*="border-color:"]),
.bb-studio [data-bb-studio-canvas] [data-bb-structural-block] .edit-border:not([style*="border:"]):not([style*="border-color:"]) {
    border-color: transparent !important;
}

.bb-studio [data-bb-editor-stage] .bb-editor-button-placeholder {
    outline: none !important;
}

/* Difference blending lets translucent editor-only ghost text contrast with
   the actual pixel underneath, including mixed light/dark photographs. */
.bb-studio [data-bb-studio-canvas] [data-bb-inline-edit][data-bb-placeholder]:empty::before {
    color: rgba(255, 255, 255, 0.82) !important;
    mix-blend-mode: difference;
    opacity: 1;
    text-shadow: none;
}
.bb-studio [data-bb-studio-canvas] [data-bb-inline-edit].opacity-40,
.bb-studio [data-bb-studio-canvas] .bb-editor-object--hidden [data-bb-inline-edit] {
    color: rgba(255, 255, 255, 0.82) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.82) !important;
    mix-blend-mode: difference;
    opacity: 0.68 !important;
    text-shadow: none;
}
.bb-studio [data-bb-studio-canvas] .bb-editor-object--hidden {
    opacity: 0.82;
}

/* legacy "ADD CARD" text links -> quiet dashed ghost buttons */
.bb-studio [data-bb-editor-stage] .bb-editor-add-item {
    background: transparent !important;
    border: 2px dashed currentColor !important;
    border-radius: 10px !important;
    color: #fff !important;
    cursor: pointer;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    margin: 10px 0;
    mix-blend-mode: difference;
    opacity: 0.82;
    padding: 9px 18px !important;
    text-decoration: none !important;
    text-transform: uppercase;
    transition: background-color 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

.bb-studio [data-bb-editor-stage] .bb-editor-add-item::before {
    border: none;
    border-radius: 0;
    content: "+";
    font-size: 13px;
    height: auto;
    width: auto;
}

.bb-studio [data-bb-editor-stage] .bb-editor-add-item:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 0 0 1px currentColor;
    opacity: 1;
}

/* Features Grid items need a clear break before their own Add Item action. */
.bb-studio [data-bb-editor-stage] .bb-features .bb-features__grid + .bb-editor-add-item {
    margin-top: var(--bb-sp-5, 24px) !important;
}

.bb-studio [data-bb-editor-stage] .bb-editor-add-item img,
.bb-studio [data-bb-editor-stage] .bb-editor-add-item svg {
    display: none;
}

/* Studio uses the unified object toolbar, so Gallery images no longer need
   the legacy 95% shrink that exposed now-hidden corner hotspots. */
.bb-studio [data-bb-editor-stage] .bb-gallery__tile > img {
    transform: none !important;
}

/* spacing edits animate on the canvas, exactly like the draft */
.bb-studio [data-bb-v2-block-shell] > * {
    transition: padding-top 0.25s ease, padding-bottom 0.25s ease;
}

/* The editor render pins sections to a literal 120px (the legacy drag-pill
   used to apply the real value on top  Studio hides that pill). Keep at
   least 60px as an editor-only selection surface; larger stored values stay
   exact. Public rendering continues to use the stored responsive value. */
.bb-studio [data-bb-v2-block-shell] > [style*="--bb-v2-section-padding-top"] {
    padding-top: max(60px, var(--bb-v2-section-padding-top)) !important;
}

.bb-studio [data-bb-v2-block-shell] > [style*="--bb-v2-section-padding-bottom"] {
    padding-bottom: max(60px, var(--bb-v2-section-padding-bottom)) !important;
}

/* ---------------- hover highlight ---------------- */
.bb-studio [data-bb-v2-block-shell] > :first-child,
.bb-studio [data-bb-studio-canvas] [data-bb-structural-block] {
    position: relative;
}

/* The perimeter is editor chrome only. Its inset keeps full-width blocks
   discoverable while the difference blend stays on the line, not the content. */
.bb-studio [data-bb-v2-block-shell] > :first-child::before,
.bb-studio [data-bb-studio-canvas] [data-bb-structural-block]:not([data-bb-structural-block="hero"])::before,
.bb-studio [data-bb-studio-canvas] [data-bb-structural-block="hero"]::after {
    border: 2px dashed #fff;
    border-radius: inherit;
    content: "";
    inset: 5px;
    mix-blend-mode: difference;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 0.16s ease;
    z-index: 45;
}

.bb-studio [data-bb-studio-canvas] [data-bb-structural-block="hero"]::after {
    top: calc(var(--bb-v2-hero-top, 4rem) + 5px);
}

.bb-studio [data-bb-v2-block-shell] > :first-child:hover::before,
.bb-studio [data-bb-v2-block-shell] > .bb-studio-sel-block::before,
.bb-studio [data-bb-studio-canvas] [data-bb-structural-block]:not([data-bb-structural-block="hero"]):hover::before,
.bb-studio [data-bb-studio-canvas] .bb-studio-sel-structural:not([data-bb-structural-block="hero"])::before,
.bb-studio [data-bb-studio-canvas] [data-bb-structural-block="hero"]:hover::after,
.bb-studio [data-bb-studio-canvas] [data-bb-structural-block="hero"].bb-studio-sel-structural::after {
    opacity: 0.9;
}

.bb-studio [data-bb-v2-block-shell] > .bb-studio-child-selected::before,
.bb-studio [data-bb-v2-block-shell] > .bb-studio-child-selected:hover::before {
    opacity: 0.38;
}

.bb-studio [data-bb-editor-stage] .bb-editor-object {
    position: relative;
}

/* Structural regions use the same hover language as regular blocks. The
   transparent resting outline lets the dashed color fade in without layout
   movement; explicit header targets cover branding and the complete nav list. */
.bb-studio [data-bb-studio-canvas] [data-bb-structural-block] {
    outline: none !important;
}

.bb-studio [data-bb-studio-canvas] [data-bb-studio-structural-object],
.bb-studio [data-bb-studio-canvas] [data-bb-structural-block] .editable-continer,
.bb-studio [data-bb-studio-canvas] [data-bb-structural-block] .edit-border {
    position: relative;
    transition: background-color 0.16s ease;
}

.bb-studio [data-bb-studio-canvas] [data-bb-studio-structural-object]:hover,
.bb-studio [data-bb-studio-canvas] [data-bb-structural-block] .editable-continer:hover,
.bb-studio [data-bb-studio-canvas] [data-bb-structural-block] .edit-border:hover {
    background-color: rgba(42, 120, 214, 0.025);
}

/* Object outlines need to survive both pale cards and dark photography.
   Difference blending is isolated on the non-interactive outline layer so
   the edited content itself keeps its original colour and compositing. */
.bb-studio [data-bb-editor-stage] .bb-editor-object:not(.bb-feature-card)::after,
.bb-studio [data-bb-editor-stage] .bb-feature-card.bb-editor-object::before,
.bb-studio [data-bb-studio-canvas] [data-bb-studio-structural-object]::after,
.bb-studio [data-bb-studio-canvas] [data-bb-structural-block] .editable-continer::after,
.bb-studio [data-bb-studio-canvas] [data-bb-structural-block] .edit-border::after {
    border: 2px dashed #fff;
    border-radius: inherit;
    content: "";
    inset: -2px;
    mix-blend-mode: difference;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 0.16s ease;
    z-index: 3;
}

.bb-studio [data-bb-editor-stage] .bb-editor-object:not(.bb-feature-card):hover::after,
.bb-studio [data-bb-editor-stage] .bb-editor-object:not(.bb-feature-card).bb-studio-sel-object::after,
.bb-studio [data-bb-editor-stage] .bb-feature-card.bb-editor-object:hover::before,
.bb-studio [data-bb-editor-stage] .bb-feature-card.bb-editor-object.bb-studio-sel-object::before,
.bb-studio [data-bb-studio-canvas] [data-bb-studio-structural-object]:hover::after,
.bb-studio [data-bb-studio-canvas] [data-bb-structural-block] .editable-continer:hover::after,
.bb-studio [data-bb-studio-canvas] [data-bb-structural-block] .edit-border:hover::after {
    opacity: 1;
}

/* ---------------- selection ---------------- */
.bb-studio .bb-studio-sel-block {
    outline: none !important;
    position: relative;
}

.bb-studio [data-bb-structural-block].bb-studio-sel-structural {
    outline: none !important;
    position: relative;
}

.bb-studio .bb-editor-object.bb-studio-sel-object {
    outline: none !important;
    position: relative;
}

/* Content-box-edge media clips the whole object in the public design. While
   editing that object, the same clipping also cuts off its toolbar above the
   box. Release overflow only for the selected Studio object; ordinary and
   public rendering retain the authored crop. */
.bb-studio .bb-image-content--bleed-content_box_edge .bb-image-content__box.bb-studio-sel-object {
    overflow: visible;
}

/* ---------------- floating toolbars ---------------- */
.bb-studio-tools {
    align-items: center;
    background: #fff;
    border: 1px solid var(--bbs-border, #EAE4DC);
    border-radius: 999px;
    box-shadow: 0 8px 28px rgba(43, 38, 34, 0.18);
    display: flex;
    font-family: var(--bbs-font, 'Inter', system-ui, sans-serif);
    gap: 2px;
    padding: 3px 5px;
    position: absolute;
    right: 14px;
    bottom: 100%;
    top: auto;
    z-index: 60;
}

.bb-studio-tools--object {
    border-color: #CFE0F2;
    right: 8px;
    bottom: 100%;
    top: auto;
}

/* Supporting details are one-line rows. Float the toolbar above the selected
   row without changing its height or covering the text being edited. */
.bb-studio .bb-image-content__detail.bb-studio-sel-object > .bb-studio-tools--object {
    right: 4px;
    bottom: 100%;
    top: auto;
}

.bb-studio-tools--structural {
    max-width: calc(100% - 28px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    bottom: 100%;
    top: auto;
}

.bb-studio-tools--structural::-webkit-scrollbar {
    display: none;
}

.bb-studio-tools--structural .bb-studio-tools__name {
    color: var(--bbs-primary, #DB3A57);
    flex: none;
}

/* These two regions share an edge with another editor target. Keep their
   controls inside their own selectable area instead of covering that target. */
.bb-studio [data-bb-structural-block="hero"] > .bb-studio-tools--structural {
    top: calc(var(--bb-v2-hero-top, 4rem) + 5px);
    bottom: auto;
}
.bb-studio [data-bb-structural-block="footer"] > .bb-studio-tools--structural {
    top: 18px;
    bottom: auto;
}

.bb-studio-tools__name {
    border-right: 1px solid var(--bbs-border, #EAE4DC);
    color: var(--bbs-text-2, #6E6660);
    font-size: 11.5px;
    font-weight: 700;
    margin-right: 3px;
    padding: 0 8px 0 5px;
    white-space: nowrap;
}

.bb-studio-tools--object .bb-studio-tools__name {
    color: var(--bbs-nested, #2A78D6);
}

.bb-studio-tools button {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--bbs-text-2, #6E6660);
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    gap: 5px;
    height: 28px;
    justify-content: center;
    min-width: 28px;
    padding: 0 6px;
    white-space: nowrap;
}

.bb-studio-tools button:hover {
    background: #F6F6F6;
    color: var(--bbs-text, #2B2622);
}

.bb-studio-tools button.bb-studio-tools__danger:hover {
    background: #FFE9EE;
    color: #C22F4A;
}

.bb-studio-tools button.bb-studio-tools__drag {
    cursor: grab;
}

.bb-studio-tools svg {
    height: 15px;
    width: 15px;
}

body.bb-studio-dragging,
body.bb-studio-dragging * {
    cursor: grabbing !important;
    user-select: none;
}

.bb-studio [data-bb-v2-block-shell].bb-studio-drag-ghost {
    opacity: 0.35;
}

/* ---------------- between-block add gaps ---------------- */
.bb-studio-gap {
    height: 0;
    position: relative;
    z-index: 50;
}

.bb-studio-gap__hit {
    align-items: center;
    display: flex;
    height: 28px;
    justify-content: center;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: -14px;
    transition: opacity 0.12s;
}

.bb-studio-gap:hover .bb-studio-gap__hit,
.bb-studio-gap.is-target .bb-studio-gap__hit {
    opacity: 1;
}

.bb-studio-gap__line {
    background: var(--bbs-primary, #DB3A57);
    border-radius: 2px;
    height: 2px;
    left: 22px;
    position: absolute;
    right: 22px;
    top: 50%;
}

.bb-studio-gap__plus {
    background: var(--bbs-primary, #DB3A57);
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(219, 58, 87, 0.4);
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    height: 28px;
    line-height: 1;
    position: relative;
    width: 28px;
    z-index: 2;
}

.bb-studio-gap__plus:hover {
    background: var(--bbs-primary-hover, #C22F4A);
}

/* ---------------- delete grace period + Undo toast ---------------- */
.bb-studio .bb-studio-deleting {
    display: none !important;
}

.bb-studio-toast-stack {
    bottom: 26px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    left: 50%;
    max-width: calc(100vw - 32px);
    position: fixed;
    transform: translateX(-50%);
    z-index: 2147483400;
}

.bb-studio-toast {
    align-items: center;
    background: var(--bbs-ink, #232025);
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(35, 32, 37, 0.35);
    color: #fff;
    display: flex;
    font-family: var(--bbs-font, 'Inter', system-ui, sans-serif);
    font-size: 13px;
    gap: 14px;
    overflow: hidden;
    padding: 12px 16px;
    position: relative;
    white-space: nowrap;
}

.bb-studio-toast--error {
    background: #8F273A;
}

.bb-studio-toast__undo,
.bb-studio-toast__commit {
    background: rgba(255, 255, 255, 0.12);
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 14px;
}

.bb-studio-toast__undo:hover,
.bb-studio-toast__commit:hover {
    background: rgba(255, 255, 255, 0.22);
}

.bb-studio-toast__bar {
    animation-name: bbStudioToastBar;
    animation-timing-function: linear;
    background: var(--bbs-primary, #DB3A57);
    bottom: 0;
    height: 3px;
    left: 0;
    position: absolute;
}

@keyframes bbStudioToastBar {
    from { width: 100%; }
    to { width: 0; }
}

/* ---------------- add-block picker modal ---------------- */
.bb-studio-picker {
    display: none;
    font-family: var(--bbs-font, 'Inter', system-ui, sans-serif);
    inset: 0;
    position: fixed;
    z-index: 2147483300;
}

.bb-studio-picker.is-open {
    display: block;
}

.bb-studio-picker__scrim {
    background: rgba(35, 32, 37, 0.45);
    inset: 0;
    position: absolute;
}

.bb-studio-picker__sheet {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
    left: 50%;
    max-height: 84vh;
    overflow: auto;
    padding: 24px 26px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(820px, 92vw);
}

.bb-studio-picker__sheet h2 {
    font-size: 19px;
    margin: 0 0 4px;
}

.bb-studio-picker__sub {
    color: var(--bbs-text-2, #6E6660);
    font-size: 13px;
    margin: 0 0 16px;
}

/* Studio-designed tiles (draft V2 look) built from the real preset registry */
.bb-studio-picker__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.bb-studio-picker__cat {
    background: #fff;
    border: 1px solid var(--bbs-border, #EAE4DC);
    border-radius: 999px;
    color: var(--bbs-text-2, #6E6660);
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 13px;
}

.bb-studio-picker__cat.is-active {
    background: var(--bbs-primary-soft, #FFF1F5);
    border-color: transparent;
    color: var(--bbs-primary, #DB3A57);
}

.bb-studio-picker__tiles {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, 1fr);
}

.bb-studio-tile {
    background: #fff;
    border: 1px solid var(--bbs-border, #EAE4DC);
    border-radius: 14px;
    cursor: pointer;
    font-family: inherit;
    padding: 12px;
    text-align: left;
    transition: border-color 0.12s, box-shadow 0.12s;
}

.bb-studio-tile:hover {
    border-color: var(--bbs-primary, #DB3A57);
    box-shadow: 0 2px 10px rgba(43, 38, 34, 0.08);
}

.bb-studio-tile__prev {
    background: #FAF7F2;
    border: 1px solid var(--bbs-border, #EAE4DC);
    border-radius: 9px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 96px;
    margin-bottom: 10px;
    overflow: hidden;
    padding: 12px;
}

.bb-studio-tile__name {
    font-size: 13.5px;
    font-weight: 700;
    margin: 0 0 3px;
}

.bb-studio-tile__desc {
    color: var(--bbs-text-2, #6E6660);
    font-size: 11.5px;
    line-height: 1.4;
    margin: 0;
}

/* skeleton preview bits (shared by the tile art) */
.bb-studio-picker .sk { background: #D9D2C8; border-radius: 3px; }
.bb-studio-picker .sk--title { height: 8px; margin: 0 auto; width: 60%; background: #B7AEA3; }
.bb-studio-picker .sk--line { height: 5px; margin: 0 auto; width: 80%; }
.bb-studio-picker .sk-row { display: flex; flex: 1; gap: 6px; }
.bb-studio-picker .sk-col { display: flex; flex: 1; flex-direction: column; gap: 5px; }
.bb-studio-picker .sk-card { background: #fff; border: 1px solid #E5DED4; border-radius: 5px; display: flex; flex: 1; flex-direction: column; overflow: hidden; }
.bb-studio-picker .sk-card i { background: linear-gradient(135deg, #F3D9CE, #E4A9B8); display: block; height: 45%; }
.bb-studio-picker .sk-card b { background: #C9C0B4; border-radius: 3px; display: block; height: 5px; margin: 6px 6px 3px; }
.bb-studio-picker .sk-card s { background: #E5DED4; border-radius: 3px; display: block; height: 4px; margin: 0 10px 3px; text-decoration: none; }
.bb-studio-picker .sk-card u.star { background: #EDA100; border-radius: 3px; display: block; height: 4px; margin: 6px 8px 3px; }
.bb-studio-picker .sk-feat { align-items: center; display: flex; flex: 1; gap: 5px; }
.bb-studio-picker .sk-feat i { background: #EFC5C9; border-radius: 4px; flex: none; height: 12px; width: 12px; }
.bb-studio-picker .sk-feat .sk { flex: 1; height: 6px; margin: 0; width: auto; }
.bb-studio-picker .sk-img { background: linear-gradient(135deg, #F3D9CE, #E4A9B8); border-radius: 5px; flex: 1; }
.bb-studio-picker .sk-play { align-items: center; background: #232025; border-radius: 6px; display: flex; flex: 1; justify-content: center; }
.bb-studio-picker .sk-play::after { border-bottom: 7px solid transparent; border-left: 11px solid #fff; border-top: 7px solid transparent; content: ""; margin-left: 3px; }
.bb-studio-picker .sk-btn { background: var(--bbs-primary, #DB3A57); border-radius: 5px; height: 10px; margin: 2px auto 0; width: 36%; }
.bb-studio-picker .sk-field { background: #F6F1EA; border: 1px solid #E5DED4; border-radius: 4px; height: 10px; }

/* features grid: three real columns (icon over text), like the block it creates */
.bb-studio-picker .sk-fcol { align-items: center; display: flex; flex: 1; flex-direction: column; gap: 4px; justify-content: center; }
.bb-studio-picker .sk-fcol i { background: #EFC5C9; border-radius: 4px; height: 12px; width: 12px; }
.bb-studio-picker .sk-fcol .sk { height: 5px; margin: 0; width: 86%; }

/* paragraph list: timeline thread through the dots */
.bb-studio-picker .sk-tl { position: relative; }
.bb-studio-picker .sk-tl::before { background: #E5DED4; bottom: 8px; content: ""; left: 5px; position: absolute; top: 8px; width: 2px; }
.bb-studio-picker .sk-tl .sk-feat i { position: relative; }

/* faq accordion: stacked collapsed rows */
.bb-studio-picker .sk-acc { background: #EDE6DC; border-radius: 4px; display: block; flex: 1; min-height: 10px; position: relative; }
.bb-studio-picker .sk-acc::after { border-left: 2px solid #B7AEA3; border-bottom: 2px solid #B7AEA3; content: ""; height: 5px; position: absolute; right: 8px; top: 50%; transform: translateY(-70%) rotate(-45deg); width: 5px; }

/* conversion form: the form itself as a side card */
.bb-studio-picker .sk-form { background: #fff; border: 1px solid #E5DED4; border-radius: 6px; display: flex; flex: 1.1; flex-direction: column; gap: 4px; justify-content: center; padding: 8px; }
.bb-studio-picker .sk-form .sk-btn { margin: 1px 0 0; width: 58%; }