/* Help4 Builder Suite 1.3.316 | build e0bf22c8bac2c863f033078c97ae2049d42f0eab2d66bf4421fc207d92da6717 */
body.h4bs-builder-studio-body #wpadminbar,
body.h4bs-builder-studio-body #adminmenumain,
body.h4bs-builder-studio-body #screen-meta-links,
body.h4bs-builder-studio-body #screen-meta,
body.admin_page_h4bs-builder-studio #wpadminbar,
body.admin_page_h4bs-builder-studio #adminmenumain,
body.admin_page_h4bs-builder-studio #screen-meta-links,
body.admin_page_h4bs-builder-studio #screen-meta {
    display: none !important;
}

body.h4bs-builder-studio-body #wpcontent,
body.h4bs-builder-studio-body #wpfooter,
body.admin_page_h4bs-builder-studio #wpcontent,
body.admin_page_h4bs-builder-studio #wpfooter {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

body.h4bs-builder-studio-body #wpbody,
body.admin_page_h4bs-builder-studio #wpbody,
body.h4bs-builder-studio-body #wpbody-content,
body.admin_page_h4bs-builder-studio #wpbody-content,
body.h4bs-builder-studio-body #wpwrap,
body.admin_page_h4bs-builder-studio #wpwrap {
    margin-left: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    width: 100%;
    max-width: 100%;
}

body.h4bs-builder-studio-body #wpfooter,
body.admin_page_h4bs-builder-studio #wpfooter {
    display: none !important;
}

body.h4bs-builder-studio-body #wpbody-content,
body.admin_page_h4bs-builder-studio #wpbody-content {
    padding-bottom: 0;
}

body.h4bs-builder-studio-body .update-nag,
body.h4bs-builder-studio-body .notice,
body.admin_page_h4bs-builder-studio .update-nag,
body.admin_page_h4bs-builder-studio .notice {
    display: none !important;
}

body.h4bs-builder-studio-body #wpbody-content > *:not(.h4bs-builder-studio-wrap),
body.admin_page_h4bs-builder-studio #wpbody-content > *:not(.h4bs-builder-studio-wrap) {
    display: none !important;
}

body.h4bs-builder-studio-body .h4bs-builder-studio-wrap {
    min-height: 100vh;
    box-sizing: border-box;
}

body.h4bs-builder-studio-body,
body.admin_page_h4bs-builder-studio {
    overflow-x: hidden !important;
    font-size: 16px !important;
}

/* Keep rem-based frontend sizing math consistent inside wp-admin preview mode. */
html {
    font-size: 16px;
}

.h4bs-builder-studio-wrap {
    --h4bs-brand-blue: #0f6cbf;
    --h4bs-brand-blue-dark: #0b4f9a;
    --h4bs-brand-green: #7fc544;
    --h4bs-brand-green-dark: #5ea62c;
    --h4bs-brand-navy: #11263d;
    --h4bs-brand-surface: #f5f9fd;
    --h4bs-brand-card: #ffffff;
    --h4bs-brand-border: #cfdce9;
    --h4bs-brand-text: #16324d;
    --h4bs-brand-muted: #5c7288;
    margin: 0;
    width: 100%;
    max-width: 100%;
    padding: 8px 12px 12px;
    background:
        radial-gradient(circle at top right, rgba(127, 197, 68, 0.1), transparent 42%),
        radial-gradient(circle at top left, rgba(15, 108, 191, 0.12), transparent 45%),
        #eef4fa;
    color: var(--h4bs-brand-text);
}

.h4bs-builder-studio-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding: 8px 10px;
    border: 1px solid var(--h4bs-brand-border);
    border-radius: 12px;
    background:
        linear-gradient(100deg, rgba(17, 38, 61, 0.98), rgba(15, 108, 191, 0.95) 70%, rgba(127, 197, 68, 0.9));
    box-shadow: 0 12px 26px rgba(11, 36, 62, 0.2);
}

.h4bs-builder-studio-header h1 {
    margin: 0 0 4px;
    font-size: 17px;
    line-height: 1.2;
    color: #fff;
}

.h4bs-builder-studio-header p {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
}

.h4bs-builder-studio-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.h4bs-header-icon-btn {
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border-color: rgba(255, 255, 255, 0.42) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

.h4bs-header-icon-btn .dashicons {
    width: 14px;
    height: 14px;
    font-size: 14px;
    line-height: 14px;
}

.h4bs-header-icon-btn.is-primary {
    background: linear-gradient(
        180deg,
        var(--h4bs-brand-green),
        var(--h4bs-brand-green-dark)
    ) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22) inset,
        0 8px 16px rgba(20, 48, 17, 0.32);
}

.h4bs-header-icon-btn.is-active {
    background: #0f6cbf !important;
    border-color: #0f6cbf !important;
    color: #fff !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22) inset,
        0 8px 16px rgba(8, 49, 87, 0.3);
}

.h4bs-header-icon-btn:disabled {
    opacity: 0.46;
    filter: saturate(0.75);
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.h4bs-builder-studio {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 14px;
    min-height: calc(100vh - 96px);
}

.h4bs-builder-studio.is-side-collapsed {
    grid-template-columns: minmax(0, 1fr) 72px;
}

.h4bs-studio-main,
.h4bs-studio-side {
    background: var(--h4bs-brand-card);
    border: 1px solid var(--h4bs-brand-border);
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(16, 42, 67, 0.1);
}

.h4bs-studio-side {
    padding: 14px;
    overflow: hidden;
}

.h4bs-studio-side h2,
.h4bs-studio-main h3 {
    margin: 0 0 10px;
    color: #17324d;
}

.h4bs-studio-main {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.h4bs-studio-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #dee7ef;
    background: linear-gradient(180deg, #fbfdff, #f2f8fd);
}

.h4bs-studio-status {
    margin: 0;
    color: var(--h4bs-brand-text);
}

.h4bs-studio-separator {
    margin: 0 8px;
    color: #8897a6;
}

.h4bs-performance-coach {
    flex: 1 1 100%;
    border: 1px solid #d8e5f2;
    border-radius: 10px;
    background: #f9fcff;
    padding: 8px 10px;
}

.h4bs-performance-coach-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    color: #1f3d58;
}

.h4bs-performance-coach-head span {
    color: #355573;
    font-size: 12px;
}

.h4bs-performance-coach-tips {
    margin: 0;
    padding: 0 0 0 18px;
    color: #32506b;
    display: grid;
    gap: 4px;
    font-size: 12px;
}

.h4bs-performance-coach.is-performance-good {
    border-color: #b8dfbf;
    background: #f5fff6;
}

.h4bs-performance-coach.is-performance-caution {
    border-color: #efd8a8;
    background: #fffaf0;
}

.h4bs-performance-coach.is-performance-warning {
    border-color: #eab4b4;
    background: #fff5f5;
}

.h4bs-studio-device-switch .button.is-active,
.h4bs-inspector-tabs .button.is-active {
    background: var(--h4bs-brand-blue);
    border-color: var(--h4bs-brand-blue);
    color: #fff;
}

.h4bs-builder-studio-wrap .button {
    border-color: #c5d6e6;
    color: #21415f;
    background: #f8fbff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

.h4bs-builder-studio-wrap .button:hover {
    border-color: #a8c0d8;
    background: #edf5fd;
}

.h4bs-builder-studio-wrap .button.button-primary {
    color: #fff;
    border-color: var(--h4bs-brand-blue-dark);
    background: linear-gradient(
        180deg,
        var(--h4bs-brand-blue),
        var(--h4bs-brand-blue-dark)
    );
}

.h4bs-studio-device-switch {
    display: grid;
    gap: 8px;
    min-width: 340px;
}

.h4bs-viewport-icons {
    display: flex;
    gap: 8px;
}

.h4bs-viewport-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #c9d7e2;
    background: #f4f8fb;
    color: #1f3650;
    border-radius: 8px;
    padding: 4px 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
}

.h4bs-viewport-icon-btn .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.h4bs-viewport-icon-btn.is-active {
    background: #0f6cbf;
    border-color: #0f6cbf;
    color: #fff;
}

.h4bs-viewport-select-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.h4bs-viewport-select-row select {
    min-width: 260px;
}

.h4bs-viewport-live {
    color: #4a5f77;
    font-weight: 600;
}

.h4bs-viewport-frame-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.h4bs-viewport-frame-label {
    color: #2b3f54;
}

.h4bs-frame-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
}

