.container-block-placeholder {
    position: relative;
    min-height: 200px;
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
}

.container-block-placeholder .text-center {
    display: flex !important;
    visibility: visible !important;
}

/* Hide container visual indicators by default - only show when pagebuilder mode is active */
/* Content inside columns is always visible - only pagebuilder UI elements are hidden */
.container-block-header,
.container-column-empty-placeholder,
.add-block-to-container {
    display: none !important;
}

/* Show container visual indicators when pagebuilder mode is active (via body class) */
body.pagebuilder-mode .container-block-header {
    display: block !important;
}

/* Only apply pagebuilder styling when pagebuilder mode is active */
body.pagebuilder-mode .container-block-wrapper {
    min-height: 0;
    padding: 8px;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    background: #f8f9fa;
    position: relative;
}

body.pagebuilder-mode .container-block-row {
    min-height: 0;
}

body.pagebuilder-mode .container-column {
    min-height: 0;
    padding: 6px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    margin-bottom: 6px;
    background: white;
    position: relative;
}

body.pagebuilder-mode .container-block-row--resizing {
    display: flex !important;
    flex-wrap: nowrap !important;
}

body.pagebuilder-mode .container-block-row--resizing > .container-column {
    flex: 0 0 auto !important;
    max-width: none !important;
    width: auto !important;
}

body.pagebuilder-mode .container-column-resize-handle {
    position: absolute;
    top: 0;
    right: -6px;
    width: 12px;
    height: 100%;
    cursor: col-resize;
    z-index: 25;
    background: transparent;
    touch-action: none;
}

body.pagebuilder-mode .container-column-resize-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 36px;
    border-radius: 4px;
    background: #007bff;
    opacity: 0.55;
    transition: opacity 0.15s ease, background 0.15s ease;
}

body.pagebuilder-mode .container-column-resize-handle:hover::after,
body.pagebuilder-mode .container-column-resizing .container-column-resize-handle::after {
    opacity: 1;
    background: #0056b3;
}

body.pagebuilder-mode .container-block-height-handle {
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
    width: 48px;
    height: 10px;
    cursor: ns-resize;
    z-index: 25;
    touch-action: none;
}

body.pagebuilder-mode .container-block-height-handle::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 4px;
    border-radius: 4px;
    background: #007bff;
    opacity: 0.55;
    transition: opacity 0.15s ease, background 0.15s ease;
}

body.pagebuilder-mode .container-block-height-handle:hover::after,
body.pagebuilder-mode .container-block-height-resizing .container-block-height-handle::after {
    opacity: 1;
    background: #0056b3;
}

body.pagebuilder-mode.container-column-resizing,
body.pagebuilder-mode.container-block-height-resizing {
    user-select: none;
    cursor: col-resize;
}

body.pagebuilder-mode.container-block-height-resizing {
    cursor: ns-resize;
}

body.pagebuilder-mode .container-column-empty-placeholder {
    display: flex !important;
}

body.pagebuilder-mode .add-block-to-container,
body.pagebuilder-mode .add-more-blocks-to-container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 36px !important;
}

