/* Shared presentation layout. Native settings overflow on desktop; native page scroll on touch. */
/* Avada sets body overflow:hidden scroll while HTML is the actual scroller.
   Do not create a non-scrolling sticky ancestor; retain existing modal locks. */
body.cssa-app-body:has(.cssa-scroll-layout[data-personalization-scroll]):not(.cssa-preview-open):not(.cssa-share-open):not(.cssa-diamond-dialog-open):not(.cssa-stitching-help-open){overflow-x:clip;overflow-y:visible}
.cssa-scroll-layout[data-personalization-scroll]{min-width:0;min-height:0;overflow:visible;contain:none}
.cssa-scroll-layout>.cssa-scroll-preview,.cssa-scroll-layout>.cssa-scroll-settings{box-sizing:border-box;min-width:0;min-height:0}
.cssa-scroll-layout[data-personalization-scroll="desktop"]{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,420px);align-items:stretch}
.cssa-scroll-layout[data-personalization-scroll="desktop"]>.cssa-scroll-preview{position:relative;top:auto;align-self:start;height:var(--cssa-workspace-height);min-height:0;max-height:none;display:flex;flex-direction:column;overflow:hidden}
.cssa-scroll-layout[data-personalization-scroll="desktop"]>.cssa-scroll-settings{height:var(--cssa-workspace-height);max-height:var(--cssa-workspace-height);padding:14px;overflow-y:scroll;overflow-x:clip;overscroll-behavior-y:auto;scrollbar-gutter:stable;scroll-behavior:auto;scroll-padding-block:64px;scrollbar-width:auto;scrollbar-color:auto}
.cssa-scroll-layout[data-personalization-scroll="desktop"] .cssa-scroll-viewer{flex:1;min-height:0;height:0;max-height:none}
.cssa-scroll-settings:focus-visible{outline:2px solid var(--cssa-brand-accent,#9a741d);outline-offset:2px}
.cssa-scroll-layout .cssa-family-live__canvas{display:grid;place-items:center;overflow:hidden}
.cssa-scroll-layout .cssa-family-visual-canvas{flex:none}
@media(prefers-reduced-motion:reduce){.cssa-scroll-settings{scroll-behavior:auto!important}}

.cssa-scroll-layout>.cssa-family-question{padding-bottom:max(60px,calc(var(--cssa-scroll-bottom,0px) + 16px))}


/* Touch/narrow layout restores the pre-compact normal document flow. The
   preview and its original tools scroll naturally; keyboard does not pin it. */
.cssa-scroll-layout[data-personalization-scroll="flow"]{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:12px}
.cssa-scroll-layout[data-personalization-scroll="flow"]>.cssa-scroll-preview{position:static;top:auto;height:auto;max-height:none;min-height:0;overflow:visible;display:flex;flex-direction:column}
.cssa-scroll-layout[data-personalization-scroll="flow"]>.cssa-scroll-settings{height:auto;max-height:none;overflow:visible;scroll-behavior:auto}
.cssa-scroll-layout[data-personalization-scroll="flow"] .cssa-scroll-viewer{flex:none;width:100%;height:clamp(260px,55svh,520px);min-height:0;max-height:none;touch-action:pan-y pinch-zoom}
.cssa-scroll-layout[data-personalization-scroll="flow"] .cssa-scroll-viewer:is(.is-primary-zoomed,[data-dp-zoomed]){touch-action:none}
.cssa-settings-guide{display:none}
.cssa-scroll-layout[data-personalization-scroll="desktop"] .cssa-settings-guide{position:sticky;top:-14px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:8px 0;margin:-2px 0 10px;background:#fff;border-bottom:1px solid #d3dbe5;color:var(--cssa-brand-primary,#132d49);font-size:15px}
.cssa-settings-more{font-size:12px;font-weight:500;color:#53647b;white-space:nowrap;visibility:hidden}
.cssa-settings-guide[data-more] .cssa-settings-more{visibility:visible}
.cssa-settings-about{margin:0 0 12px;padding:8px 10px;border:1px solid #dce2e9;border-radius:8px}
.cssa-settings-about>summary{font-size:13px;cursor:pointer;color:#354b67}
.cssa-scroll-layout[data-personalization-scroll="desktop"]>.cssa-scroll-settings>.cssa-settings-about{display:block}
.cssa-settings-about .cssa-page-title{font-size:22px;line-height:1.25;margin:10px 0}
.cssa-scroll-layout[data-personalization-scroll="desktop"] .cssa-scroll-settings::-webkit-scrollbar{width:12px}
.cssa-scroll-layout[data-personalization-scroll="desktop"] .cssa-scroll-settings::-webkit-scrollbar-track{background:#edf1f5;border-radius:8px}
.cssa-scroll-layout[data-personalization-scroll="desktop"] .cssa-scroll-settings::-webkit-scrollbar-thumb{background:#64768e;border:3px solid #edf1f5;border-radius:8px}
.cssa-scroll-layout[data-personalization-scroll="desktop"] .cssa-personalizer-section{padding:10px;margin-top:6px}
.cssa-scroll-layout[data-personalization-scroll="desktop"] .cssa-personalizer-section-head{margin-bottom:8px;gap:8px}
.cssa-scroll-layout[data-personalization-scroll="desktop"] .cssa-personalizer-section-head h2{font-size:17px;margin:0}
.cssa-scroll-layout[data-personalization-scroll="desktop"] .cssa-personalizer-section-head p{font-size:12px;margin:2px 0}
.cssa-scroll-layout[data-personalization-scroll="flow"] .cssa-scroll-settings :is(input,textarea,select,button){scroll-margin-block:100px 24px;max-width:100%}
@supports(-moz-appearance:none){.cssa-scroll-layout[data-personalization-scroll="desktop"]>.cssa-scroll-settings{scrollbar-color:#64768e #edf1f5}}
.cssa-scroll-layout[data-personalization-scroll="desktop"][data-preview-tight] .cssa-diamond-preview-title{grid-template-columns:minmax(0,1fr) auto}
.cssa-scroll-layout[data-personalization-scroll="desktop"][data-preview-tight] .cssa-diamond-preview-title small{grid-column:1;grid-row:1}
.cssa-scroll-layout[data-personalization-scroll="desktop"][data-preview-tight] .cssa-diamond-preview-title strong{grid-column:1;grid-row:2}
.cssa-scroll-layout[data-personalization-scroll="desktop"][data-preview-tight] .cssa-diamond-preview-title [data-dp-enlarge]{grid-column:2;grid-row:1/3;align-self:center;font-size:13px}
.cssa-scroll-layout[data-personalization-scroll="desktop"][data-preview-tight] .cssa-diamond-toolbar{flex-wrap:nowrap;gap:4px;padding:6px;margin-block:8px 0;flex:none}
.cssa-scroll-layout[data-personalization-scroll="desktop"][data-preview-tight] .cssa-diamond-toolbar button{font-size:13px;padding:6px;min-height:40px}
.cssa-scroll-layout[data-personalization-scroll="desktop"][data-preview-tight] .cssa-diamond-zoom-label{min-width:0;flex:1 1 100px;gap:4px;font-size:12px}
.cssa-scroll-layout[data-personalization-scroll="desktop"][data-preview-tight] .cssa-diamond-zoom-label input{min-width:30px;width:100%}

.cssa-finished-dimensions{display:grid;gap:3px;margin:14px 0 0;padding:10px;border:1px solid #dce2e9;border-radius:8px;font-size:13px}.cssa-finished-dimensions small{font-size:11px;line-height:1.4;color:#536478}

.cssa-diamond-layout[data-personalization-scroll="flow"] .cssa-diamond-viewport.cssa-scroll-viewer{height:clamp(200px,42svh,480px)}