/* Center items for single-column dynamic lists */
.dynamic-list-container.layout-grid[style*="--column-limit: 1"],
.dynamic-list-container.layout-grid[data-column-limit="1"] {
    justify-items: center !important;
    grid-template-columns: 1fr !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.dynamic-list-container.layout-grid[style*="--column-limit: 1"] .dynamic-list-item,
.dynamic-list-container.layout-grid[data-column-limit="1"] .dynamic-list-item {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* Text List widget: clip content to cell bounds so text doesn't spill
   into adjacent rows/widgets. The transform-based hover-grow still works
   because CSS transforms are painted outside the stacking context. */
.widget-local-list .dynamic-list-item {
    overflow: hidden !important;
}

/* Keep local-list columns clamped to the item box. */
.widget-local-list .dynamic-list-item .column,
.widget-local-list .dynamic-list-item .column[data-col-size] {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    flex: 1 1 0 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
}

/* Local List cells are very short when using wide aspect ratios (e.g. 10/1).
   Force the inner template grid to honor the item height instead of inline
   row min-heights from the template model. */
.widget-local-list .dynamic-list-item > .row,
.widget-local-list .dynamic-list-item > .row[data-row-height],
.widget-local-list .dynamic-list-item > .row[style*="--row-height"] {
    min-height: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: stretch !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    box-sizing: border-box !important;
}

.widget-local-list .dynamic-list-item > .row > .column,
.widget-local-list .dynamic-list-item > .row > .column > .widget {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.widget-local-list .dynamic-list-item > .row > .column {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    gap: 0 !important;
    box-sizing: border-box !important;
}

/* Override global page-sizing rule:
   .row[data-row-height] > .column.column-textual.column-has-widget:not(.column-has-grid)
   which can force large row heights (e.g. 600px) onto local-list template columns. */
.widget-local-list .dynamic-list-item .row[data-row-height] > .column.column-textual.column-has-widget:not(.column-has-grid) {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    flex: 1 1 0 !important;
    overflow: hidden !important;
}

.widget-local-list .dynamic-list-item .row[data-row-height] > .column.column-textual.column-has-widget:not(.column-has-grid) > .widget {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

/* Override base page-sizing padding on textual widgets in this local-list scope. */
.widget-local-list .dynamic-list-item .column.column-textual > .widget {
    padding: 0 6px !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
}

/* Keep paragraph internals compact so text-autofit can fit inside tiny cells. */
.widget-local-list .dynamic-list-item .widget-paragraph,
.widget-local-list .dynamic-list-item .widget-title,
.widget-local-list .dynamic-list-item .widget-text {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
}

/* Allow local-list text to wrap instead of behaving like a truncated single line. */
.widget-local-list .dynamic-list-item .widget-paragraph,
.widget-local-list .dynamic-list-item .widget-title,
.widget-local-list .dynamic-list-item .widget-text,
.widget-local-list .dynamic-list-item .widget.widget-paragraph.widget-textual {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* Keep local-list paragraph box pinned to the same height chain as row/column. */
.widget-local-list .dynamic-list-item .widget.widget-paragraph.widget-textual {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    line-height: 1.1 !important;
    box-sizing: border-box !important;
}

/* Hard-cap every descendant's inline size in local-list cells so inner template
   nodes cannot exceed the item width on mobile due nested layout rules. */
.widget.widget-list.widget-local-list .dynamic-list-item * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Allow nested Menu Lists popouts to render outside clipped local-list cells. */
.widget.widget-list.widget-local-list .dynamic-list-item .widget-dropdown-multi,
.widget.widget-list.widget-local-list .dynamic-list-item .widget-dropdown-multi .ml-menu-shell,
.widget.widget-list.widget-local-list .dynamic-list-item .widget-dropdown-multi .ml-menu-level,
.widget.widget-list.widget-local-list .dynamic-list-item .widget-dropdown-multi .ml-menu-children {
    overflow: visible !important;
}

.widget.widget-list.widget-local-list .dynamic-list-item .widget-dropdown-multi {
    position: relative !important;
    isolation: isolate !important;
    z-index: 2147483000 !important;
}

.widget.widget-list.widget-local-list .dynamic-list-item .widget-dropdown-multi .ml-menu-level,
.widget.widget-list.widget-local-list .dynamic-list-item .widget-dropdown-multi .ml-menu-children {
    z-index: 2147483600 !important;
}

/* Local list cell wrappers also clamp overflow; unclip the ancestor chain
   only for items that actually contain a Menu Lists widget. */
.widget.widget-list.widget-local-list .dynamic-list-item:has(.widget-dropdown-multi),
.widget.widget-list.widget-local-list .dynamic-list-item:has(.widget-dropdown-multi) > .row,
.widget.widget-list.widget-local-list .dynamic-list-item:has(.widget-dropdown-multi) > .row > .column,
.widget.widget-list.widget-local-list .dynamic-list-item:has(.widget-dropdown-multi) > .row > .column > .widget,
.widget.widget-list.widget-local-list .dynamic-list-item:has(.widget-dropdown-multi) .row[data-row-height] > .column.column-textual.column-has-widget:not(.column-has-grid),
.widget.widget-list.widget-local-list .dynamic-list-item:has(.widget-dropdown-multi) .row[data-row-height] > .column.column-textual.column-has-widget:not(.column-has-grid) > .widget {
    overflow: visible !important;
}

/* Fallback for browsers where :has support is inconsistent. */
.widget.widget-list.widget-local-list .dynamic-list-item.has-menu-list,
.widget.widget-list.widget-local-list .dynamic-list-item.has-menu-list > .row,
.widget.widget-list.widget-local-list .dynamic-list-item.has-menu-list > .row > .column,
.widget.widget-list.widget-local-list .dynamic-list-item.has-menu-list > .row > .column > .widget,
.widget.widget-list.widget-local-list .dynamic-list-item.has-menu-list .row[data-row-height] > .column.column-textual.column-has-widget:not(.column-has-grid),
.widget.widget-list.widget-local-list .dynamic-list-item.has-menu-list .row[data-row-height] > .column.column-textual.column-has-widget:not(.column-has-grid) > .widget {
    overflow: visible !important;
}

/* Force menu-list host cell above sibling cells/widgets in the same local list. */
.widget.widget-list.widget-local-list .dynamic-list-item.has-menu-list,
.widget.widget-list.widget-local-list .dynamic-list-item:has(.widget-dropdown-multi) {
    position: relative !important;
    z-index: 2147482500 !important;
}

.widget.widget-list.widget-local-list .dynamic-list-item.has-menu-list:hover,
.widget.widget-list.widget-local-list .dynamic-list-item:has(.widget-dropdown-multi):hover {
    z-index: 2147483001 !important;
}

/* The local-list scrolling container can still clip menu popouts.
   Unclip only when this list instance contains Menu Lists. */
.widget.widget-list.widget-local-list .dynamic-list-container.has-menu-list-items,
.widget.widget-list.widget-local-list:has(.dynamic-list-item.has-menu-list) .dynamic-list-container {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    max-height: none !important;
}

/* Desktop clipping between rows is usually paint-order/stacking, not only overflow.
   Elevate the entire local-list host chain when it includes menu-list items. */
.widget.widget-list.widget-local-list:has(.dynamic-list-item.has-menu-list) {
    overflow: visible !important;
}

.column:has(> .widget.widget-list.widget-local-list:has(.dynamic-list-item.has-menu-list)) {
    overflow: visible !important;
}

.row:has(.widget.widget-list.widget-local-list:has(.dynamic-list-item.has-menu-list)) {
    overflow: visible !important;
}

/* Release strict row height clamps for menu-list cells so nested menu levels
   are not trapped by template row max-height rules. */
.widget.widget-list.widget-local-list .dynamic-list-item.has-menu-list > .row,
.widget.widget-list.widget-local-list .dynamic-list-item.has-menu-list > .row[data-row-height],
.widget.widget-list.widget-local-list .dynamic-list-item.has-menu-list > .row[style*="--row-height"],
.widget.widget-list.widget-local-list .dynamic-list-item:has(.widget-dropdown-multi) > .row,
.widget.widget-list.widget-local-list .dynamic-list-item:has(.widget-dropdown-multi) > .row[data-row-height],
.widget.widget-list.widget-local-list .dynamic-list-item:has(.widget-dropdown-multi) > .row[style*="--row-height"] {
    height: auto !important;
    max-height: none !important;
}

/* Runtime-marked menu-list ancestor hosts must stay unclipped in desktop mode. */
.ml-overflow-host,
.ml-overflow-host.row,
.ml-overflow-host.column,
.ml-overflow-host > .row,
.ml-overflow-host > .column,
.ml-overflow-host > .widget,
.ml-overflow-host > .widget-children {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    max-height: none !important;
}


.widget-dynamic-list {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Allow parent containers to expand with dynamic list content */
.row:has(.widget-dynamic-list) {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    flex: 0 0 auto !important;
}

.column:has(.widget-dynamic-list) {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
}

/* Search bar */
.dynamic-list-search {
    padding: 10px;
    margin-bottom: 10px;
    background: #f5f5f5;
    border-radius: 4px;
}

.dynamic-list-search input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

/* Pagination */
.dynamic-list-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 15px;
    margin-top: 10px;
    background: #f5f5f5;
    border-radius: 4px;
}

.pagination-btn {
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.pagination-btn:hover:not(:disabled) {
    background: #e9e9e9;
    border-color: #999;
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-numbers {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination-btn.letter-btn {
    min-width: 35px;
    font-weight: bold;
}

.pagination-info {
    margin-left: 15px;
    font-size: 14px;
    color: #666;
}

/* Container for list items */
.dynamic-list-container {
    width: 100%;
    flex: 1 1 auto;
    padding: 0;
    margin: 0;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    border: var(--list-outline-width, 0px) var(--list-outline-style, solid) var(--list-outline-color, transparent);
    border-radius: var(--list-outline-radius, 0px);
    box-sizing: border-box;
    /* Faint by default; reveal more clearly on hover or touch-first/mobile. */
    scrollbar-width: thin;
    scrollbar-color: rgba(70, 70, 70, 0.14) rgba(0, 0, 0, 0.02);
}

.dynamic-list-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dynamic-list-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 999px;
}

.dynamic-list-container::-webkit-scrollbar-thumb {
    background: rgba(70, 70, 70, 0.14);
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.55);
    transition: background-color 0.2s ease;
}

.widget.widget-list.widget-local-list:hover .dynamic-list-container,
.dynamic-list-container:hover,
.dynamic-list-container:focus-within {
    scrollbar-color: rgba(70, 70, 70, 0.62) rgba(0, 0, 0, 0.10);
}

.widget.widget-list.widget-local-list:hover .dynamic-list-container::-webkit-scrollbar-track,
.dynamic-list-container:hover::-webkit-scrollbar-track,
.dynamic-list-container:focus-within::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.10);
}

.widget.widget-list.widget-local-list:hover .dynamic-list-container::-webkit-scrollbar-thumb,
.dynamic-list-container:hover::-webkit-scrollbar-thumb,
.dynamic-list-container:focus-within::-webkit-scrollbar-thumb {
    background: rgba(70, 70, 70, 0.62);
}

@media (max-width: 768px), (hover: none), (pointer: coarse) {
    .dynamic-list-container {
        scrollbar-color: rgba(70, 70, 70, 0.72) rgba(0, 0, 0, 0.16);
    }

    .dynamic-list-container::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    .dynamic-list-container::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.16);
    }

    .dynamic-list-container::-webkit-scrollbar-thumb {
        background: rgba(70, 70, 70, 0.72);
        border: 1px solid rgba(255, 255, 255, 0.35);
    }
}

/* Layout modes */
.dynamic-list-container.layout-grid {
    display: grid;
    gap: var(--cell-margin, 10px);
    width: 100%;
    grid-template-columns: repeat(var(--column-limit, 3), minmax(0, 1fr));
    /* Use auto rows so group headings can size naturally;
       items control their own height via aspect-ratio */
    grid-auto-rows: auto;
    align-content: start;
    align-items: stretch;
    box-sizing: border-box;
    padding-left: var(--side-gap, 0px);
    padding-right: var(--side-gap, 0px);
}

.dynamic-list-container.layout-grid.list-expand {
    grid-template-rows: repeat(var(--row-count, 1), minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    align-content: stretch;
}

.dynamic-list-container.layout-grid.list-expand > .dynamic-list-item {
    aspect-ratio: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* Group heading — auto-height, spans full width, no cell styling */
.dynamic-list-group-heading {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: unset !important;
    border: none !important;
}

/* Responsive: full width on mobile, center items */
@media (max-width: 768px) {
    .dynamic-list-container.layout-grid {
        grid-template-columns: repeat(min(var(--column-limit, 3), 2), 1fr) !important;
        grid-auto-rows: auto !important;
        justify-items: center;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Expand mode is desktop-only; mobile uses normal auto row sizing. */
    .dynamic-list-container.layout-grid.list-expand {
        grid-template-rows: none !important;
        grid-auto-rows: auto !important;
        align-content: start !important;
    }
    .dynamic-list-container.layout-grid.list-expand > .dynamic-list-item {
        aspect-ratio: var(--cell-aspect-ratio, 1) !important;
        height: auto !important;
    }
    .dynamic-list-item {
        width: 100% !important;
        max-width: 500px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
@media (max-width: 400px) {
    .dynamic-list-container.layout-grid {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
        justify-items: center;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .dynamic-list-item {
        width: 100% !important;
        max-width: 500px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

.dynamic-list-container.layout-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dynamic-list-container.layout-masonry {
    column-count: 3;
    column-gap: 0;
}

/* Individual list items */
.dynamic-list-item {
    /* Use aspect-ratio by default, can be overridden with inline height on desktop */
    height: auto;
    width: 100% !important;
    max-height: none !important;
    max-width: 100% !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow: visible !important;
    break-inside: avoid !important;
    border: var(--cell-border-thickness, 2px) solid var(--cell-border-color, #000000) !important;
    box-sizing: border-box !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Use aspect-ratio from CSS variable to maintain proportions */
    aspect-ratio: var(--cell-aspect-ratio, 1);
    transition: transform 0.18s cubic-bezier(.4,1.4,.6,1), box-shadow 0.18s;
}

.dynamic-list-container.layout-grid > .dynamic-list-item {
    min-width: 0 !important;
    max-width: 100% !important;
    justify-self: stretch !important;
}

.widget.widget-list.widget-local-list .dynamic-list-container.layout-grid {
    width: min(100%, var(--widget-inner-width, 100%)) !important;
    max-width: min(100%, var(--widget-inner-width, 100%)) !important;
}

.widget.widget-list.widget-local-list .dynamic-list-container.layout-grid > .dynamic-list-item {
    width: 100% !important;
    min-width: 0 !important;
    max-width: min(100%, var(--widget-inner-width, 100%)) !important;
    box-sizing: border-box !important;
}

.dynamic-list-item:hover {
    transform: scale(var(--cell-hover-grow, 1.0));
    z-index: 2;
    box-shadow: 0 4px 24px 0 rgba(0,0,0,0.10);
}

/* Scale template content to fit cell */
.dynamic-list-item > * {
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* Template root row inside cells fills the full cell */
.dynamic-list-item > .row {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}

/* Rows inside dynamic list items are flex rows (columns placed horizontally side by side) */
.dynamic-list-item .row,
.dynamic-list-item .row[data-row-height] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    height: auto !important;
    flex: var(--row-size, 1) 1 0% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Columns inside dynamic list items */
.dynamic-list-item .column,
.dynamic-list-item .column[data-col-size] {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    max-height: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    flex-basis: 0 !important;
    box-sizing: border-box !important;
}

/* Columns holding nested rows stack their child rows vertically */
.dynamic-list-item .column.column-has-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 0 !important;
    box-sizing: border-box !important;
}

.dynamic-list-item .column.column-has-grid .row,
.dynamic-list-item .widget-children .row,
.dynamic-list-item .row .row {
    width: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    height: auto !important;
    flex: var(--row-size, 1) 1 0% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.dynamic-list-item .widget-children {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 0 !important;
    box-sizing: border-box !important;
}

.dynamic-list-item .row[data-row-height] > .column,
.dynamic-list-item .row[data-row-height] > .column.column-has-widget,
.dynamic-list-item .row[data-row-height] > .column.column-textual {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
}

.dynamic-list-item .widget {
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}
    max-height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px !important;
    overflow: visible !important;
}

/* Ensure images inside dynamic list buttons stay contained */
.dynamic-list-item .button-image,
.dynamic-list-item .button-image picture,
.dynamic-list-item .button-content-center {
    height: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

.dynamic-list-item .button-image img {
    max-height: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Template rows must stack at their authored heights.  A full-height rule on
   each row makes title, summary, and button content occupy the same space. */
.dynamic-list-container.layout-grid > .dynamic-list-item {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
}

.dynamic-list-container.layout-grid > .dynamic-list-item > .row,
.dynamic-list-container.layout-grid > .dynamic-list-item > .row[data-row-height] {
    height: auto !important;
    min-height: var(--row-height, 0px) !important;
    max-height: none !important;
    flex: 0 0 auto !important;
}

.dynamic-list-container.layout-grid > .dynamic-list-item > .row > .column,
.dynamic-list-container.layout-grid > .dynamic-list-item > .row > .column > .widget {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
}

/* A Button used as a layer is the cell's backdrop, so it fills and crops
   instead of being letterboxed inside its own padding. */
.dynamic-list-item .column[data-button-layer="true"] {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
}

.dynamic-list-item .column[data-button-layer="true"] > .widget-button-layer {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: auto !important;
}

.dynamic-list-item .column[data-button-layer="true"] > .widget-button-layer .button-element {
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    border-radius: inherit !important;
    min-height: 0 !important;
    max-height: none !important;
}

.dynamic-list-item .column[data-button-layer="true"] > .widget-button-layer .button-image img {
    height: 100% !important;
    width: 100% !important;
    min-height: 100% !important;
    min-width: 100% !important;
    max-height: none !important;
    max-width: none !important;
    object-fit: cover !important;
}

/* Stacked rows on button layer fill the button area and layout normally */
.dynamic-list-item .column[data-button-layer="true"] > .row {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
    gap: 0 !important;
}

/* Ensure grid content within items stacks vertically and fills height */
.dynamic-list-item .page {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* Widget containers need to flex and fill available space */
.dynamic-list-item .widget {
    min-height: 0 !important;
    width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.dynamic-list-item .widget-title,
.dynamic-list-item .widget-paragraph {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 2px 4px !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

.dynamic-list-item .widget-title > *,
.dynamic-list-item .widget-paragraph > *,
.dynamic-list-item .widget-paragraph p {
    margin: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Button widget specific - remove min-height constraint */
.dynamic-list-item .widget-button {
    height: 100% !important;
    max-height: 100% !important;
}

.dynamic-list-item .widget-button:not(.widget-button-layer) .button-element {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    padding: 8px 12px !important;
    font-size: clamp(0.5rem, 1.5vw, 0.85rem) !important;
    gap: 2px !important;
}

.dynamic-list-item .widget-button .button-label-primary {
    font-size: inherit !important;
}

.dynamic-list-item .widget-button .button-label-secondary {
    font-size: 0.75em !important;
}

/* Image widget specific */
.dynamic-list-item .widget-image {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

.dynamic-list-item .widget-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* General image scaling */
.dynamic-list-item img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    min-height: 0 !important;
}

/* Button image-overlay: image must fill the entire button, not be contained */
.dynamic-list-item .button-image-overlay > .button-image img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Scale widgets within cells */
.dynamic-list-item .widget {
    transform-origin: top left;
    max-width: 100%;
    max-height: 100%;
}

.dynamic-list-container.layout-masonry .dynamic-list-item {
    margin-bottom: 20px;
}

/* Loading state */
.dynamic-list-loading {
    text-align: center;
    padding: 40px 20px;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 15px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Error state */
.dynamic-list-error {
    text-align: center;
    padding: 40px 20px;
    color: #e74c3c;
    background: #fdeaea;
    border-radius: 5px;
    margin: 10px 0;
}

/* Empty state */
.dynamic-list-empty {
    text-align: center;
    padding: 40px 20px;
    color: #7f8c8d;
    font-style: italic;
}

/* Pagination */
.dynamic-list-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 20px 0;
    flex-wrap: wrap;
}

.pagination-btn {
    min-width: 36px;
    height: 36px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    background: white;
    color: #333;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
    background: #f5f5f5;
    border-color: #999;
}

.pagination-btn:active:not(:disabled) {
    background: #e0e0e0;
}

.pagination-btn.active {
    background: #2196F3;
    color: white;
    border-color: #2196F3;
    font-weight: bold;
    cursor: pointer;
    pointer-events: auto;
}

.pagination-btn.active:hover {
    background: #1976D2;
    border-color: #1976D2;
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-numbers {
    display: flex;
    gap: 5px;
    align-items: center;
}

.pagination-ellipsis {
    padding: 0 5px;
    color: #999;
    font-size: 14px;
}

/* Responsive design */
@media (max-width: 899px) and (min-width: 600px) {
    .dynamic-list-container.layout-masonry {
        column-count: 2;
    }
}

@media (max-width: 768px) {
    .dynamic-list-container.layout-grid {
        gap: calc(var(--cell-margin, 5px) * 0.8) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        /* Let JavaScript handle column sizing for accurate measurement */
        grid-auto-rows: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .dynamic-list-item {
        aspect-ratio: var(--cell-aspect-ratio, 1);
        height: auto !important;
        width: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Override fixed row heights within cells on mobile */
    .dynamic-list-item .row[data-row-height] {
        min-height: 0 !important;
        height: 100% !important;
        max-height: none !important;
    }
    
    .dynamic-list-item > * {
        height: 100% !important;
        min-height: 0 !important;
    }
    
    /* Allow parent containers to expand in mobile mode */
    .row:has(.widget-dynamic-list) {
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        flex: 0 0 auto !important;
    }
    
    .column:has(.widget-dynamic-list) {
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
    }
    .dynamic-list-item .widget-image,
    .dynamic-list-item img:not(.widget-button-layer img) {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .dynamic-list-item .widget-button:not(.widget-button-layer) .button-element {
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding: 4px 6px !important;
        font-size: clamp(0.45rem, 1.2vw, 0.75rem) !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        gap: 2px !important;
    }
    .dynamic-list-item .widget-button .button-label-secondary {
        font-size: 0.7em !important;
    }

    /* Button layers inside dynamic list on mobile */
    .dynamic-list-item .column[data-button-layer="true"],
    .dynamic-list-item .column:has(> .widget-button-layer) {
        position: relative !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
    }
    .dynamic-list-item .widget-button-layer,
    .dynamic-list-item .widget-button-layer .button-element {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-radius: inherit !important;
        box-shadow: none !important;
        display: block !important;
    }
    .dynamic-list-item .widget-button-layer .button-image,
    .dynamic-list-item .widget-button-layer .button-image picture,
    .dynamic-list-item .widget-button-layer .button-image img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .dynamic-list-item .column[data-button-layer="true"] > .row {
        position: relative !important;
        z-index: 1 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        pointer-events: none !important;
        margin: 0 !important;
        padding: 8px 12px !important;
        box-sizing: border-box !important;
        gap: 0 !important;
    }
}

@media (max-width: 599px) {
    .dynamic-list-container.layout-masonry {
        grid-template-columns: repeat(min(var(--column-limit, 3), 2), minmax(0, 1fr)) !important;
    }
    
    .pagination-btn {
        min-width: 32px;
        overflow-x: hidden !important;
        height: 32px;
        padding: 6px 10px;
        font-size: 13px;
        min-width: 0 !important;
        max-width: 100% !important;
}

@media (max-width: 480px) {
    /* Force better single-column behavior on very small screens */
    .dynamic-list-container.layout-grid {
        gap: calc(var(--cell-margin, 5px) * 0.6) !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
    }
    
        overflow-x: hidden !important;
    .dynamic-list-item {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        aspect-ratio: var(--cell-aspect-ratio, 1) !important;
    }
    
    /* Override fixed row heights within cells */
    .dynamic-list-item .row[data-row-height] {
        min-height: 0 !important;
        height: 100% !important;
        max-height: none !important;
    }
    
    .dynamic-list-item .widget-button .button-element {
        padding: 3px 4px !important;
        font-size: clamp(0.4rem, 1.0vw, 0.7rem) !important;
    }
}

/* Constrain widget-table and local-data-widget sizes */
.widget-table.local-data-widget {
    max-width: 100%;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.widget-table.local-data-widget .local-data-grid {
    display: grid;
    grid-template-columns: repeat(var(--table-column-count, 1), 1fr);
    gap: var(--table-cell-padding, 0px);
    width: 100%;
    box-sizing: border-box;
}

.widget-table.local-data-widget .local-data-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    overflow: hidden;
    padding: 8px;
}

.widget-table.local-data-widget .local-data-cell input[type="number"] {
    width: 50px;
    text-align: center;
    box-sizing: border-box;
    flex-shrink: 0;
}

.widget-table.local-data-widget .local-data-remove-btn {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-left: 8px;
    box-sizing: border-box;
}

/* Ensure text content wraps properly */
.widget-table.local-data-widget .local-data-cell a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 100px); /* Adjust for quantity box and delete button */
    display: inline-block;
}

/*TEST*/

/* Responsive blog cards: ordinary image buttons use their natural aspect
   height.  Only background/layer buttons should stretch to a row. */
.dynamic-list-container.layout-grid > .dynamic-list-item > .row:first-child,
.dynamic-list-container.layout-grid > .dynamic-list-item > .row:first-child[data-row-height] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
}

.dynamic-list-container.layout-grid > .dynamic-list-item > .row:first-child .widget-button:not(.widget-button-layer),
.dynamic-list-container.layout-grid > .dynamic-list-item > .row:first-child .button-element.button-style-image,
.dynamic-list-container.layout-grid > .dynamic-list-item > .row:first-child .button-content-center,
.dynamic-list-container.layout-grid > .dynamic-list-item > .row:first-child .button-image,
.dynamic-list-container.layout-grid > .dynamic-list-item > .row:first-child .button-image picture {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

.dynamic-list-container.layout-grid > .dynamic-list-item > .row:first-child .button-image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
}

/* Image-text product cards are single-cell aspect-ratio cards, not stacked
   blog templates. Restore their square cell geometry and full-cell overlay. */
.dynamic-list-container.layout-grid > .dynamic-list-item:has(.button-image-overlay) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: var(--cell-aspect-ratio, 1) !important;
    overflow: hidden !important;
}

.dynamic-list-container.layout-grid > .dynamic-list-item:has(.button-image-overlay) > .row,
.dynamic-list-container.layout-grid > .dynamic-list-item:has(.button-image-overlay) > .row[data-row-height],
.dynamic-list-container.layout-grid > .dynamic-list-item:has(.button-image-overlay) > .row > .column,
.dynamic-list-container.layout-grid > .dynamic-list-item:has(.button-image-overlay) .widget-button,
.dynamic-list-container.layout-grid > .dynamic-list-item:has(.button-image-overlay) .button-element.button-image-overlay {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    flex: 1 1 auto !important;
}

/* Optional legacy image-aspect mode. Keep the item box on the configured
   ratio and contain every image inside that box without distortion. */
.dynamic-list-container[data-force-img-aspect="true"] > .dynamic-list-item {
    aspect-ratio: var(--cell-aspect-ratio, 1) !important;
    width: var(--cell-width, 100%) !important;
    height: var(--row-height, auto) !important;
    min-height: 0 !important;
    max-height: var(--row-height, none) !important;
    overflow: hidden !important;
}

.dynamic-list-container[data-force-img-aspect="true"] > .dynamic-list-item > * {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
}

.dynamic-list-container[data-force-img-aspect="true"] > .dynamic-list-item > .row,
.dynamic-list-container[data-force-img-aspect="true"] > .dynamic-list-item > .row[data-row-height] {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    flex: 1 1 auto !important;
}

.dynamic-list-container[data-force-img-aspect="true"] .dynamic-list-item img,
.dynamic-list-container[data-force-img-aspect="true"] .dynamic-list-item .button-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}