/* Add Block / Settings modal open: keep container chrome below the modal overlay */
body.pagebuilder-add-block-modal-open.pagebuilder-mode .container-block-header,
body.pagebuilder-add-block-modal-open.pagebuilder-mode .container-column-empty-placeholder,
body.pagebuilder-add-block-modal-open.pagebuilder-mode .add-block-to-container,
body.pagebuilder-add-block-modal-open.pagebuilder-mode .add-more-blocks-to-container {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.pagebuilder-add-block-modal-open.pagebuilder-mode .container-block-wrapper,
body.pagebuilder-settings-modal-open.pagebuilder-mode .container-block-wrapper,
body.pagebuilder-settings-modal-open.pagebuilder-mode .block-admin-wrapper {
    z-index: 0 !important;
}

body.pagebuilder-settings-modal-open.pagebuilder-mode .container-block-header,
body.pagebuilder-settings-modal-open.pagebuilder-mode .container-column-empty-placeholder,
body.pagebuilder-settings-modal-open.pagebuilder-mode .add-block-to-container,
body.pagebuilder-settings-modal-open.pagebuilder-mode .add-more-blocks-to-container {
    pointer-events: none !important;
}

/* Ensure content inside columns is always visible regardless of pagebuilder mode */
.container-column > *:not(.container-column-empty-placeholder):not(.add-block-to-container) {
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100%;
    min-width: 0;
}

.container-column .block-admin-wrapper,
.container-column section[data-block-type],
.container-column [data-block-id] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flow-root;
    clear: both;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Custom grid presets: stack to full width on mobile when mobile_columns = 1 (default) */
@media (max-width: 767.98px) {
    .container-block-wrapper[data-mobile-columns="1"] .container-block-row > .container-column {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .container-column .block-admin-wrapper,
    .container-column section[data-block-type] {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
        min-height: 1px;
        width: 100% !important;
        max-width: 100% !important;
    }

    .container-column section[data-block-type] .flickity-viewport {
        min-height: 120px;
    }

    /* Theme zeroes container padding on mobile; g-* row negative margins then clip past viewport (overflow-x:hidden on body). */
    .container-block-wrapper.container > .container-block-row,
    .container-block-wrapper.container > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .container-block-wrapper .container .container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .container-column section[data-block-type="product_list"] .container,
    .container-column section[data-block-type="product_carousel"] .container,
    .container-column section[data-block-type] .container > .row,
    .container-column section[data-block-type] .container > .row.products-grid-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: visible !important;
        max-width: 100% !important;
    }

    .container-column section[data-block-type="product_list"],
    .container-column section[data-block-type="product_carousel"] {
        overflow: visible !important;
    }
}

/* CRITICAL: Ensure inline blocks inside containers are always visible */
.container-column .inline-block-wrapper,
.container-column .inline-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* When inline block uses a fractional width (e.g. 70% via custom CSS), center it so space is even left/right */
.container-column .inline-block-wrapper {
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    max-width: 100%;
}

/* Ensure inline blocks are not hidden by block-hidden class when inside containers */
.container-column .inline-block-wrapper:not(.block-hidden),
.container-column .block-admin-wrapper[data-block-type="inline"] .inline-block-wrapper:not(.block-hidden) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Container column styling */
.container-column {
    position: relative;
}

/* Add block button styling */
.add-block-to-container {
    position: relative;
    z-index: 10;
}

/* CRITICAL: Ensure container-block-wrapper does NOT have positioning that causes it to float */
.container-block-wrapper {
    position: relative !important;
    z-index: auto !important;
    display: block !important;
    width: 100% !important;
    margin: 0 auto !important;
    float: none !important;
}

/* Ensure block-admin-wrapper for containers doesn't have problematic positioning */
.block-admin-wrapper[data-block-type="Container"],
.block-admin-wrapper[data-block-type="container"] {
    position: relative !important;
    z-index: auto !important;
    display: block !important;
    width: 100% !important;
    margin: 0 auto !important;
    float: none !important;
}

/* CRITICAL: Prevent container from rendering outside main content */
.main-content .container-block-wrapper,
.main-content-wrapper .container-block-wrapper,
.main-content .block-admin-wrapper[data-block-type="Container"],
.main-content .block-admin-wrapper[data-block-type="container"],
.main-content-wrapper .block-admin-wrapper[data-block-type="Container"],
.main-content-wrapper .block-admin-wrapper[data-block-type="container"] {
    position: relative !important;
    display: block !important;
    clear: both !important;
}

/* CRITICAL FIX: Ensure containers NEVER appear outside body/main content */
body > .container-block-wrapper:not(.main-content .container-block-wrapper):not(.main-content-wrapper .container-block-wrapper),
body > .block-admin-wrapper[data-block-type="Container"]:not(.main-content .block-admin-wrapper):not(.main-content-wrapper .block-admin-wrapper),
body > .block-admin-wrapper[data-block-type="container"]:not(.main-content .block-admin-wrapper):not(.main-content-wrapper .block-admin-wrapper),
header ~ .container-block-wrapper:not(.main-content .container-block-wrapper):not(.main-content-wrapper .container-block-wrapper),
header ~ .block-admin-wrapper[data-block-type="Container"]:not(.main-content .block-admin-wrapper):not(.main-content-wrapper .block-admin-wrapper),
header ~ .block-admin-wrapper[data-block-type="container"]:not(.main-content .block-admin-wrapper):not(.main-content-wrapper .block-admin-wrapper),
.header-container ~ .container-block-wrapper:not(.main-content .container-block-wrapper):not(.main-content-wrapper .container-block-wrapper),
.header-container ~ .block-admin-wrapper[data-block-type="Container"]:not(.main-content .block-admin-wrapper):not(.main-content-wrapper .block-admin-wrapper),
.header-container ~ .block-admin-wrapper[data-block-type="container"]:not(.main-content .block-admin-wrapper):not(.main-content-wrapper .block-admin-wrapper) {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Ensure containers inside main content are always visible */
.main-content .container-block-wrapper,
.main-content-wrapper .container-block-wrapper,
.main-content .block-admin-wrapper[data-block-type="Container"],
.main-content .block-admin-wrapper[data-block-type="container"],
.main-content-wrapper .block-admin-wrapper[data-block-type="Container"],
.main-content-wrapper .block-admin-wrapper[data-block-type="container"] {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
}