.h4bs-frame-toggle .dashicons {
    width: 14px;
    height: 14px;
    font-size: 14px;
    line-height: 14px;
}

.h4bs-frame-toggle.is-active {
    background: #0f6cbf !important;
    border-color: #0f6cbf !important;
    color: #fff !important;
}

.h4bs-studio-preview {
    border: 0;
    border-radius: 0;
    padding: 12px;
    overflow: hidden;
    background: transparent;
    height: 100%;
    min-height: calc(100vh - 220px);
    display: flex;
    flex-direction: column;
}

.h4bs-side-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.h4bs-side-panel-head h2 {
    margin: 0;
}

.h4bs-side-panel-body {
    overflow: auto;
    max-height: calc(100vh - 260px);
    padding-right: 2px;
}

.h4bs-studio-side.is-collapsed {
    width: 60px;
    padding: 10px;
}

.h4bs-studio-side.is-collapsed .h4bs-side-panel-body,
.h4bs-studio-side.is-collapsed .h4bs-side-panel-head h2,
.h4bs-studio-side.is-collapsed .h4bs-side-toggle-label {
    display: none;
}

.h4bs-studio-side.is-collapsed .h4bs-side-panel-head {
    justify-content: center;
}

.h4bs-preview-stage {
    border: 1px solid #d8e2ea;
    border-radius: 10px;
    padding: 12px;
    overflow-x: clip;
    overflow-x: hidden;
    overflow-y: auto;
    background: #f9fbfd;
    min-height: 620px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex: 1 1 auto;
}

.h4bs-preview-scale {
    margin: 0 auto;
    max-width: 100%;
    flex: 0 0 auto;
    position: relative;
    overflow: visible;
}

.h4bs-block-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.h4bs-nav-tree,
.h4bs-nav-children,
.h4bs-nav-children-slot {
    margin: 0;
    padding: 0;
    list-style: none;
}

.h4bs-block-item {
    border: 1px solid #d1dde8;
    border-radius: 9px;
    background: #fff;
    margin-bottom: 8px;
    overflow: hidden;
}

.h4bs-block-item.is-selected {
    border-color: #0f6cbf;
    box-shadow: 0 0 0 1px #0f6cbf inset;
}

.h4bs-block-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px;
}

.h4bs-nav-item-head {
    padding-left: calc(10px + (var(--h4bs-nav-depth, 0) * 10px));
    min-height: 38px;
}

.h4bs-nav-toggle {
    border: 0;
    background: transparent;
    color: #6a8097;
    width: 20px;
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    border-radius: 5px;
    padding: 0;
}

.h4bs-nav-toggle .dashicons {
    width: 15px;
    height: 15px;
    font-size: 15px;
}

.h4bs-nav-toggle:disabled {
    opacity: 0.45;
    cursor: default;
}

.h4bs-nav-type-icon {
    width: 16px;
    height: 16px;
    font-size: 16px;
    color: #375674;
}

.h4bs-block-item-label {
    font-weight: 600;
    color: #20364f;
    text-align: left;
    text-decoration: none;
}

.h4bs-nav-item-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h4bs-block-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.h4bs-nav-item-actions {
    gap: 4px;
}

.h4bs-nav-icon-btn {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border: 1px solid #cfdae6;
    border-radius: 6px;
    background: #f3f8fc;
    color: #2f4d69;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.h4bs-nav-icon-btn .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.h4bs-nav-icon-btn:hover {
    background: #e8f1fb;
}

.h4bs-nav-icon-btn.is-danger {
    color: #8a2a2a;
    border-color: #e5c7c7;
    background: #fff5f5;
}

.h4bs-nav-children {
    background: #f7fbff;
    border-top: 1px solid #dce6ef;
    padding: 6px 6px 8px;
}

.h4bs-nav-slot {
    margin-bottom: 6px;
}

.h4bs-nav-slot:last-child {
    margin-bottom: 0;
}

.h4bs-nav-slot-label {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #5a6f84;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 4px 8px;
    padding-left: calc(8px + (var(--h4bs-nav-depth, 0) * 10px));
}

.h4bs-nav-slot-label .dashicons {
    font-size: 13px;
    width: 13px;
    height: 13px;
}

.h4bs-nav-children-slot {
    padding: 0;
}

.h4bs-nav-empty {
    color: #8fa1b3;
    font-size: 11px;
    font-style: italic;
    padding: 2px 8px 4px;
    padding-left: calc(8px + (var(--h4bs-nav-depth, 0) * 10px));
}

.h4bs-drag-handle {
    cursor: move;
    color: #7c8e9f;
    font-size: 15px;
    line-height: 1;
}

.h4bs-block-btn {
    border: 1px solid #c9d7e2;
    background: #f3f7fb;
    border-radius: 6px;
    padding: 2px 8px;
    cursor: pointer;
    font-size: 12px;
}

.h4bs-block-btn:hover {
    background: #e7f1fb;
}

.h4bs-studio-element-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.h4bs-builder-studio.is-dragging-library .h4bs-preview-canvas {
    border-color: var(--h4bs-brand-blue);
    box-shadow: 0 0 0 2px rgba(15, 108, 191, 0.2) inset,
        0 0 0 1px rgba(127, 197, 68, 0.2);
}

.h4bs-builder-studio.is-dragging-boxmodel {
    user-select: none;
}

.h4bs-preview-canvas.is-drop-target-active {
    border-color: var(--h4bs-brand-blue);
    box-shadow: 0 0 0 2px rgba(15, 108, 191, 0.2) inset;
}

