html, body { margin: 0; padding: 0; overflow-x: hidden; }
body { font-family: Arial, Helvetica, sans-serif; }
.viewport {
width: 100%;
height: 100vh;
min-height: 100vh;
display: flex;
justify-content: center;
box-sizing: border-box;
padding: 16px;
overflow-x: hidden;
overflow-y: hidden;
}
.page {
width: 100%;
max-width: 1920px;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
view-transition-name: page-resize-swap;
}
::view-transition-old(page-resize-swap),
::view-transition-new(page-resize-swap) {
animation-duration: 180ms;
animation-timing-function: ease;
}
::view-transition-old(page-resize-swap) {
mix-blend-mode: normal;
}
::view-transition-new(page-resize-swap) {
mix-blend-mode: normal;
}
/* Main page scrollbar: faint on desktop, stronger on hover/near-hover,
fully visible on mobile/coarse pointers. */
.page,
.viewport {
scrollbar-width: thin;
scrollbar-color: rgba(70, 70, 70, 0.14) rgba(0, 0, 0, 0.02);
}
.page::-webkit-scrollbar,
.viewport::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.page::-webkit-scrollbar-track,
.viewport::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.02);
border-radius: 999px;
}
.page::-webkit-scrollbar-thumb,
.viewport::-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;
}
.page:hover,
.page:focus-within,
body.scrollbar-edge-hover .page,
body.scrollbar-edge-hover .viewport {
scrollbar-color: rgba(70, 70, 70, 0.62) rgba(0, 0, 0, 0.10);
}
.page:hover::-webkit-scrollbar-track,
.page:focus-within::-webkit-scrollbar-track,
body.scrollbar-edge-hover .page::-webkit-scrollbar-track,
body.scrollbar-edge-hover .viewport::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.10);
}
.page:hover::-webkit-scrollbar-thumb,
.page:focus-within::-webkit-scrollbar-thumb,
body.scrollbar-edge-hover .page::-webkit-scrollbar-thumb,
body.scrollbar-edge-hover .viewport::-webkit-scrollbar-thumb {
background: rgba(70, 70, 70, 0.62);
}
@media (max-width: 768px), (hover: none), (pointer: coarse) {
.page,
.viewport {
scrollbar-color: rgba(70, 70, 70, 0.72) rgba(0, 0, 0, 0.16);
}
.page::-webkit-scrollbar,
.viewport::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.page::-webkit-scrollbar-track,
.viewport::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.16);
}
.page::-webkit-scrollbar-thumb,
.viewport::-webkit-scrollbar-thumb {
background: rgba(70, 70, 70, 0.72);
border: 1px solid rgba(255, 255, 255, 0.35);
}
}
.row {
display: flex;
gap: 20px;
margin-bottom: 0;
flex-wrap: nowrap;
align-items: stretch;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: visible;
}
.row[data-depth="0"] {
margin-bottom: 30px;
}
.column {
display: flex;
flex-direction: column;
gap: 20px;
flex: 1 1 0;
max-height: 100%;
min-width: 0;
align-items: stretch;
justify-content: flex-start;
position: relative;
box-sizing: border-box;
overflow: visible;
}
.column.column-textual {
overflow: visible;
max-width: 100%;
}
.column.column-has-grid {
gap: 0;
overflow: visible;
}
/* Remove gaps from columns inside fixed-height rows to prevent overflow scrollbars */
.row[data-row-height] > .column {
gap: 0;
}
.column.span-1 { flex: 1 1 0; max-width: 100%; }
.column.span-2 { flex: 2 1 0; max-width: 100%; }
.column.span-3 { flex: 3 1 0; max-width: 100%; }
.column.span-4 { flex: 4 1 0; max-width: 100%; }
.column.span-5 { flex: 5 1 0; max-width: 100%; }
.column.span-6 { flex: 6 1 0; max-width: 100%; }
.column.span-7 { flex: 7 1 0; max-width: 100%; }
.column.span-8 { flex: 8 1 0; max-width: 100%; }
.column.span-9 { flex: 9 1 0; max-width: 100%; }
.column.span-10 { flex: 10 1 0; max-width: 100%; }
.column.span-11 { flex: 11 1 0; max-width: 100%; }
.column.span-12 { flex: 12 1 0; max-width: 100%; }
.column[data-col-size] {
flex-basis: 0;
}
.column > .widget:not(.widget-background):not(.widget-button-layer) {
position: relative;
z-index: 1;
width: 100%;
}
.column > .widget-background {
position: absolute;
inset: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
pointer-events: none;
}
/* A Button with nested rows fills its cell and sits under them, so a click
anywhere in the cell (including on the stacked content) triggers the button. */
.column > .widget-button-layer {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
pointer-events: auto;
}
.column > .widget-button-layer .button-element {
width: 100%;
height: 100%;
max-height: none;
/* The click surface is the whole cell, so the default button box sizing
(min-height clamp, padding, nowrap) must not shrink or overflow it. */
min-height: 0;
padding: 0;
white-space: normal;
}
/* An image layer covers the cell like a background rather than sitting centred in it. */
.column > .widget-button-layer .button-element .button-content-center,
.column > .widget-button-layer .button-element .button-image,
.column > .widget-button-layer .button-element .button-image picture {
display: block;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
}
.column > .widget-button-layer .button-element .button-image img {
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: cover;
}
.column[data-button-layer="true"] {
position: relative !important;
overflow: hidden !important;
}
/* Stacked rows fill the button's box instead of forcing their own height into it,
so they line up with the button and text autofit measures the real cell. */
.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;
padding: 8px 12px !important;
box-sizing: border-box !important;
gap: 0 !important;
}
.column[data-button-layer="true"] > *:not(.widget-button-layer) {
pointer-events: none !important;
}
.column[data-button-layer="true"] .row,
.column[data-button-layer="true"] .row[data-row-height] {
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;
}
.column[data-button-layer="true"] .column,
.column[data-button-layer="true"] .column[data-col-size] {
display: flex !important;
flex-direction: column !important;
min-width: 0 !important;
min-height: 0 !important;
height: 100% !important;
max-height: 100% !important;
flex-basis: 0 !important;
box-sizing: border-box !important;
}
.column[data-button-layer="true"] .column.column-has-grid,
.column[data-button-layer="true"] .widget-children {
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;
}
.column[data-button-layer="true"] .column.column-has-grid .row,
.column[data-button-layer="true"] .widget-children .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;
}
.column[data-button-layer="true"] .row[data-row-height] > .column,
.column[data-button-layer="true"] .row[data-row-height] > .column.column-has-widget,
.column[data-button-layer="true"] .row[data-row-height] > .column.column-textual {
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
box-sizing: border-box !important;
}
.column[data-button-layer="true"] .widget {
width: 100% !important;
min-height: 0 !important;
height: 100% !important;
max-height: 100% !important;
margin: 0 !important;
box-sizing: border-box !important;
}
.column[data-button-layer="true"] .widget.widget-title {
justify-content: center !important;
align-items: center !important;
height: 100% !important;
}
.column[data-button-layer="true"] .widget.widget-paragraph {
justify-content: center !important;
align-items: center !important;
height: 100% !important;
}
.column[data-button-layer="true"] .widget.widget-title > *,
.column[data-button-layer="true"] .widget.widget-paragraph > * {
margin: 0 !important;
box-sizing: border-box !important;
}
.widget { display: flex; flex-direction: column; align-items: stretch; justify-content: center; box-sizing: border-box; width: 100%; overflow: visible; text-align: center; }
.widget.widget-textual { justify-content: center; overflow: visible; }
.widget.widget-textual > * { margin: 0; max-width: 100%; width: 100%; overflow: visible; box-sizing: border-box; }
.widget.widget-title { justify-content: flex-start; overflow: visible; height: 100%; }
.widget.widget-title > * {
margin: 0;
width: 100%;
max-width: 100%;
max-height: 100%;
overflow: visible;
text-align: inherit;
box-sizing: border-box;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
/* font-size controlled by text-autofit.js */
}
.widget.widget-paragraph {
justify-content: center;
text-align: center;
overflow: visible;
max-width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
/* font-size controlled by text-autofit.js */
}
.widget-paragraph a.paragraph-email-link,
.widget-paragraph a.paragraph-phone-link {
color: inherit;
text-decoration: underline;
}
.widget > * {
max-width: 100%;
margin: 0 auto;
box-sizing: border-box;
overflow: visible;
word-wrap: break-word;
overflow-wrap: break-word;
}
.widget img { max-width: 100%; height: auto; max-height: var(--row-height, none); display: block; object-fit: contain; min-width: 1px; min-height: 1px; }
picture { display: block; min-width: 1px; min-height: 1px; }
.row[data-row-height] { min-height: var(--row-height, auto); }
.row[data-row-height] > .column.column-has-widget:not(.column-has-grid) { height: var(--row-height, auto); min-height: var(--row-height, auto); max-height: var(--row-height, auto); }
.row[data-row-height] > .column.column-textual.column-has-widget:not(.column-has-grid) {
height: var(--row-height, auto);
min-height: var(--row-height, auto);
max-height: var(--row-height, auto);
overflow: visible;
}
.row[data-row-height] > .column.column-textual > .widget {
height: 100%;
max-height: 100%;
overflow: visible;
}
/* Paragraph font-size in fixed-height rows controlled by text-autofit.js */
.row[data-depth="0"][data-row-height] {
height: var(--row-height, auto);
max-height: var(--row-height, auto);
}
.column.column-textual > .widget {
padding: 0 12px;
box-sizing: border-box;
max-width: 100%;
overflow: visible;
word-wrap: break-word;
overflow-wrap: break-word;
}
.widget.widget-paragraph p {
margin: 0;
width: 100%;
max-width: 100%;
word-break: break-word;
overflow-wrap: break-word;
hyphens: auto;
display: flex;
flex-direction: column;
align-items: var(--paragraph-align-items, center);
justify-content: center;
text-align: inherit;
box-sizing: border-box;
overflow: visible;
/* font-size controlled by text-autofit.js */
padding: 0 4px;
}
.row[data-row-height] > .column.column-has-grid { min-height: var(--row-height, auto); height: auto; max-height: none; }
.row[data-row-height] > .column.column-empty { min-height: var(--row-height, auto); }
.row[data-row-height] > .column.column-has-widget:not(.column-has-grid) > .widget { height: 100%; max-height: 100%; }
.row[data-row-height] > .column.column-has-grid > .widget { height: auto; max-height: none; }
.row[data-row-height] > .column > .widget-children { max-height: 100%; }
.row[data-row-height] > .column.column-has-grid > .widget-children { max-height: none; }
.row[data-row-height]:not([data-depth="0"]) > .column.column-has-widget:not(.column-has-grid) {
justify-content: center;
}
.row[data-row-height]:not([data-depth="0"]) > .column.column-has-widget:not(.column-has-grid) > .widget {
margin-top: auto;
margin-bottom: auto;
}
.row[data-has-draw-on-top="true"],
.row[data-has-draw-on-top="true"] > .column,
.column[data-has-draw-on-top="true"] {
overflow: visible !important;
clip-path: none !important;
}
.row[data-row-height][data-has-draw-on-top="true"] > .column.column-has-widget:not(.column-has-grid),
.row[data-row-height] > .column.column-has-widget[data-has-draw-on-top="true"]:not(.column-has-grid),
.row[data-row-height] > .column.column-has-widget[data-has-draw-on-top="true"]:not(.column-has-grid) > .widget {
max-height: none !important;
overflow: visible !important;
}
.widget-background {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform-origin: center;
transform: scale(var(--background-scale, 1));
}
/* Max-height mode relies on element-local positioning; fixed attachment
anchors to the viewport and can visually push the image downward. */
.widget-background[data-bg-max-height] {
background-attachment: scroll !important;
background-position: center center !important;
}
.widget-background::after {
content: "";
position: absolute;
inset: 0;
background: var(--background-overlay-color, transparent);
opacity: var(--background-overlay-alpha, 0);
pointer-events: none;
}
.widget-children { margin-top: 12px; }
.widget h1, .widget h2, .widget h3, .widget p { margin: 0; word-break: break-word; }
/* Global text overflow prevention - ensure all text stays within container bounds */
.widget h1, .widget h2, .widget h3, .widget h4, .widget h5, .widget h6,
.widget p, .widget span, .widget div, .widget label, .widget a {
max-width: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
hyphens: auto;
box-sizing: border-box;
overflow: visible;
}
.widget-title, .widget-paragraph, .widget-textual {
max-width: 100%;
overflow: visible;
}
/* Ensure all text containers respect their bounds */
.column.column-textual {
max-width: 100%;
overflow: visible;
}
.column.column-textual > .widget {
max-width: 100%;
overflow: visible;
}
/* Title heading font-size controlled by text-autofit.js (inline fallback + JS override) */
.column.column-empty {
pointer-events: none;
flex-shrink: 3;
}
.column:not(.column-empty) {
flex-shrink: 1;
}
.widget-button { width: 100%; height: 100%; display: flex; flex: 1 1 auto; align-items: stretch; justify-content: center; overflow: hidden; }
.widget-button .button-element {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
min-height: clamp(44px, var(--row-height, 200px), 160px);
padding: min(var(--button-padding-vertical, 12px), calc(var(--row-height, 200px) * 0.35)) min(var(--button-padding-horizontal, 24px), calc(var(--row-height, 200px) * 0.45));
font-size: min(clamp(10px, 3vw, var(--button-font-size, 18px)), clamp(10px, calc(var(--row-height, 200px) * 0.12), var(--button-font-size, 18px))) !important;
font-weight: var(--button-font-weight, 600);
text-decoration: none;
color: var(--button-text-color, #ffffff);
background: var(--button-background, #2874f0);
border-radius: var(--button-radius, 6px);
border: var(--button-border-width, 0px) solid var(--button-border-color, transparent);
box-shadow: var(--button-shadow, none);
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
box-sizing: border-box;
cursor: pointer;
white-space: nowrap !important;
text-align: center;
flex: 1 1 auto;
overflow: visible;
}
.widget-button .button-element:hover {
background: var(--button-background-hover, var(--button-background, #2874f0));
color: var(--button-text-hover, var(--button-text-color, #ffffff));
box-shadow: var(--button-shadow-hover, var(--button-shadow, none));
transform: translateY(-2px);
}
.widget-button .button-element:focus-visible {
outline: 2px solid rgba(0, 0, 0, 0.35);
outline-offset: 2px;
}
/* Button text groups for positioning */
.widget-button .button-text-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
text-align: center;
min-width: 0;
max-width: 100%;
}
.widget-button .button-text-top {
align-self: flex-start;
width: 100%;
}
.widget-button .button-text-center {
align-self: center;
}
.widget-button .button-text-bottom {
align-self: flex-end;
width: 100%;
}
.widget-button .button-content-center {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
}
.widget-button .button-label {
display: block;
line-height: 1.3;
max-width: 100%;
overflow: visible;
word-wrap: break-word;
overflow-wrap: break-word;
box-sizing: border-box;
}
/* Override inline font-size on button labels to force responsive scaling */
.widget-button .button-label,
.widget-button .button-label-primary,
.widget-button .button-label-secondary {
font-size: min(
clamp(12px, 1.5vw, var(--button-font-size, 18px)),
clamp(12px, calc(var(--row-height, 200px) * 0.12), var(--button-font-size, 18px)),
var(--button-font-size, 18px)
) !important;
white-space: nowrap !important;
overflow: visible;
max-width: 100%;
}
.widget-button .button-label-primary {
font-weight: inherit;
}
.widget-button .button-label-secondary {
opacity: 0.85;
font-weight: 400;
}
.widget-button .button-element.button-style-text {
background: transparent;
padding: 0;
min-height: auto;
height: auto;
box-shadow: none;
border: none;
justify-content: flex-start;
align-self: flex-start;
overflow: visible;
white-space: nowrap !important;
max-width: none;
font-size: clamp(12px, 1.8vw, 22px) !important;
}
/* Text-style buttons must scale font to fit within column */
.widget-button .button-element.button-style-text .button-label {
font-size: clamp(12px, 1.8vw, 22px) !important;
white-space: nowrap !important;
overflow: visible;
}
/* Viewport-based scaling - larger minimums for readability, allow overflow */
.column.span-1 .widget-button .button-label {
font-size: clamp(10px, 0.9vw, 14px) !important;
white-space: nowrap !important;
overflow: visible;
}
.column.span-1 .widget-button .button-element.button-style-text .button-label {
font-size: clamp(10px, 0.9vw, 14px) !important;
white-space: nowrap !important;
overflow: visible;
}
.column.span-2 .widget-button .button-label,
.column.span-2 .widget-button .button-element.button-style-text .button-label {
font-size: clamp(12px, 1.2vw, 16px) !important;
white-space: nowrap !important;
overflow: visible;
}
.column.span-3 .widget-button .button-label,
.column.span-3 .widget-button .button-element.button-style-text .button-label {
font-size: clamp(14px, 1.5vw, 18px) !important;
white-space: nowrap !important;
overflow: visible;
}
.widget-button .button-element.button-style-icon {
background: transparent;
width: auto;
min-width: 44px;
min-height: 44px;
height: auto;
padding: var(--button-padding-vertical, 12px);
border: none;
}
.widget-carousel {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
width: 100%;
max-width: 100%;
height: 100%;
min-height: 200px;
overflow: hidden;
box-sizing: border-box;
isolation: isolate;
flex: 1 1 auto;
}
.widget-carousel .carousel-track {
position: relative;
width: 100%;
max-width: 100%;
height: auto;
min-height: 200px;
display: flex;
align-items: stretch;
-webkit-user-select: none;
user-select: none;
overflow: visible;
}
.widget-carousel .carousel-slide {
position: relative;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
overflow: visible;
border-radius: 6px;
background: transparent;
min-height: 200px;
}
.widget-carousel .carousel-slide > .row {
width: 100%;
/* Allow the row to size based on its content instead of forcing 100% height
which can collapse when child content uses absolute positioning (e.g. responsive iframes). */
height: auto;
min-height: 200px;
align-items: stretch;
}
.widget-carousel .carousel-slide > .row > .column {
/* Let columns size to their content; avoid forcing full height which can cause clipping */
height: auto;
}
.widget-carousel .carousel-slide > .row > .column > .widget {
/* Widgets inside carousel slides should size naturally. Remove max-height constraint. */
height: auto;
max-height: none;
}
.widget-carousel .carousel-slide > * {
pointer-events: none;
}
.widget-carousel .carousel-slide [data-popup-key] {
pointer-events: auto;
}
.widget-carousel .carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 44px;
height: 44px;
border-radius: 999px;
border: none;
background: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 20px;
line-height: 1;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: background 0.2s ease, transform 0.2s ease;
}
.widget-carousel .carousel-arrow:disabled {
opacity: 0.3;
cursor: default;
}
.widget-carousel .carousel-arrow:hover:not(:disabled) {
background: rgba(0, 0, 0, 0.65);
transform: translateY(-50%) scale(1.05);
}
.widget-carousel .carousel-arrow--prev {
left: 12px;
}
.widget-carousel .carousel-arrow--next {
right: 12px;
}
.widget-carousel .carousel-popups {
position: absolute;
inset: 0;
z-index: 4;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
}
.widget-carousel .carousel-popup[hidden] {
display: none !important;
}
.widget-carousel .carousel-popup {
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.55);
pointer-events: auto;
}
.widget-carousel .carousel-popup.is-open .carousel-popup-content {
opacity: 1;
transform: scale(1);
}
.widget-carousel .carousel-popup-content {
position: relative;
max-width: 90%;
max-height: 90%;
background: #ffffff;
border-radius: 10px;
overflow: hidden;
padding: 16px;
box-shadow: 0 14px 48px rgba(0, 0, 0, 0.35);
transition: opacity 0.22s ease, transform 0.22s ease;
opacity: 0;
transform: scale(0.95);
}
.widget-carousel .carousel-popup-close {
position: absolute;
top: 10px;
right: 10px;
width: 36px;
height: 36px;
border: none;
border-radius: 999px;
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
cursor: pointer;
font-size: 20px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
.widget-carousel .carousel-popup-close:hover {
background: rgba(0, 0, 0, 0.8);
}
/* Ensure cc-root/cc-track (script-inserted carousel classes) align with widget-carousel layout
Make the JS track fill the carousel root so items positioned with top/left centering
remain vertically centered and do not get pushed down by surrounding row/column layout. */
.cc-root,
.widget-carousel.cc-root {
position: relative;
/* Allow carousel items to overflow the cell so they remain visible
even when positioned outside the grid cell. Use !important to
override other layout rules that may force hidden overflow. */
overflow: visible !important;
touch-action: none;
z-index: 10;
pointer-events: auto;
height: 100%;
flex: 1 1 auto;
}
.cc-root .cc-track {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
will-change: transform;
}
.cc-root .cc-item {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
will-change: transform, opacity;
overflow: hidden;
}
/* Force images inside carousel items to fit within the item bounds */
.cc-item img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
}
/* Background widgets inside carousel items: scale evenly, don't stretch */
.cc-item .widget-background {
background-size: contain !important;
}
/* Carousel items: make child rows/columns/backgrounds fill the full item size */
.cc-item > .row {
width: 100%;
height: 100%;
min-height: 100% !important;
justify-content: center;
align-items: center;
}
.cc-item > .row > .column {
height: 100%;
min-height: 0;
max-height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.cc-item > .row > .column.column-has-grid {
height: 100%;
max-height: 100%;
position: relative;
}
/* Nested rows inside carousel items: scale down to stay within background */
.cc-item > .row > .column > .row {
flex: 1 1 0;
min-height: 0 !important;
height: auto;
width: 80%;
max-height: 80%;
justify-content: center;
align-items: center;
}
.cc-item > .row > .column > .row > .column {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* Widgets in carousel items fill their container */
.cc-item > .row > .column > .row > .column > .widget {
height: 100%;
max-height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
/* Button clickable area fills the full carousel cell */
.cc-item .widget-button {
width: 100%;
height: 100%;
}
.cc-item .widget-button .button-element {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.cc-item .widget-button .button-content-center {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.cc-item .widget-button .button-image {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.widget-button .button-element.button-style-image {
background: transparent;
padding: 0;
min-height: auto;
height: 100%;
max-height: 100%;
width: 100%;
max-width: 100%;
border: none;
box-shadow: none;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.widget-button .button-element.button-style-image .button-content-center {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
overflow: hidden;
}
.widget-button .button-element.button-style-image .button-image {
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: transparent !important;
isolation: isolate;
}
/* Ensure picture/img inside button-image fill and contain properly */
.widget-button .button-element.button-style-image .button-image picture {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
overflow: hidden;
background: transparent !important;
}
.widget-button .button-element.button-style-image .button-image img {
display: block;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain;
background: transparent !important;
}
.widget-button .button-element.button-style-image-text {
justify-content: center;
}
/* Button with image + text overlay: text sits ON TOP of the image */
.widget-button .button-element.button-image-overlay {
position: relative;
overflow: hidden;
padding: 0; /* image goes edge-to-edge; text has its own padding below */
border-radius: 0; /* no rounded corners so image fills the cell fully */
border: none;
}
/* The .button-image is a direct child of .button-element so inset:0 fills
the entire button area. */
.widget-button .button-element.button-image-overlay > .button-image {
position: absolute;
inset: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
pointer-events: none;
}
.widget-button .button-element.button-image-overlay > .button-image picture,
.widget-button .button-element.button-image-overlay > .button-image img {
display: block;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
max-width: none;
max-height: none;
object-fit: cover;
object-position: center;
border-radius: inherit;
}
/* Text groups sit above the image */
.widget-button .button-element.button-image-overlay .button-content-center,
.widget-button .button-element.button-image-overlay .button-text-group {
position: relative;
z-index: 1;
padding: 6px 12px;
}
/* Push top text to the top edge, bottom text to the bottom edge */
.widget-button .button-element.button-image-overlay .button-text-top {
margin-bottom: auto;
}
.widget-button .button-element.button-image-overlay .button-text-bottom {
margin-top: auto;
}
.widget-button .button-element.button-image-overlay .button-label {
text-shadow:
-1px -1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
1px 1px 0 #fff,
0 -1px 0 #fff,
0 1px 0 #fff,
-1px 0 0 #fff,
1px 0 0 #fff;
}
/* Remove outer widget padding so image-overlay buttons fill the cell edge-to-edge */
.widget.widget-button:has(.button-image-overlay) {
padding: 0 !important;
}
.widget-button .button-icon,
.widget-button .button-label,
.widget-button .button-image {
display: inline-flex;
align-items: center;
}
.widget-button .button-icon i { pointer-events: none; }
.widget-button .button-image {
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
.widget-button .button-image picture {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
overflow: hidden;
}
.widget-button .button-image img {
display: block;
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
object-fit: contain;
}
.widget-button .button-element.button-style-text:hover,
.widget-button .button-element.button-style-icon:hover {
transform: none;
}
.column.column-textual > .widget { padding: 0 6px; }
.column.column-empty {
flex-shrink: 20;
min-width: 5px;
}
@media (max-width: 1200px) {
body:not(.keep-full-aspect-mode) .column.column-textual > .widget { padding: 0 6px; }
.column.column-empty {
flex-shrink: 30;
min-width: 5px;
max-width: 30px;
}
.widget img {
min-width: 20px;
min-height: 10px;
}
.column:has(img) {
min-width: 20px;
flex-shrink: 0;
}
}
@media (max-width: 768px) {
/* Fixed background attachment is unstable on small touch viewports.
Use local scrolling attachment so image framing stays consistent. */
.widget-background[style*="background-attachment: fixed"] {
background-attachment: scroll !important;
background-position: center center !important;
}
body.keep-full-aspect-mode .viewport,
.viewport[data-keep-full-aspect="true"] {
padding: 0 !important;
overflow-x: hidden !important;
}
body.keep-full-aspect-mode .page,
.viewport[data-keep-full-aspect="true"] > .page {
transform-origin: top left;
will-change: transform;
}
body.keep-full-aspect-mode .row,
body.keep-full-aspect-mode .row[data-row-height] {
flex-wrap: nowrap !important;
height: var(--row-height, auto) !important;
min-height: var(--row-height, auto) !important;
max-height: none !important;
}
body.keep-full-aspect-mode .row > .column,
body.keep-full-aspect-mode .row[data-row-height] > .column {
display: flex !important;
height: var(--row-height, auto) !important;
min-height: var(--row-height, auto) !important;
max-height: none !important;
}
body.keep-full-aspect-mode .column[style*="aspect-ratio"],
body.keep-full-aspect-mode .row > .column[style*="aspect-ratio"] {
aspect-ratio: auto !important;
}
body.keep-full-aspect-mode .widget img,
body.keep-full-aspect-mode .widget picture {
max-height: none !important;
}
/* ---------------------------------------------------------------
KEEP-FULL-ASPECT: Full desktop-layout restoration at any width.
These rules cancel every mobile-only override so the page scales
proportionally like a zoomed-out desktop view.
--------------------------------------------------------------- */
/* Viewport: scrollable, no side padding */
body.keep-full-aspect-mode .viewport {
height: auto !important;
min-height: 100vh !important;
overflow-y: auto !important;
padding: 0 !important;
}
/* Empty columns stay visible — they provide structural spacing */
body.keep-full-aspect-mode .column.column-empty {
display: flex !important;
}
/* Text columns: no overflow clipping in keep-full-aspect */
body.keep-full-aspect-mode .column.column-textual {
overflow: visible !important;
min-width: 0 !important;
max-width: 100% !important;
}
/* Image columns: no forced min-width lock */
body.keep-full-aspect-mode .column:has(img) {
min-width: 0 !important;
flex-shrink: 1 !important;
}
/* Rows: restore desktop alignment */
body.keep-full-aspect-mode .row {
align-items: stretch !important;
}
/* Columns: restore desktop flex proportions (undo mobile auto-flex) */
body.keep-full-aspect-mode .column {
flex: 1 1 0 !important;
min-width: 0 !important;
max-width: 100% !important;
}
body.keep-full-aspect-mode .column.span-1 { flex: 1 1 0 !important; }
body.keep-full-aspect-mode .column.span-2 { flex: 2 1 0 !important; }
body.keep-full-aspect-mode .column.span-3 { flex: 3 1 0 !important; }
body.keep-full-aspect-mode .column.span-4 { flex: 4 1 0 !important; }
body.keep-full-aspect-mode .column.span-5 { flex: 5 1 0 !important; }
body.keep-full-aspect-mode .column.span-6 { flex: 6 1 0 !important; }
body.keep-full-aspect-mode .column.span-7 { flex: 7 1 0 !important; }
body.keep-full-aspect-mode .column.span-8 { flex: 8 1 0 !important; }
body.keep-full-aspect-mode .column.span-9 { flex: 9 1 0 !important; }
body.keep-full-aspect-mode .column.span-10 { flex: 10 1 0 !important; }
body.keep-full-aspect-mode .column.span-11 { flex: 11 1 0 !important; }
body.keep-full-aspect-mode .column.span-12 { flex: 12 1 0 !important; }
/* Background columns: stay in-flow (NOT absolute overlay on mobile) */
body.keep-full-aspect-mode .row[data-row-height] > .column:has(> .widget-background):not(.column-has-grid) {
position: relative !important;
top: unset !important;
right: unset !important;
bottom: unset !important;
left: unset !important;
width: auto !important;
height: var(--row-height, 100%) !important;
min-height: var(--row-height, 0) !important;
z-index: 0 !important;
pointer-events: none !important;
}
/* Content columns: maintain normal relative+z-index stacking above bg */
body.keep-full-aspect-mode .row[data-row-height]:has(.widget-background) > .column:not(:has(> .widget-background)),
body.keep-full-aspect-mode .row[data-row-height]:has(.widget-button-layer) > .column:not(:has(> .widget-button-layer)) {
position: relative !important;
z-index: 1 !important;
}
/* Depth-0 rows: use JS-scaled height, don't collapse to auto */
body.keep-full-aspect-mode .row[data-depth="0"],
body.keep-full-aspect-mode .row[data-depth="0"][data-row-height]:has(.widget-background),
body.keep-full-aspect-mode .row[data-depth="0"][data-row-height]:has(.widget-button-layer) {
flex: 0 0 auto !important;
height: var(--row-height, auto) !important;
min-height: var(--row-height, auto) !important;
max-height: none !important;
overflow: visible !important;
}
/* Sticky header columns: no mobile centering override */
body.keep-full-aspect-mode .row[data-sticky] .column:has(.widget-image) {
justify-content: flex-start !important;
align-items: stretch !important;
width: auto !important;
max-width: 100% !important;
}
/* Dynamic-list containers: revert mobile stacking/padding */
body.keep-full-aspect-mode .dynamic-list-container {
padding-left: 0 !important;
padding-right: 0 !important;
}
body.keep-full-aspect-mode .dynamic-list-container[style*="--column-limit: 1"].layout-grid {
display: grid !important;
flex-direction: unset !important;
align-items: unset !important;
}
body.keep-full-aspect-mode .dynamic-list-container .dynamic-list-item {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
display: block !important;
position: relative !important;
}
/* KFA: button images must fit within button bounds — scale evenly,
never overflow the button's height or width. */
body.keep-full-aspect-mode .widget-button .button-image img,
body.keep-full-aspect-mode .widget-button .button-image picture img {
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
display: block !important;
}
body.keep-full-aspect-mode .widget-button .button-image picture {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
overflow: hidden !important;
}
body.keep-full-aspect-mode .widget-button .button-image {
max-width: 100% !important;
max-height: 100% !important;
overflow: hidden !important;
}
/* For style-image buttons (full-area image), the img fills via contain */
body.keep-full-aspect-mode .widget-button .button-element.button-style-image .button-image img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
}
body.keep-full-aspect-mode .widget-button .button-element.button-style-image,
body.keep-full-aspect-mode .widget-button .button-element.button-style-image .button-image {
overflow: hidden !important;
}
/* On mobile, viewport/page must allow natural content flow */
.viewport {
height: auto !important;
min-height: 100vh;
overflow-y: auto !important;
padding: 8px;
}
.page {
height: auto !important;
min-height: auto;
}
.column.column-textual > .widget { padding: 0 6px; }
.column.column-empty {
display: none;
}
.column.column-textual {
overflow: hidden;
min-width: 0;
max-width: 100%;
}
body:not(.keep-full-aspect-mode) .widget.widget-textual {
overflow: hidden;
max-width: 100%;
}
body:not(.keep-full-aspect-mode) .widget.widget-title,
body:not(.keep-full-aspect-mode) .widget.widget-paragraph {
overflow: hidden;
white-space: normal;
max-width: 100%;
}
body:not(.keep-full-aspect-mode) .widget.widget-title > *,
body:not(.keep-full-aspect-mode) .widget.widget-paragraph p {
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
overflow: hidden;
max-width: 100%;
}
body:not(.keep-full-aspect-mode) .widget:not(.widget-button-layer) img:not(.widget-button-layer img) {
min-width: 20px;
min-height: 10px;
/* Prevent images from growing too large on mobile */
max-width: 100%;
max-height: 200px;
}
.column:has(img) {
min-width: 20px;
flex-shrink: 0;
}
.row {
flex-wrap: wrap;
height: auto !important;
min-height: fit-content !important;
max-height: none !important;
}
.row[data-row-height] {
height: auto !important;
min-height: fit-content !important;
max-height: none !important;
}
/* Carousel rows must fill their cc-item, not collapse to auto */
.cc-item > .row,
.cc-item > .row[data-row-height] {
height: 100% !important;
min-height: 100% !important;
max-height: 100% !important;
flex-wrap: nowrap !important;
}
.cc-item > .row > .column,
.cc-item > .row[data-row-height] > .column {
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
}
.cc-item > .row > .column > .row,
.cc-item > .row > .column > .row[data-row-height] {
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
flex-wrap: nowrap !important;
}
/* Rows with a background image: keep their full height on mobile */
.row[data-row-height]:has(.widget-background),
.row[data-row-height]:has(.widget-button-layer) {
min-height: var(--row-height, auto) !important;
position: relative;
}
.row[data-row-height] > .column {
height: auto !important;
min-height: fit-content !important;
max-height: none !important;
}
/* Local List cells must keep their own inner row sizing on mobile.
The generic mobile row/column auto-height overrides collapse the
template subtree inside each dynamic-list-item. */
body:not(.keep-full-aspect-mode) .widget.widget-list.widget-local-list .dynamic-list-item > .row,
body:not(.keep-full-aspect-mode) .widget.widget-list.widget-local-list .dynamic-list-item > .row[data-row-height],
body:not(.keep-full-aspect-mode) .widget.widget-list.widget-local-list .dynamic-list-item > .row[style*="--row-height"] {
flex-wrap: nowrap !important;
height: 100% !important;
min-height: 100% !important;
max-height: 100% !important;
flex: 1 1 auto !important;
}
body:not(.keep-full-aspect-mode) .widget.widget-list.widget-local-list .dynamic-list-item > .row > .column,
body:not(.keep-full-aspect-mode) .widget.widget-list.widget-local-list .dynamic-list-item > .row[data-row-height] > .column,
body:not(.keep-full-aspect-mode) .widget.widget-list.widget-local-list .dynamic-list-item > .row[style*="--row-height"] > .column {
flex-basis: 0 !important;
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
}
body:not(.keep-full-aspect-mode) .widget.widget-list.widget-local-list .dynamic-list-item > .row > .column > .widget,
body:not(.keep-full-aspect-mode) .widget.widget-list.widget-local-list .dynamic-list-item > .row[data-row-height] > .column > .widget,
body:not(.keep-full-aspect-mode) .widget.widget-list.widget-local-list .dynamic-list-item > .row[style*="--row-height"] > .column > .widget {
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
}
/* Background column becomes a full-row overlay on mobile so it doesn't
disrupt the stacking of content columns.
ONLY for columns that are pure background (no grid content inside).
Columns with .column-has-grid contain both the background AND content
rows, so they must stay in normal flow for proper sizing. */
.row[data-row-height] > .column:has(> .widget-background):not(.column-has-grid) {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
z-index: 0;
pointer-events: none;
}
/* Content columns sit above the background */
.row[data-row-height]:has(.widget-background) > .column:not(:has(> .widget-background)),
.row[data-row-height]:has(.widget-button-layer) > .column:not(:has(> .widget-button-layer)) {
position: relative;
z-index: 1;
}
body:not(.keep-full-aspect-mode) .row[data-row-height] > .column > .widget {
height: auto !important;
max-height: none !important;
}
.column {
flex-basis: auto;
}
/* Keep selected row subtrees in desktop-like sizing on mobile */
.row[data-disable-mobile-shrink],
.row[data-disablemobileshrink],
.row[data-disable-mobile-shrink] .row,
.row[data-disablemobileshrink] .row {
flex-wrap: nowrap !important;
height: var(--row-height, auto) !important;
min-height: var(--row-height, auto) !important;
max-height: none !important;
}
.row[data-disable-mobile-shrink] > .column,
.row[data-disablemobileshrink] > .column,
.row[data-disable-mobile-shrink] .row > .column,
.row[data-disablemobileshrink] .row > .column {
display: flex !important;
height: var(--row-height, auto) !important;
min-height: var(--row-height, auto) !important;
max-height: none !important;
}
/* Aspect-ratio locks can force a short column on narrow phones; disable them
for rows explicitly marked as desktop-like mobile layout. */
.row[data-disable-mobile-shrink] > .column[style*="aspect-ratio"],
.row[data-disablemobileshrink] > .column[style*="aspect-ratio"],
.row[data-disable-mobile-shrink] .row > .column[style*="aspect-ratio"],
.row[data-disablemobileshrink] .row > .column[style*="aspect-ratio"] {
aspect-ratio: auto !important;
}
.row[data-disable-mobile-shrink] .column.column-empty,
.row[data-disablemobileshrink] .column.column-empty {
display: flex !important;
}
/* Remove global mobile image cap and let images use full disabled-row space. */
body:not(.keep-full-aspect-mode) .row[data-disable-mobile-shrink] .widget img,
body:not(.keep-full-aspect-mode) .row[data-disablemobileshrink] .widget img {
max-height: none !important;
height: 100% !important;
width: 100% !important;
object-fit: contain !important;
}
body:not(.keep-full-aspect-mode) .row[data-disable-mobile-shrink] .widget picture,
body:not(.keep-full-aspect-mode) .row[data-disablemobileshrink] .widget picture {
width: 100% !important;
height: 100% !important;
}
/* Column-level desktop-like behavior on mobile */
.column[data-disable-mobile-shrink],
.column[data-disablemobileshrink] {
min-height: var(--row-height, auto) !important;
height: var(--row-height, auto) !important;
max-height: none !important;
}
.column[data-disable-mobile-shrink][style*="aspect-ratio"],
.column[data-disablemobileshrink][style*="aspect-ratio"] {
aspect-ratio: auto !important;
}
.column[data-disable-mobile-shrink] .row,
.column[data-disablemobileshrink] .row {
flex-wrap: nowrap !important;
min-height: var(--row-height, auto) !important;
}
body:not(.keep-full-aspect-mode) .column[data-disable-mobile-shrink] .widget img,
body:not(.keep-full-aspect-mode) .column[data-disablemobileshrink] .widget img {
max-height: none !important;
height: 100% !important;
width: 100% !important;
object-fit: contain !important;
}
/* Widget-level desktop-like behavior on mobile */
body:not(.keep-full-aspect-mode) .widget[data-disable-mobile-shrink],
body:not(.keep-full-aspect-mode) .widget[data-disablemobileshrink] {
min-height: var(--row-height, auto) !important;
max-height: none !important;
height: 100% !important;
}
body:not(.keep-full-aspect-mode) .widget[data-disable-mobile-shrink] img,
body:not(.keep-full-aspect-mode) .widget[data-disablemobileshrink] img,
body:not(.keep-full-aspect-mode) .widget[data-disable-mobile-shrink] picture,
body:not(.keep-full-aspect-mode) .widget[data-disablemobileshrink] picture {
max-height: none !important;
height: 100% !important;
width: 100% !important;
}
/* Only wrap columns when there are 2+ non-empty columns.
Use max(min-content, 200px) so multi-column rows wrap/stack on
narrow phones (~375 px) instead of squishing widgets. */
.column:not(.column-empty):not([data-button-layer="true"]):not(:has(> .widget-button-layer)) {
flex: 1 1 auto;
min-width: max(min-content, 200px);
max-width: 100%;
}
.column[data-button-layer="true"] .column:not(.column-empty) {
min-width: 0 !important;
flex-basis: 0 !important;
}
/* Allow columns to wrap naturally based on available space */
.row {
align-items: flex-start;
}
/* Mobile button constraints - fixed heights with scaling images */
body:not(.keep-full-aspect-mode) .widget-button:not(.widget-button-layer) {
width: 100%;
}
/* Image-style buttons (brand logos) - fixed height */
body:not(.keep-full-aspect-mode) .widget-button:not(.widget-button-layer) .button-element.button-style-image {
width: 100% !important;
max-width: 100% !important;
height: 70px !important;
padding: 6px !important;
border-radius: 4px !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Images inside image buttons scale to fit button height */
body:not(.keep-full-aspect-mode) .widget-button:not(.widget-button-layer) .button-style-image .button-image {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
body:not(.keep-full-aspect-mode) .widget-button:not(.widget-button-layer) .button-style-image .button-image picture {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
body:not(.keep-full-aspect-mode) .widget-button:not(.widget-button-layer) .button-style-image .button-image img {
max-width: 100% !important;
max-height: 100% !important;
height: auto !important;
width: auto !important;
object-fit: contain !important;
}
/* Image-text overlay buttons (products) - fixed height */
body:not(.keep-full-aspect-mode) .widget-button:not(.widget-button-layer) .button-element.button-image-overlay {
width: 100% !important;
height: 180px !important;
padding: 8px !important;
border-radius: 4px !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
body:not(.keep-full-aspect-mode) .widget-button:not(.widget-button-layer) .button-element.button-image-overlay .button-image {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
body:not(.keep-full-aspect-mode) .widget-button:not(.widget-button-layer) .button-element.button-image-overlay .button-image img {
max-width: 100% !important;
max-height: 100% !important;
height: auto !important;
width: auto !important;
object-fit: contain !important;
}
body:not(.keep-full-aspect-mode) .widget-button:not(.widget-button-layer) .button-element.button-image-overlay .button-text-group {
flex-shrink: 0;
}
/* Button layers fill their column completely in mobile mode */
.column > .widget-button-layer,
.column[data-button-layer="true"] > .widget-button-layer {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
min-height: 100% !important;
max-height: 100% !important;
z-index: 0 !important;
pointer-events: auto !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
.column > .widget-button-layer .button-element,
.column[data-button-layer="true"] > .widget-button-layer .button-element {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
border-radius: inherit !important;
box-shadow: none !important;
display: block !important;
white-space: normal !important;
}
.column > .widget-button-layer .button-element .button-content-center,
.column > .widget-button-layer .button-element .button-image,
.column > .widget-button-layer .button-element .button-image picture,
.column[data-button-layer="true"] > .widget-button-layer .button-content-center,
.column[data-button-layer="true"] > .widget-button-layer .button-image,
.column[data-button-layer="true"] > .widget-button-layer .button-image picture {
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;
margin: 0 !important;
padding: 0 !important;
}
.column > .widget-button-layer .button-element .button-image img,
.column[data-button-layer="true"] > .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;
}
/* Stacked child rows & columns inside button layer maintain flex layout */
.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;
}
.column[data-button-layer="true"] .row {
width: 100% !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
min-height: 0 !important;
margin: 0 !important;
}
.column[data-button-layer="true"] .column {
display: flex !important;
flex-direction: column !important;
min-width: 0 !important;
min-height: 0 !important;
flex-basis: 0 !important;
box-sizing: border-box !important;
}
.column[data-button-layer="true"] .column.span-1 { flex: 1 1 0% !important; min-width: 0 !important; }
.column[data-button-layer="true"] .column.span-2 { flex: 2 1 0% !important; min-width: 0 !important; }
.column[data-button-layer="true"] .column.span-3 { flex: 3 1 0% !important; min-width: 0 !important; }
.column[data-button-layer="true"] .column.span-4 { flex: 4 1 0% !important; min-width: 0 !important; }
.column[data-button-layer="true"] .column.span-5 { flex: 5 1 0% !important; min-width: 0 !important; }
.column[data-button-layer="true"] .column.span-6 { flex: 6 1 0% !important; min-width: 0 !important; }
.column[data-button-layer="true"] .column.span-7 { flex: 7 1 0% !important; min-width: 0 !important; }
.column[data-button-layer="true"] .column.span-8 { flex: 8 1 0% !important; min-width: 0 !important; }
.column[data-button-layer="true"] .column.span-9 { flex: 9 1 0% !important; min-width: 0 !important; }
.column[data-button-layer="true"] .column.span-10 { flex: 10 1 0% !important; min-width: 0 !important; }
.column[data-button-layer="true"] .column.span-11 { flex: 11 1 0% !important; min-width: 0 !important; }
.column[data-button-layer="true"] .column.span-12 { flex: 12 1 0% !important; min-width: 0 !important; }
.column[data-button-layer="true"] .column.column-has-grid {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
height: 100% !important;
justify-content: flex-start !important;
align-items: stretch !important;
gap: 0 !important;
}
.column[data-button-layer="true"] .column.column-has-grid > .row {
width: 100% !important;
min-height: 0 !important;
flex: 1 1 0% !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
}
.column[data-button-layer="true"] .widget {
width: 100% !important;
min-height: 0 !important;
overflow: visible !important;
}
/* Standard box/text buttons */
body:not(.keep-full-aspect-mode) .widget-button .button-element.button-style-box,
body:not(.keep-full-aspect-mode) .widget-button .button-element.button-style-text {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
padding: 8px 12px !important;
border-radius: 4px !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
overflow: hidden !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
body:not(.keep-full-aspect-mode) .widget-button .button-element:hover {
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16) !important;
}
/* Scale down button text on mobile */
body:not(.keep-full-aspect-mode) .widget-button .button-label {
font-size: 12px !important;
line-height: 1.2 !important;
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
body:not(.keep-full-aspect-mode) .widget-button .button-label-secondary {
font-size: 10px !important;
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Constrain regular widget images (logos, etc) - but NOT carousel images */
body:not(.keep-full-aspect-mode) .widget-image:not(.widget-carousel .widget-image) {
max-height: 80px;
width: 100%;
}
body:not(.keep-full-aspect-mode) .widget-image:not(.widget-carousel .widget-image) picture,
body:not(.keep-full-aspect-mode) .widget-image:not(.widget-carousel .widget-image) img {
max-height: 80px !important;
height: auto !important;
width: auto !important;
object-fit: contain !important;
}
/* Specific constraint for header logo */
body:not(.keep-full-aspect-mode) .row[data-sticky] .widget-image,
body:not(.keep-full-aspect-mode) .row[data-sticky] .widget-image picture,
body:not(.keep-full-aspect-mode) .row[data-sticky] .widget-image img {
max-height: 50px !important;
}
/* Center the logo column on mobile */
.row[data-sticky] .column:has(.widget-image) {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
max-width: 100% !important;
}
body:not(.keep-full-aspect-mode) .row[data-sticky] .widget-image {
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
/* Dynamic list container fixes */
.dynamic-list-container {
width: 100% !important;
padding-left: 8px !important;
padding-right: 8px !important;
gap: 8px !important;
}
/* Single-column dynamic lists (brand logos) - force grid layout override */
.dynamic-list-container[style*="--column-limit: 1"].layout-grid {
display: flex !important;
flex-direction: column !important;
gap: 15px !important;
align-items: stretch !important;
}
/* Single-column dynamic lists (brand logos) - use aspect-ratio */
.dynamic-list-container[style*="--column-limit: 1"] .dynamic-list-item {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin-bottom: 0px !important;
overflow: hidden !important;
display: block !important;
position: relative !important;
flex-shrink: 0 !important;
}
/* Single-column list items - ensure containers support aspect-ratio height */
.dynamic-list-container[style*="--column-limit: 1"] .dynamic-list-item .row {
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
overflow: hidden !important;
}
.dynamic-list-container[style*="--column-limit: 1"] .dynamic-list-item .column {
height: 100% !important;
overflow: hidden !important;
}
body:not(.keep-full-aspect-mode) .dynamic-list-container[style*="--column-limit: 1"] .dynamic-list-item .widget-button {
height: 100% !important;
overflow: hidden !important;
}
/* Brand logo buttons in single-column lists */
body:not(.keep-full-aspect-mode) .dynamic-list-container[style*="--column-limit: 1"] .widget-button .button-element.button-style-image {
height: 100% !important;
max-height: none !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 10px !important;
overflow: hidden !important;
}
body:not(.keep-full-aspect-mode) .dynamic-list-container[style*="--column-limit: 1"] .button-style-image .button-content-center {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
body:not(.keep-full-aspect-mode) .dynamic-list-container[style*="--column-limit: 1"] .button-style-image .button-image {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
body:not(.keep-full-aspect-mode) .dynamic-list-container[style*="--column-limit: 1"] .button-style-image .button-image picture {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
body:not(.keep-full-aspect-mode) .dynamic-list-container[style*="--column-limit: 1"] .button-style-image .button-image img {
max-height: 100% !important;
max-width: 100% !important;
height: auto !important;
width: auto !important;
object-fit: contain !important;
}
/* Multi-column dynamic lists (products) - maintain minimum height with dynamic growth */
body:not(.keep-full-aspect-mode) .dynamic-list-container[style*="--column-limit: 3"] .dynamic-list-item,
body:not(.keep-full-aspect-mode) .dynamic-list-container[style*="--column-limit: 2"] .dynamic-list-item {
min-height: 150px !important; /* Prevents shrinking below standard row height */
}
/* Product image-overlay buttons in multi-column grids */
body:not(.keep-full-aspect-mode) .dynamic-list-container[style*="--column-limit: 3"] .button-element.button-image-overlay,
body:not(.keep-full-aspect-mode) .dynamic-list-container[style*="--column-limit: 2"] .button-element.button-image-overlay {
height: 100% !important;
width: 100% !important;
min-height: 150px !important; /* Standard minimum height for product cells */
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
}
/* Carousel specific fixes for mobile */
/* Prevent the global collapse/height overrides from affecting carousel widgets */
body:not(.keep-full-aspect-mode) .widget-carousel,
body:not(.keep-full-aspect-mode) .widget-carousel .carousel-track,
body:not(.keep-full-aspect-mode) .widget-carousel .carousel-slide,
body:not(.keep-full-aspect-mode) .widget-carousel .carousel-slide > .row,
body:not(.keep-full-aspect-mode) .widget-carousel .carousel-slide > .row > .column,
body:not(.keep-full-aspect-mode) .widget-carousel .carousel-slide > .row > .column > .widget,
body:not(.keep-full-aspect-mode) .cc-root {
height: auto !important;
min-height: 200px !important;
max-height: none !important;
overflow: visible !important;
}
/* Carousel images should be full-size, not constrained */
body:not(.keep-full-aspect-mode) .widget-carousel .widget-image,
body:not(.keep-full-aspect-mode) .carousel-slide .widget-image {
max-height: none !important;
min-height: 200px !important;
height: auto !important;
width: 100% !important;
}
body:not(.keep-full-aspect-mode) .widget-carousel .widget-image picture,
body:not(.keep-full-aspect-mode) .widget-carousel .widget-image img,
body:not(.keep-full-aspect-mode) .carousel-slide .widget-image picture,
body:not(.keep-full-aspect-mode) .carousel-slide .widget-image img {
max-height: none !important;
min-height: 200px !important;
height: auto !important;
width: 100% !important;
object-fit: cover !important;
}
/* Ensure carousel controls remain positioned correctly */
body:not(.keep-full-aspect-mode) .widget-carousel .carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/* ---------------------------------------------------------------
MOBILE: depth-0 rows must grow to fit stacked content
Desktop flex proportions (flex: N 1 0%) don't work when columns
wrap vertically, so switch to auto-sizing.
The second selector overrides the background row min-height rule
which has higher specificity.
--------------------------------------------------------------- */
.row[data-depth="0"],
.row[data-depth="0"][data-row-height]:has(.widget-background),
.row[data-depth="0"][data-row-height]:has(.widget-button-layer) {
flex: 0 0 auto !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
overflow: visible !important;
}
/* Max-Height Mode: JS calculates the row height from the image aspect ratio
so the background image fills the row width completely.
High specificity + !important needed to beat the depth-0 auto reset above. */
.row[data-max-height-applied]:has(.widget-background[data-bg-max-height]) {
height: var(--max-height-size) !important;
min-height: var(--max-height-size) !important;
max-height: none !important;
flex: 0 0 auto !important;
overflow: hidden !important;
}
.row[data-max-height-applied]:has(.widget-background[data-bg-max-height]) > .column:has(> .widget-background) {
height: 100% !important;
min-height: 100% !important;
max-height: 100% !important;
overflow: hidden !important;
}
.row[data-max-height-applied]:has(.widget-background[data-bg-max-height]) > .column.column-has-grid {
height: 100% !important;
min-height: 100% !important;
max-height: 100% !important;
overflow: hidden !important;
}
.row[data-max-height-applied]:has(.widget-background[data-bg-max-height]) > .column.column-has-grid > .row,
.row[data-max-height-applied]:has(.widget-background[data-bg-max-height]) > .column.column-has-grid > .row[data-row-height] {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
flex: 0 0 auto !important;
overflow: visible !important;
}
.row[data-max-height-applied]:has(.widget-background[data-bg-max-height]) > .column.column-has-grid > .row > .column,
.row[data-max-height-applied]:has(.widget-background[data-bg-max-height]) > .column.column-has-grid > .row[data-row-height] > .column {
min-height: 0 !important;
max-height: none !important;
}
.row[data-max-height-applied]:has(.widget-background[data-bg-max-height]) .row[data-row-height] > .column {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
}
.row[data-max-height-applied]:has(.widget-background[data-bg-max-height]) .row[data-row-height] > .column > .widget {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
}
.row[data-max-height-applied]:has(.widget-background[data-bg-max-height]) .widget-background[data-bg-max-height] {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
background-size: 100% auto !important;
background-position: center top !important;
background-repeat: no-repeat !important;
}
/* Sticky rows: remove clipping so forms/widgets are fully visible */
.row[data-sticky] {
max-height: none !important;
overflow: visible !important;
}
/* Form and local-data widgets must not clip their content on mobile */
body:not(.keep-full-aspect-mode) .widget-form,
body:not(.keep-full-aspect-mode) .form-container,
body:not(.keep-full-aspect-mode) .widget-local-data {
overflow: visible !important;
}
/* Local data widget: ensure cells are visible on mobile.
The widget's inline height (e.g. 300px) gets reset to auto by the
mobile .widget rule above, and grid-auto-rows:1fr collapses to 0.
Force auto sizing so cells show their content. */
body:not(.keep-full-aspect-mode) .widget-table.local-data-widget {
height: auto !important;
min-height: auto !important;
max-height: none !important;
overflow: visible !important;
}
body:not(.keep-full-aspect-mode) .widget-table.local-data-widget .local-data-grid {
height: auto !important;
grid-auto-rows: auto !important;
}
body:not(.keep-full-aspect-mode) .widget-table.local-data-widget .local-data-cell {
overflow: visible !important;
min-height: 40px !important;
height: auto !important;
}
body:not(.keep-full-aspect-mode) .widget-table.local-data-widget .local-data-cell .row {
height: auto !important;
min-height: auto !important;
max-height: none !important;
}
/* Override table-widget.css flex-basis:0%/min-height:0 rules (specificity 0,5,0)
that collapse rows to 0 height in auto-height mobile context.
Need specificity > 0,5,0 AND > table-widget.css load order. */
body:not(.keep-full-aspect-mode) .widget-table.local-data-widget[data-rowheight="0"] .table-grid .local-data-cell .row {
flex-basis: auto !important;
flex-grow: 0 !important;
min-height: fit-content !important;
}
body:not(.keep-full-aspect-mode) .widget-table.local-data-widget .local-data-cell .column {
height: auto !important;
min-height: auto !important;
max-height: none !important;
}
/* Override table-widget.css Issue #3 rule (specificity 0,7,0) on mobile.
On desktop the cell has a fixed grid height so height:100%/flex:1 1 0 works.
On mobile the cell is height:auto so flex:1 1 0 + min-height:0 collapses to 0. */
body:not(.keep-full-aspect-mode) .widget-table.local-data-widget .local-data-grid > .column.local-data-cell > .row[data-depth]:first-child {
height: auto !important;
min-height: fit-content !important;
flex: 1 1 auto !important;
}
}
/* ============================================================
Menu Lists Overflow Overrides
Keep menu-list related rows/columns from clipping flyout menus.
============================================================ */
.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;
}
/* ===================================================================
GLOBAL TEXT OVERFLOW PROTECTION
=================================================================== */
/* Ensure ALL text elements never exceed their container bounds */
* {
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6, p, span, div, a, label, button {
max-width: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
}
/* Ensure form and local data widgets don't push their columns wider than siblings */
.widget-form,
.widget-local-data {
min-width: 0;
overflow: hidden;
box-sizing: border-box;
}
/* Constrain all form controls and match dynamic-dropdown styling */
.form-input,
.form-textarea,
.form-select {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 0.5rem;
font-size: 1rem;
font-family: inherit;
border: 1px solid #ccc;
border-radius: 4px;
background: white;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
.form-input::placeholder,
.form-textarea::placeholder {
color: #999;
font-style: italic;
}
.form-container {
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
/* Reduce vertical spacing between widgets inside form/forum layouts so fields pack tightly */
.form-fields {
display: flex;
flex-direction: column;
gap: 8px; /* small gap between rows/widgets */
}
.form-fields > .row {
gap: 8px; /* reduce inter-column gap for compact form rows */
margin-bottom: 0; /* rely on container gap instead of row margins */
}
.form-fields > .row > .column {
gap: 8px; /* reduce spacing between elements inside columns for forms */
}
.form-fields .widget { margin: 0 0 8px 0; }
/* Small gap for form action buttons so submit/reset aren't flush to the form */
.form-container .form-actions {
margin-top: 8px;
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
}
/* Allow form rows with inline --row-height to size to their content inside form-fields */
.form-fields .row[data-row-height] {
height: auto !important;
min-height: fit-content !important;
max-height: none !important;
flex: 0 0 auto !important;
/* override any inline row height variable so CSS rules use auto sizing */
--row-height: auto !important;
}
.form-fields .row[data-row-height] > .column {
height: auto !important;
min-height: fit-content !important;
max-height: none !important;
}
.form-fields .row[data-row-height] > .column > .widget {
height: auto !important;
max-height: none !important;
}
.form-fields .row[data-row-height] img {
max-height: none !important;
}
/* ===================================================================
STICKY ROW STYLES
=================================================================== */
.row[data-sticky] {
max-height: 25vh;
overflow: hidden;
}
/* Fixed clone that follows the viewport */
.row[data-sticky].sticky-clone {
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.row[data-sticky].sticky-clone.sticky-hidden {
transform: translateY(-100%);
opacity: 0;
pointer-events: none;
}
.row[data-sticky="bottom"].sticky-clone.sticky-hidden {
transform: translateY(100%);
}
/* Per-row toggle button */
.sticky-toggle-btn {
position: fixed;
right: 12px;
width: 34px;
height: 34px;
background: rgba(33,150,243,0.9);
color: #fff;
border: none;
border-radius: 6px;
cursor: pointer;
z-index: 10001;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
line-height: 1;
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
transition: background 0.2s ease, transform 0.2s ease;
}
.sticky-toggle-btn:hover {
background: rgba(25,118,210,0.95);
transform: scale(1.1);
}
.sticky-toggle-btn.hidden-state {
background: rgba(100,100,100,0.75);
}
/* During active window resize, disable transition-heavy effects that can
produce flicker/artifacts while images are being refreshed. */
body.resizing-active .row[data-sticky].sticky-clone,
body.resizing-active .sticky-toggle-btn,
body.resizing-active .widget-image,
body.resizing-active .widget-image picture,
body.resizing-active .widget-image img,
body.resizing-active .widget-background {
transition: none !important;
}
/* Disable sticky on small / medium screens */
@media (max-width: 991px) {
.row[data-sticky].sticky-clone,
.sticky-toggle-btn {
display: none !important;
}
}
/* Final PageBuilder draw-on-top overflow override.
Must stay late so mobile, sticky, form, and table sizing rules cannot re-clip
widgets that explicitly opt into drawing outside their row/cell. */
.row[data-has-draw-on-top="true"],
.row[data-has-draw-on-top="true"] > .column,
.column[data-has-draw-on-top="true"],
.column[data-has-draw-on-top="true"] > .widget,
[data-enforceDrawOnTop="True"],
[data-enforcedrawontop="True"],
[data-enforce-draw-on-top="true"] {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
clip-path: none !important;
max-height: none !important;
}