.h4bs-library-tile {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 10px;
    align-items: center;
    border: 1px solid #c9d9e8;
    border-radius: 10px;
    background: linear-gradient(180deg, #fbfdff, #f3f9ff);
    padding: 8px;
    min-height: 62px;
    transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease,
        transform 0.12s ease;
}

.h4bs-library-tile.is-draggable {
    cursor: grab;
}

.h4bs-library-tile.is-draggable:active {
    cursor: grabbing;
}

.h4bs-library-tile.is-draggable:hover {
    border-color: #8bb7dc;
    background: linear-gradient(180deg, #f5faff, #e9f4ff);
    box-shadow: 0 1px 0 rgba(12, 51, 84, 0.06) inset,
        0 8px 16px rgba(15, 108, 191, 0.11);
    transform: translateY(-1px);
}

.h4bs-library-tile.is-disabled {
    opacity: 0.62;
    cursor: not-allowed;
}

.h4bs-library-tile.is-disabled:hover {
    border-color: #cfdceb;
    background: #f8fbff;
    box-shadow: none;
}

.h4bs-library-thumb {
    position: relative;
    border-radius: 8px;
    border: 1px solid #b9cee1;
    background: linear-gradient(140deg, #edf6ff 0%, #d9ebfb 100%);
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.h4bs-library-thumb.is-element {
    background: linear-gradient(140deg, #ecf6ff 0%, #d9ebff 100%);
}

.h4bs-library-thumb.is-general {
    background: linear-gradient(140deg, #f2f8ff 0%, #e1edfa 100%);
}

.h4bs-library-thumb.is-contractor {
    background: linear-gradient(140deg, #fff6eb 0%, #ffe3c7 100%);
}

.h4bs-library-thumb.is-commerce {
    background: linear-gradient(140deg, #eafcf5 0%, #caf5df 100%);
}

.h4bs-library-thumb.is-realtor {
    background: linear-gradient(140deg, #eef2ff 0%, #d8e3ff 100%);
}

.h4bs-library-thumb.is-ready {
    background: linear-gradient(140deg, #e8fbf2 0%, #cff4e2 100%);
}

.h4bs-library-thumb .dashicons {
    position: relative;
    z-index: 2;
    width: 22px;
    height: 22px;
    font-size: 22px;
    color: #1f3f61;
}

.h4bs-library-thumb-lines {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    display: grid;
    gap: 3px;
}

.h4bs-library-thumb-lines i {
    display: block;
    height: 4px;
    border-radius: 999px;
    background: rgba(31, 63, 97, 0.22);
}

.h4bs-library-thumb-lines i:last-child {
    width: 70%;
}

.h4bs-library-pill {
    position: absolute;
    top: 4px;
    right: 4px;
    border-radius: 999px;
    padding: 1px 6px;
    background: rgba(10, 27, 45, 0.74);
    color: #fff;
    font-size: 9px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.h4bs-library-body {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.h4bs-library-body strong {
    color: #16324d;
    font-size: 13px;
    line-height: 1.25;
}

.h4bs-library-body span {
    color: #4e6880;
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.h4bs-library-meta {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #7389a0;
    font-size: 10px;
}

.h4bs-library-meta.is-recommended {
    justify-self: start;
    width: fit-content;
    padding: 3px 6px;
    border: 1px solid #8bc9aa;
    border-radius: 4px;
    background: #eaf8f1;
    color: #145c3c;
    font-weight: 700;
    white-space: normal;
    overflow: visible;
}

.h4bs-library-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.h4bs-library-actions .button {
    flex: 1 1 92px;
    justify-content: center;
}

.h4bs-studio-templates {
    display: grid;
    gap: 10px;
}

.h4bs-studio-themes {
    display: grid;
    gap: 10px;
}

.h4bs-studio-site-kits {
    display: grid;
    gap: 10px;
}

.h4bs-site-kit-card {
    align-items: start;
}

.h4bs-site-kit-card .h4bs-library-body > span {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.h4bs-site-kit-style-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid #b9cee1;
    border-radius: 6px;
    background: #edf6ff;
    color: #16324d;
    font-size: 12px;
    line-height: 1.35;
}

.h4bs-site-kit-style-option input {
    flex: 0 0 auto;
    margin: 1px 0 0;
}

.h4bs-site-kit-safety-note {
    margin: 0;
    color: #536d85;
    font-size: 11px;
    line-height: 1.45;
}

.h4bs-site-kit-status:empty {
    display: none;
}

.h4bs-site-kit-status {
    display: grid;
    gap: 5px;
    padding: 9px 10px;
    border-left: 3px solid #16855b;
    background: #edf8f3;
    color: #164c38;
    font-size: 11px;
    line-height: 1.4;
}

.h4bs-site-kit-status.is-error {
    border-left-color: #c0362c;
    background: #fff1f0;
    color: #7c241d;
}

.h4bs-site-kit-status p {
    margin: 0;
}

.h4bs-site-kit-status a {
    width: fit-content;
}

.h4bs-site-kit-plan {
    margin-top: 5px;
    color: #334f69;
    font-size: 11px;
}

.h4bs-site-kit-plan summary {
    cursor: pointer;
    font-weight: 700;
}

.h4bs-site-kit-plan ul {
    display: grid;
    gap: 3px;
    margin: 6px 0 2px 18px;
}

.h4bs-template-filter-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(128px, 36%);
    gap: 8px;
    margin-bottom: 10px;
}

.h4bs-element-search,
.h4bs-template-search,
.h4bs-site-kit-search,
.h4bs-theme-search,
.h4bs-widget-library input[type="search"] {
    width: 100%;
    margin-bottom: 10px;
    border-color: #c8d8e8;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(11, 36, 62, 0.06) inset;
}

.h4bs-template-filter-row .h4bs-template-search {
    margin-bottom: 0;
}

.h4bs-template-category {
    width: 100%;
    border-color: #c8d8e8;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(11, 36, 62, 0.06) inset;
    min-height: 32px;
}

.h4bs-widget-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 0 10px;
}

.h4bs-widget-filter-btn.is-active {
    background: #0f6cbf !important;
    border-color: #0f6cbf !important;
    color: #fff !important;
}

.h4bs-widget-group {
    border: 1px solid #d1dfec;
    border-radius: 10px;
    padding: 10px;
    background: linear-gradient(180deg, #fcfeff, #f4f9ff);
    box-shadow: 0 8px 14px rgba(16, 40, 66, 0.06);
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.h4bs-widget-group h4 {
    margin: 0 0 6px;
    font-size: 13px;
    color: #24425d;
    grid-column: 1 / -1;
}

.h4bs-widget-item {
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-areas:
        "thumb body"
        "controls controls";
    align-items: start;
    margin-top: 0;
    min-height: 96px;
}

.h4bs-widget-item:first-of-type {
    margin-top: 0;
}

.h4bs-widget-item .h4bs-library-thumb {
    grid-area: thumb;
}

.h4bs-widget-item .h4bs-library-body {
    grid-area: body;
}

.h4bs-widget-item-controls {
    grid-area: controls;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 4px;
}

.h4bs-widget-favorite,
.h4bs-widget-insert {
    min-width: 28px;
    min-height: 28px;
    padding: 0 8px !important;
}

.h4bs-widget-favorite .dashicons {
    width: 14px;
    height: 14px;
    font-size: 14px;
    line-height: 14px;
}

.h4bs-widget-favorite.is-active {
    background: #0f6cbf !important;
    border-color: #0f6cbf !important;
    color: #fff !important;
}

.h4bs-widget-item .h4bs-library-body strong,
.h4bs-widget-item .h4bs-library-body span {
    display: block;
    opacity: 1 !important;
    visibility: visible !important;
}

.h4bs-widget-item .h4bs-library-body strong {
    color: #16324d;
    white-space: normal;
}

.h4bs-widget-item .h4bs-library-body span {
    color: #48647d;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.h4bs-template-card {
    margin: 0;
}

.h4bs-theme-pack-card {
    margin: 0;
    align-items: start;
    grid-template-columns: 72px 1fr;
    gap: 10px;
}

.h4bs-theme-pack-card.is-active {
    border-color: #0f6cbf;
    box-shadow: 0 0 0 2px rgba(15, 108, 191, 0.18);
}

.h4bs-theme-pack-thumb {
    border-radius: 8px;
    border: 1px solid #b9cee1;
    overflow: hidden;
    min-height: 48px;
    background: linear-gradient(140deg, #edf6ff 0%, #d9ebfb 100%);
}

.h4bs-theme-pack-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 48px;
    object-fit: cover;
}

.h4bs-theme-pack-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.h4bs-theme-pack-actions .button {
    flex: 1 1 120px;
    justify-content: center;
}

.h4bs-theme-pack-active-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(15, 108, 191, 0.12);
    color: #0f6cbf;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.h4bs-drag-helper {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border: 1px solid #99bfdf;
    border-radius: 10px;
    background: #f3f9ff;
    color: #1f3c59;
    padding: 9px 12px;
    font-weight: 600;
    box-shadow: 0 10px 24px rgba(10, 27, 45, 0.16);
    max-width: 320px;
}

.h4bs-preview-shell {
    width: 1920px;
    transition: width 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, padding 0.2s ease;
    box-sizing: border-box;
    --h4-content-max: min(94%, 118rem);
    --h4-base-font: 16px;
    position: relative;
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(165deg, #172534, #0f1925);
    box-shadow: 0 20px 44px rgba(6, 18, 28, 0.34);
}

.h4bs-preview-canvas {
    border: 1px solid #cfdae5;
    border-radius: 12px;
    background:
        radial-gradient(circle at 6% 0%, rgb(10 155 122 / 10%), transparent 38%),
        radial-gradient(circle at 100% 40%, rgb(255 122 51 / 12%), transparent 34%),
        var(--h4-bg, #f4f8f7);
    color: var(--h4-text, #1c2b2a);
    font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
    line-height: 1.62;
    min-height: 420px;
    padding: 0;
    overflow: hidden;
}

.h4bs-preview-shell.is-device-monitor {
    padding: 20px;
    border-radius: 16px;
    background: linear-gradient(170deg, #162536, #0f1823);
}

.h4bs-preview-shell.is-device-tablet {
    padding: 18px 16px;
    border-radius: 24px;
    background: linear-gradient(175deg, #283647, #1b2735);
}

.h4bs-preview-shell.is-device-mobile {
    padding: 16px 12px;
    border-radius: 34px;
    background: linear-gradient(180deg, #1f2a38, #111925);
    max-width: 540px;
    margin: 0 auto;
}

.h4bs-preview-shell.is-device-mobile::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 86px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.32);
}

.h4bs-preview-shell.is-device-tv {
    padding: 20px;
    border-radius: 8px;
    background: linear-gradient(180deg, #111, #020202);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.42);
}

.h4bs-preview-shell.is-frame-clean {
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    max-width: none;
}

.h4bs-preview-stage.is-frame-clean {
    background: #f9fbfd;
}

/* Device-mode parity helpers so preview behavior follows selected viewport classes
   even when wp-admin itself stays at desktop width. */
.h4bs-preview-shell.is-device-mobile .h4-global-header__inner,
.h4bs-preview-shell.is-device-tablet .h4-global-header__inner {
    flex-direction: column;
    align-items: flex-start;
}

.h4bs-preview-shell .site-shell,
.h4bs-preview-shell .site-main,
.h4bs-preview-shell .h4-global-header__inner,
.h4bs-preview-shell .h4-global-footer__inner {
    width: var(--h4-content-max) !important;
    max-width: 100% !important;
}

.h4bs-preview-shell .site-shell,
.h4bs-preview-shell .h4-global-header__inner,
.h4bs-preview-shell .h4-global-footer__inner {
    padding: var(--h4bs-site-shell-pad-y, clamp(0.8rem, 1.2vw, 1.1rem))
        var(--h4bs-site-shell-pad-x, clamp(0.9rem, 2vw, 2rem)) !important;
}

.h4bs-preview-shell .site-main {
    padding: var(--h4bs-site-main-pad-y, clamp(1.4rem, 2vw, 2.8rem))
        var(--h4bs-site-main-pad-x, clamp(0.9rem, 2vw, 2rem)) !important;
}

.h4bs-preview-shell .h4bs-page-layout-full_width .site-main,
.h4bs-preview-shell .h4bs-page-layout-canvas .site-main,
.h4bs-preview-shell .h4bs-builder-page-layout-full_width .site-main,
.h4bs-preview-shell .h4bs-builder-page-layout-canvas .site-main {
    width: 100% !important;
    max-width: none !important;
    padding: var(--h4bs-site-main-pad-full-width, clamp(0.8rem, 1.4vw, 1.4rem)) !important;
}

.h4bs-preview-shell .h4bs-page-layout-canvas .site-main,
.h4bs-preview-shell .h4bs-builder-page-layout-canvas .site-main {
    min-height: 100vh !important;
    background: transparent !important;
}

.h4bs-preview-shell .content-panel {
    padding: var(--h4bs-content-panel-pad, clamp(1rem, 2vw, 2rem)) !important;
}

.h4bs-preview-block-html {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.h4bs-preview-shell.is-device-mobile .h4-global-header__nav,
.h4bs-preview-shell.is-device-tablet .h4-global-header__nav {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    justify-content: flex-start;
    gap: clamp(0.45rem, 0.9vw, 1rem);
    row-gap: clamp(0.45rem, 1.1vw, 0.9rem);
    width: 100%;
    overflow: visible !important;
}

.h4bs-preview-shell.is-device-mobile .h4-global-header__nav a,
.h4bs-preview-shell.is-device-tablet .h4-global-header__nav a {
    display: inline-flex !important;
    flex: 0 0 auto;
    white-space: nowrap;
}

.h4bs-preview-shell.is-device-mobile .h4-global-header,
.h4bs-preview-shell.is-device-mobile .h4-global-header__inner,
.h4bs-preview-shell.is-device-tablet .h4-global-header,
.h4bs-preview-shell.is-device-tablet .h4-global-header__inner {
    overflow: visible !important;
}

.h4bs-preview-shell.is-device-mobile .h4bs-builder-page h1,
.h4bs-preview-shell.is-device-mobile .h4bs-builder-page h2,
.h4bs-preview-shell.is-device-mobile .h4bs-builder-page h3,
.h4bs-preview-shell.is-device-mobile .h4bs-builder-page h4,
.h4bs-preview-shell.is-device-mobile .h4bs-builder-page h5,
.h4bs-preview-shell.is-device-mobile .h4bs-builder-page h6,
.h4bs-preview-shell.is-device-tablet .h4bs-builder-page h1,
.h4bs-preview-shell.is-device-tablet .h4bs-builder-page h2,
.h4bs-preview-shell.is-device-tablet .h4bs-builder-page h3,
.h4bs-preview-shell.is-device-tablet .h4bs-builder-page h4,
.h4bs-preview-shell.is-device-tablet .h4bs-builder-page h5,
.h4bs-preview-shell.is-device-tablet .h4bs-builder-page h6 {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.h4bs-preview-shell.is-device-tablet :where(
    .h4bs-builder-section-grid,
    .h4bs-builder-container.is-grid,
    .h4bs-builder-inner-section.is-grid
) {
    grid-template-columns: repeat(var(--h4bs-col-tablet, var(--h4bs-col, 2)), minmax(0, 1fr)) !important;
    gap: var(--h4bs-gap-tablet, var(--h4bs-gap, 18px)) !important;
    min-height: var(--h4bs-min-height-tablet, var(--h4bs-min-height, 140px)) !important;
    max-width: var(--h4bs-max-width-tablet, 100%);
}

.h4bs-preview-shell.is-device-mobile :where(
    .h4bs-builder-section-grid,
    .h4bs-builder-container.is-grid,
    .h4bs-builder-inner-section.is-grid
) {
    grid-template-columns: repeat(var(--h4bs-col-mobile, 1), minmax(0, 1fr)) !important;
    gap: var(--h4bs-gap-mobile, var(--h4bs-gap, 18px)) !important;
    min-height: var(--h4bs-min-height-mobile, var(--h4bs-min-height, 80px)) !important;
    max-width: var(--h4bs-max-width-mobile, 100%);
}

.h4bs-preview-shell.is-device-tablet :where(
    .h4bs-builder-section-grid.is-flex,
    .h4bs-builder-container.is-flex,
    .h4bs-builder-inner-section.is-flex
) {
    gap: var(--h4bs-gap-tablet, var(--h4bs-gap, 18px)) !important;
    flex-direction: var(--h4bs-flex-direction-tablet, var(--h4bs-flex-direction, row)) !important;
    justify-content: var(--h4bs-justify-content-tablet, var(--h4bs-justify-content, flex-start)) !important;
    align-items: var(--h4bs-align-items-tablet, var(--h4bs-align-items, stretch)) !important;
}

.h4bs-preview-shell.is-device-mobile :where(
    .h4bs-builder-section-grid.is-flex,
    .h4bs-builder-container.is-flex,
    .h4bs-builder-inner-section.is-flex
) {
    gap: var(--h4bs-gap-mobile, var(--h4bs-gap, 18px)) !important;
    flex-direction: var(--h4bs-flex-direction-mobile, var(--h4bs-flex-direction, column)) !important;
    justify-content: var(--h4bs-justify-content-mobile, var(--h4bs-justify-content, flex-start)) !important;
    align-items: var(--h4bs-align-items-mobile, var(--h4bs-align-items, stretch)) !important;
}

.h4bs-preview-canvas h1,
.h4bs-preview-canvas h2,
.h4bs-preview-canvas h3,
.h4bs-preview-canvas h4,
.h4bs-preview-canvas h5,
.h4bs-preview-canvas h6 {
    font-weight: 700;
}

.h4bs-preview-site-slot {
    margin: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    position: relative;
}

.h4bs-preview-site-slot::before {
    position: absolute;
    top: 8px;
    right: 10px;
    display: inline-block;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #1d476d;
    background: rgba(235, 244, 252, 0.9);
    border: 1px dashed #b8cfe4;
    border-radius: 999px;
    z-index: 4;
    pointer-events: none;
}

.h4bs-preview-site-slot-header::before {
    content: "Global Header";
}

.h4bs-preview-site-slot-footer::before {
    content: "Global Footer";
}

.h4bs-preview-site-slot > * {
    max-width: 100%;
}

.h4bs-preview-empty {
    border: 2px dashed #b3cae0;
    border-radius: 10px;
    background: #f5faff;
    color: #3a5874;
    padding: 26px 20px;
    text-align: center;
    font-weight: 600;
}

.h4bs-preview-block {
    cursor: grab;
    position: relative;
    transition: outline-color 0.12s ease, outline-offset 0.12s ease;
}

.h4bs-preview-block:active {
    cursor: grabbing;
}

.h4bs-preview-block:hover {
    outline: 1px dashed #9fc3e3;
    outline-offset: 2px;
}

.h4bs-builder-studio.is-parity-mode .h4bs-preview-stage {
    background: transparent;
}

.h4bs-builder-studio.is-parity-mode .h4bs-preview-shell {
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.h4bs-builder-studio.is-parity-mode .h4bs-preview-canvas {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.h4bs-preview-parity-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
    display: none;
    z-index: 5;
}

.h4bs-preview-draft-frame {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: inherit;
    background: #fff;
}

.h4bs-builder-studio[data-h4bs-draft-preview="ready"] .h4bs-preview-canvas {
    opacity: 0;
    pointer-events: none;
}

.h4bs-builder-studio.is-parity-mode .h4bs-preview-draft-frame {
    display: none;
}

.h4bs-builder-studio.is-parity-mode .h4bs-preview-parity-frame {
    display: block;
}

.h4bs-builder-studio.is-parity-mode .h4bs-preview-canvas {
    opacity: 0;
    pointer-events: none;
}

.h4bs-builder-studio.is-parity-mode .h4bs-preview-block,
.h4bs-builder-studio.is-parity-mode .h4bs-preview-block:hover,
.h4bs-builder-studio.is-parity-mode .h4bs-preview-block.is-selected {
    outline: 0 !important;
    box-shadow: none !important;
    cursor: default !important;
}


.h4bs-builder-studio.is-parity-mode .h4bs-preview-block-tools,
.h4bs-builder-studio.is-parity-mode .h4bs-preview-viewport-note,
.h4bs-builder-studio.is-parity-mode .h4bs-section-empty,
.h4bs-builder-studio.is-parity-mode .h4bs-boxmodel-overlay,
.h4bs-builder-studio.is-parity-mode .h4bs-preview-site-slot::before {
    display: none !important;
}

.h4bs-preview-block.is-selected {
    outline: 2px solid rgba(15, 108, 191, 0.75);
    outline-offset: 2px;
}

.h4bs-preview-block.is-hidden-viewport {
    opacity: 0.48;
}

.h4bs-preview-block-section {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.h4bs-preview-block-container,
.h4bs-preview-block-inner_section {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.h4bs-preview-canvas .ui-sortable-helper {
    cursor: grabbing;
    box-shadow: 0 14px 32px rgba(12, 34, 54, 0.2);
}

.h4bs-preview-block-tools {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.h4bs-preview-block:hover .h4bs-preview-block-tools {
    opacity: 1;
}

.h4bs-preview-drag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    border: 1px solid #c8d7e5;
    border-radius: 6px;
    background: #f4f9ff;
    color: #274462;
    font-weight: 700;
    letter-spacing: -1px;
    cursor: move;
    user-select: none;
}

.h4bs-preview-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    border: 1px solid #c8d7e5;
    border-radius: 6px;
    background: #f4f9ff;
    color: #274462;
    cursor: pointer;
    padding: 0;
}

.h4bs-preview-tool .dashicons {
    width: 14px;
    height: 14px;
    font-size: 14px;
    line-height: 14px;
}

.h4bs-preview-tool-delete {
    color: #8f2e2e;
    border-color: #d5a2a2;
    background: #fff7f7;
}

.h4bs-preview-tool:hover,
.h4bs-preview-tool:focus {
    border-color: #8fb6d8;
    background: #eaf3fd;
}

.h4bs-preview-tool-delete:hover,
.h4bs-preview-tool-delete:focus {
    border-color: #cf7f7f;
    background: #ffeaea;
}

.h4bs-boxmodel-overlay {
    position: absolute;
    z-index: 1005;
    pointer-events: none;
    border: 1px dashed rgba(237, 135, 32, 0.66);
    background: rgba(255, 166, 0, 0.08);
    border-radius: 8px;
}

.h4bs-boxmodel-overlay[hidden] {
    display: none !important;
}

.h4bs-boxmodel-overlay.is-dragging {
    cursor: move;
}

.h4bs-boxmodel-layer {
    position: absolute;
}

.h4bs-boxmodel-layer-margin {
    inset: 0;
}

.h4bs-boxmodel-layer-border {
    border: 1px dashed rgba(35, 132, 225, 0.8);
    border-radius: 6px;
    background: rgba(57, 169, 255, 0.08);
}

.h4bs-boxmodel-layer-content {
    border: 1px solid rgba(35, 132, 225, 0.45);
    border-radius: 4px;
    background: rgba(35, 132, 225, 0.12);
}

.h4bs-boxmodel-handle {
    pointer-events: auto;
    position: absolute;
    width: 14px;
    height: 14px;
    border: 1px solid #ffffff;
    border-radius: 999px;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
    cursor: pointer;
}

.h4bs-boxmodel-handle.is-margin {
    background: #ef8a27;
}

.h4bs-boxmodel-handle.is-padding {
    background: #2f8de8;
}

.h4bs-boxmodel-handle.is-top {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: ns-resize;
}

.h4bs-boxmodel-handle.is-right {
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
    cursor: ew-resize;
}

.h4bs-boxmodel-handle.is-bottom {
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    cursor: ns-resize;
}

.h4bs-boxmodel-handle.is-left {
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: ew-resize;
}

.h4bs-boxmodel-pill {
    pointer-events: none;
    position: absolute;
    left: 0;
    top: -28px;
    max-width: 460px;
    border-radius: 999px;
    background: rgba(12, 38, 62, 0.93);
    color: #f2f8ff;
    font-size: 11px;
    line-height: 1.2;
    padding: 5px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.h4bs-context-menu {
    position: fixed;
    min-width: 190px;
    background: #ffffff;
    border: 1px solid #c7d6e4;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(8, 26, 44, 0.2);
    padding: 6px;
    z-index: 100006;
}

.h4bs-context-menu[hidden] {
    display: none !important;
}

.h4bs-context-menu-item {
    width: 100%;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #1f3852;
    text-align: left;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.h4bs-context-menu-item:hover,
.h4bs-context-menu-item:focus {
    border: 0;
    background: #eef5fd;
    color: #0f6cbf;
    outline: 0;
}

.h4bs-context-menu-item.is-disabled,
.h4bs-context-menu-item:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.h4bs-preview-viewport-note {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border: 1px solid #c8d7e5;
    border-radius: 6px;
    background: #f9fbff;
    color: #58718a;
    font-size: 10px;
    font-weight: 600;
    padding: 0 7px;
}

.h4bs-preview-placeholder {
    border: 2px dashed #77a8d3;
    border-radius: 10px;
    min-height: 56px;
    margin-bottom: 14px;
    background: rgba(119, 168, 211, 0.12);
}

.h4bs-preview-canvas [data-h4bs-inline-edit].is-inline-editing {
    outline: 2px solid #0f6cbf;
    outline-offset: 3px;
    border-radius: 4px;
    cursor: text;
}

.h4bs-preview-heading {
    margin: 0;
}

.h4bs-preview-block-heading > .h4bs-preview-heading,
.h4bs-preview-block-cta > .h4bs-preview-cta > :is(h2, h3, h4, h5, h6) {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-style: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    line-height: inherit !important;
    text-align: inherit !important;
    text-transform: inherit !important;
}

.h4bs-preview-button {
    box-sizing: border-box;
    display: inline-block;
    background: #0f6cbf;
    border-radius: 8px;
    color: #fff;
    padding: 10px 16px;
    text-decoration: none;
}

.h4bs-preview-cta > .h4bs-preview-button {
    font-size: 1rem;
    line-height: 1.4;
}

.h4bs-preview-image {
    max-width: 100%;
    border-radius: 8px;
    display: block;
    transition: transform 0.16s ease;
}

.h4bs-preview-image-wrap {
    margin: 0;
}

.h4bs-preview-image-inner {
    position: relative;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    vertical-align: top;
}

.h4bs-preview-image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.h4bs-preview-image-inner > .h4bs-preview-image,
.h4bs-preview-image-link > .h4bs-preview-image {
    width: 100%;
}

.h4bs-preview-image-inner:hover .h4bs-preview-image {
    transform: scale(var(--h4bs-image-hover-scale, 1));
}

.h4bs-preview-image-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.h4bs-preview-image-caption {
    margin-top: 6px;
    font-size: 12px;
    color: #5f7388;
}

.h4bs-preview-shortcode,
.h4bs-preview-slider,
.h4bs-preview-html {
    border: 1px dashed #c2d3e3;
    border-radius: 8px;
    background: #f8fbff;
    padding: 11px;
    color: #3f5670;
}

.h4bs-preview-widget-card {
    border: 1px solid #cddceb;
    border-radius: 10px;
    background: #f6fbff;
    padding: 12px;
    color: #1f3650;
}

.h4bs-preview-widget-card h4 {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.3;
}

.h4bs-preview-widget-card p {
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 1.45;
}

.h4bs-preview-widget-card small {
    display: block;
    font-size: 11px;
    color: #4b6682;
}

.h4bs-preview-widget-reviews {
    background: linear-gradient(180deg, #f8fcff 0%, #f1f8ff 100%);
}

.h4bs-preview-widget-gmb {
    background: linear-gradient(180deg, #f8fffb 0%, #f0fbf5 100%);
}

.h4bs-preview-video,
.h4bs-preview-video-embed,
.h4bs-preview-map {
    border: 1px solid #cddceb;
    border-radius: 8px;
    background: #eef5fc;
}

.h4bs-preview-canvas .h4bs-video-player-shell {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: var(--h4bs-video-aspect, 16 / 9);
    max-height: var(--h4bs-video-max-height, none);
    overflow: hidden;
    border: 1px solid #cddceb;
    border-radius: 8px;
    background: #05070a;
}

.h4bs-preview-canvas .h4bs-video-player-shell .h4bs-preview-video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: inherit;
    object-fit: cover;
}

.h4bs-preview-canvas .has-h4bs-background-video {
    position: relative;
    isolation: isolate;
    overflow: var(--h4bs-background-video-overflow, hidden);
}

.h4bs-preview-canvas .h4bs-background-video-layer {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.h4bs-preview-canvas .h4bs-background-video,
.h4bs-preview-canvas .h4bs-background-video-fallback,
.h4bs-preview-canvas .h4bs-background-video-fallback img,
.h4bs-preview-canvas .h4bs-background-video-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
}

.h4bs-preview-canvas .h4bs-background-video,
.h4bs-preview-canvas .h4bs-background-video-fallback img {
    object-fit: var(--h4bs-background-video-fit, cover);
    object-position: var(--h4bs-background-video-position, center center);
}

.h4bs-preview-canvas .h4bs-background-video-fallback[hidden] {
    display: none;
}

.h4bs-preview-canvas .h4bs-background-video-overlay {
    z-index: 2;
    background-color: var(--h4bs-background-video-overlay-color, #000);
    background-image: var(--h4bs-background-video-overlay-gradient, none);
    opacity: var(--h4bs-background-video-overlay-opacity, 0);
}

.h4bs-preview-canvas .has-h4bs-background-video > :where(.h4bs-preview-section-grid, .h4bs-preview-container),
.h4bs-preview-canvas .has-h4bs-background-video > .h4bs-preview-block-tools {
    position: relative;
    z-index: 3;
}

.h4bs-preview-shell.is-device-tablet .h4bs-background-video,
.h4bs-preview-shell.is-device-tablet .h4bs-background-video-fallback img {
    object-position: var(--h4bs-background-video-position-tablet, var(--h4bs-background-video-position, center center));
}

.h4bs-preview-shell.is-device-mobile .h4bs-background-video,
.h4bs-preview-shell.is-device-mobile .h4bs-background-video-fallback img {
    object-position: var(--h4bs-background-video-position-mobile, var(--h4bs-background-video-position-tablet, var(--h4bs-background-video-position, center center)));
}

.h4bs-preview-icon-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.h4bs-preview-icon-label {
    color: #1f3650;
    font-weight: 600;
}

.h4bs-preview-list {
    margin: 0;
    padding-left: 18px;
}

.h4bs-preview-quote {
    margin: 0;
    padding: 10px 12px;
    border-left: 4px solid #0f6cbf;
    background: #f5faff;
    color: #24425f;
}

.h4bs-preview-quote p {
    margin: 0;
}

.h4bs-preview-quote cite {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: #5f7489;
}

.h4bs-preview-cta {
    border: 1px solid #cfdceb;
    background: #f5faff;
    border-radius: 10px;
    padding: 12px;
}

.h4bs-preview-cta :is(h2, h3, h4, h5, h6) {
    margin: 0 0 6px;
}

.h4bs-preview-cta p {
    margin: 0 0 10px;
}

.h4bs-preview-gallery {
    display: grid;
    gap: 8px;
}

.h4bs-preview-gallery figure {
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #d6e2ee;
    background: #f3f7fb;
}

.h4bs-preview-gallery img {
    display: block;
    width: 100%;
    height: auto;
}

.h4bs-preview-faq {
    display: grid;
    gap: 8px;
}

.h4bs-preview-faq details {
    border: 1px solid #d3e0ec;
    border-radius: 8px;
    background: #f9fbff;
    padding: 8px 10px;
}

.h4bs-preview-faq summary {
    cursor: pointer;
    font-weight: 600;
}

.h4bs-preview-faq p {
    margin: 8px 0 0;
}

.h4bs-preview-counter {
    display: inline-grid;
    gap: 4px;
}

.h4bs-preview-counter strong {
    font-size: 30px;
    line-height: 1.1;
    color: #123654;
}

.h4bs-preview-counter span {
    color: #4f657d;
}

.h4bs-preview-progress {
    display: grid;
    gap: 7px;
}

.h4bs-preview-progress-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: #2d4a66;
    font-weight: 600;
}

.h4bs-preview-progress-track {
    border: 1px solid #cfdae6;
    border-radius: 999px;
    background: #f1f6fb;
    height: 10px;
    overflow: hidden;
}

.h4bs-preview-progress-track i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #1686d1, #0f6cbf);
}

.h4bs-preview-menu {
    border: 1px dashed #c7d6e5;
    border-radius: 8px;
    background: #f8fbff;
    padding: 9px 11px;
    color: #35516c;
    font-weight: 600;
}

.h4bs-preview-menu.is-vertical {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    min-height: 140px;
    max-width: 80px;
}

.h4bs-preview-container {
    border: 1px dashed #9dc2e3;
    background: rgba(207, 227, 245, 0.25);
    border-radius: 8px;
    padding: 10px;
    display: grid;
    gap: var(--h4bs-gap, 16px);
    color: #31506c;
    font-size: 12px;
    text-align: left;
}

.h4bs-preview-container.is-grid {
    display: grid;
    grid-template-columns: repeat(var(--h4bs-col, 2), minmax(0, 1fr));
}

.h4bs-preview-container.is-flex {
    display: flex;
    flex-wrap: wrap;
}

.h4bs-preview-container.is-flex > .h4bs-preview-section-col {
    flex: 1 1 calc(100% / var(--h4bs-col, 2));
}

.h4bs-preview-container-note {
    grid-column: 1 / -1;
    font-size: 11px;
    color: #3b5b79;
    background: rgba(255, 255, 255, 0.7);
    border: 1px dashed #b8d3eb;
    border-radius: 8px;
    padding: 7px 9px;
}

.h4bs-preview-container.is-flex > .h4bs-preview-container-note {
    flex: 1 1 100%;
}

.h4bs-preview-inner-section {
    display: grid;
    grid-template-columns: repeat(var(--h4bs-col, 2), minmax(0, 1fr));
    gap: var(--h4bs-gap, 16px);
}

.h4bs-preview-inner-section.is-flex {
    display: flex;
    flex-wrap: wrap;
}

.h4bs-preview-inner-section.is-flex > .h4bs-preview-inner-col {
    flex: 1 1 calc(100% / var(--h4bs-col, 2));
}

.h4bs-preview-inner-col {
    border: 1px dashed #8fb6da;
    border-radius: 8px;
    background: rgba(210, 230, 248, 0.36);
    min-height: 72px;
    min-width: 0;
    padding: 8px;
}

.h4bs-inner-section-dropzone {
    background: rgba(255, 255, 255, 0.88);
}

.h4bs-preview-section-grid {
    display: grid;
    grid-template-columns: repeat(var(--h4bs-col, 2), minmax(0, 1fr));
    gap: var(--h4bs-gap, 18px);
}

.h4bs-preview-section-grid.is-flex {
    display: flex;
    flex-wrap: wrap;
}

.h4bs-preview-section-grid.is-flex > .h4bs-preview-section-col {
    flex: 1 1 calc(100% / var(--h4bs-col, 2));
}

.h4bs-preview-section-col {
    min-width: 0;
}

.h4bs-section-col-label {
    font-size: 11px;
    font-weight: 700;
    color: #2c4a66;
    margin-bottom: 6px;
}

.h4bs-section-dropzone {
    min-height: 72px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    position: relative;
}

.h4bs-section-dropzone.is-drop-target-active {
    outline: 2px dashed #0f6cbf;
    outline-offset: 2px;
    background: transparent;
}

.h4bs-section-dropzone > .h4bs-preview-block {
    margin-bottom: 0;
}

.h4bs-section-dropzone > .h4bs-preview-block:last-child {
    margin-bottom: 0;
}

.h4bs-section-empty {
    border: 1px dashed #bed4e7;
    border-radius: 8px;
    color: #58728c;
    background: #f5faff;
    font-size: 12px;
    text-align: center;
    padding: 12px 8px;
}

.h4bs-inspector-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 10px;
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
    padding: 8px 0 6px;
    flex-wrap: wrap;
}

.h4bs-inspector-panels {
    min-height: 120px;
}

.h4bs-inspector-panel {
    display: block;
}

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

.h4bs-style-group {
    border: 1px solid #d5e2ee;
    border-radius: 8px;
    background: #fbfdff;
    margin-bottom: 10px;
    overflow: hidden;
}

.h4bs-style-group-toggle {
    width: 100%;
    border: 0;
    background: linear-gradient(180deg, #f7fbff, #edf4fb);
    color: #1f3852;
    font-weight: 700;
    text-align: left;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.h4bs-style-group-toggle:focus {
    outline: 2px solid #0f6cbf;
    outline-offset: -2px;
}

.h4bs-style-group-title {
    font-size: 12px;
    letter-spacing: 0.01em;
}

.h4bs-style-group-caret {
    font-size: 11px;
    color: #4a6380;
}

.h4bs-style-group-body {
    padding: 10px 10px 4px;
}

.h4bs-content-group {
    border: 1px solid #d5e2ee;
    border-radius: 8px;
    background: #fbfdff;
    margin-bottom: 10px;
    overflow: hidden;
}

.h4bs-content-group-toggle {
    width: 100%;
    border: 0;
    background: linear-gradient(180deg, #f7fbff, #edf4fb);
    color: #1f3852;
    font-weight: 700;
    text-align: left;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.h4bs-content-group-toggle:focus {
    outline: 2px solid #0f6cbf;
    outline-offset: -2px;
}

.h4bs-content-group-title {
    font-size: 12px;
    letter-spacing: 0.01em;
}

.h4bs-content-group-caret {
    font-size: 11px;
    color: #4a6380;
}

.h4bs-content-group-body {
    padding: 10px 10px 4px;
}

.h4bs-content-search {
    margin: 0 0 10px;
}

.h4bs-content-search-input {
    width: 100%;
    border: 1px solid #c9d8e7;
    border-radius: 7px;
    min-height: 34px;
    padding: 6px 10px;
    font-size: 12px;
    background: #fff;
    color: #1c334b;
    box-sizing: border-box;
}

.h4bs-content-search-input:focus {
    border-color: #0f6cbf;
    box-shadow: 0 0 0 1px rgba(15, 108, 191, 0.2);
    outline: 0;
}

.h4bs-style-search {
    margin: 0 0 10px;
}

.h4bs-style-search-input {
    width: 100%;
    border: 1px solid #c9d8e7;
    border-radius: 7px;
    min-height: 34px;
    padding: 6px 10px;
    font-size: 12px;
    background: #fff;
    color: #1c334b;
    box-sizing: border-box;
}

.h4bs-style-search-input:focus {
    border-color: #0f6cbf;
    box-shadow: 0 0 0 1px rgba(15, 108, 191, 0.2);
    outline: 0;
}

.h4bs-editor-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(7, 20, 35, 0.35);
    z-index: 99998;
}

.h4bs-editor-modal {
    position: fixed;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: min(520px, calc(100vw - 40px));
    max-height: calc(100vh - 180px);
    background: #fff;
    border: 1px solid #c7d4df;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(11, 24, 39, 0.25);
    z-index: 100002;
    display: flex;
    flex-direction: column;
}

.h4bs-editor-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #dce5ee;
    cursor: move;
    user-select: none;
}

.h4bs-editor-modal-header .button-link {
    text-decoration: none;
    font-size: 22px;
    line-height: 1;
}

.h4bs-editor-modal-body {
    padding: 12px;
    overflow: auto;
}

.h4bs-editor-modal-footer {
    padding: 10px 12px;
    border-top: 1px solid #dce5ee;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.h4bs-modal-delete-button {
    margin-right: auto !important;
    border-color: #d59a9a !important;
    background: #fff7f7 !important;
    color: #8f2e2e !important;
}

.h4bs-navigator-modal {
    position: fixed;
    top: 96px;
    right: 24px;
    width: min(360px, calc(100vw - 24px));
    max-height: calc(100vh - 126px);
    background: #fff;
    border: 1px solid #c7d4df;
    border-radius: 10px;
    box-shadow: 0 14px 36px rgba(11, 24, 39, 0.24);
    z-index: 100001;
    display: flex;
    flex-direction: column;
}

.h4bs-mini-preview-modal {
    position: fixed;
    top: 96px;
    right: 392px;
    width: min(320px, calc(100vw - 24px));
    max-height: calc(100vh - 126px);
    background: #fff;
    border: 1px solid #c7d4df;
    border-radius: 10px;
    box-shadow: 0 14px 36px rgba(11, 24, 39, 0.24);
    z-index: 100000;
    display: flex;
    flex-direction: column;
}

.h4bs-editor-modal-backdrop[hidden],
.h4bs-editor-modal[hidden],
.h4bs-navigator-modal[hidden],
.h4bs-navigator-modal[aria-hidden="true"],
.h4bs-navigator-modal:not(.is-open),
.h4bs-mini-preview-modal[hidden] {
    display: none !important;
}

.h4bs-navigator-modal.is-open {
    display: flex;
}

.h4bs-navigator-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid #dce5ee;
    cursor: move;
    user-select: none;
    background: #f6f9fc;
}

.h4bs-navigator-modal-header .button-link {
    text-decoration: none;
    font-size: 19px;
    line-height: 1;
}

.h4bs-mini-preview-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid #dce5ee;
    cursor: move;
    user-select: none;
    background: #f6f9fc;
}

.h4bs-mini-preview-modal-header .button-link {
    text-decoration: none;
    font-size: 19px;
    line-height: 1;
}

.h4bs-navigator-modal-body {
    padding: 8px;
    overflow: auto;
}

.h4bs-mini-preview-modal-body {
    padding: 8px;
    display: grid;
    gap: 8px;
    overflow: auto;
}

.h4bs-navigator-modal-body p {
    margin: 0 0 8px;
    color: #5f7389;
    font-size: 12px;
}

.h4bs-mini-preview-modal-body p {
    margin: 0;
    color: #5f7389;
    font-size: 12px;
}

.h4bs-mini-preview-frame {
    position: relative;
    min-height: 200px;
    border: 1px solid #d2deea;
    border-radius: 8px;
    background: linear-gradient(180deg, #f7fbff, #eef4fa);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    cursor: ns-resize;
    padding: 3px;
}

.h4bs-mini-preview-scale {
    position: relative;
    max-width: 100%;
}

.h4bs-mini-preview-shell {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 6px;
    pointer-events: none;
}

.h4bs-mini-shell {
    pointer-events: none;
}

.h4bs-mini-canvas {
    pointer-events: none;
}

.h4bs-mini-canvas .h4bs-preview-block {
    outline: 0 !important;
    box-shadow: none !important;
}

.h4bs-mini-preview-window {
    position: absolute;
    left: 4px;
    right: 4px;
    top: 4px;
    min-height: 16px;
    border: 1px solid rgba(15, 108, 191, 0.9);
    border-radius: 4px;
    background: rgba(15, 108, 191, 0.08);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.42) inset;
    pointer-events: none;
}

.h4bs-mini-preview-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    color: #4f6479;
    font-size: 11px;
}

.h4bs-modal-workflow-note {
    margin: 12px 0 0;
    padding: 9px 10px;
    border: 1px solid #d4e2ef;
    border-radius: 8px;
    background: #f6fbff;
    color: #36516b;
    font-size: 12px;
}

.h4bs-builder-brandbar {
    margin-top: 10px;
    padding: 8px 4px 0;
    border-top: 1px solid #d7e2ec;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #4d6076;
    font-size: 12px;
}

.h4bs-builder-brandbar a {
    color: #0f6cbf;
    text-decoration: none;
}

.h4bs-field {
    margin-bottom: 12px;
}

.h4bs-field label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #24384f;
}

.h4bs-field-group-heading {
    margin: 14px 0 8px;
    padding-top: 8px;
    border-top: 1px solid #dbe6f1;
    font-size: 13px;
    line-height: 1.3;
    color: #17324d;
}

.h4bs-field input[type="text"],
.h4bs-field input[type="number"],
.h4bs-field input[type="color"],
.h4bs-field select,
.h4bs-field textarea {
    width: 100%;
}

.h4bs-media-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
}

.h4bs-media-preview {
    margin-top: 8px;
    border: 1px solid #d5e2ee;
    border-radius: 8px;
    background: #f8fbff;
    padding: 8px;
}

.h4bs-media-preview-image {
    display: block;
    width: min(260px, 100%);
    max-height: 170px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #cad9ea;
}

.h4bs-media-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 6px;
}

.h4bs-media-strip img {
    width: 100%;
    height: 52px;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid #cad9ea;
}

.h4bs-spec-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.h4bs-spec-actions .h4bs-inspector-empty {
    flex-basis: 100%;
    margin: 0;
}

.h4bs-size-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px;
    gap: 8px;
    align-items: center;
}

.h4bs-box4-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px;
    gap: 8px;
    align-items: center;
}

.h4bs-box4-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.h4bs-box4-grid input[type="number"] {
    text-align: center;
}

.h4bs-box4-tip {
    display: block;
    margin-top: 6px;
    color: #5b6f85;
}

.h4bs-inspector-empty {
    color: #5f7388;
    font-style: italic;
}

@media (max-width: 1600px) {
    .h4bs-builder-studio {
        grid-template-columns: minmax(0, 1fr) 300px;
    }
}

@media (max-width: 1280px) {
    .h4bs-builder-studio {
        grid-template-columns: 1fr;
    }

    .h4bs-studio-device-switch {
        min-width: 100%;
    }

    .h4bs-side-panel-body {
        max-height: none;
    }

    .h4bs-navigator-modal {
        right: 10px;
        left: 10px;
        width: auto;
    }

    .h4bs-mini-preview-modal {
        right: 10px;
        left: 10px;
        top: 180px;
        width: auto;
    }

    .h4bs-widget-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .h4bs-widget-group {
        grid-template-columns: 1fr;
    }
}

