/* Lavender Lotus Studio 8.8.9 — responsive luxury workspace repair */
html,body{max-width:100%;overflow-x:hidden}
#content,.content,.v8-page,.vdp-content-wide{min-width:0;max-width:100%;box-sizing:border-box}
img,svg,video,canvas{max-width:100%}

/* Design Studio: never let controls or rails disappear off-screen. */
.vdp-mode-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;overflow:visible}
.vdp-mode-tabs button{flex:1 1 150px;min-width:0;white-space:normal;text-align:center}
.vdp-board-header{min-width:0}
.vdp-board-header>*{min-width:0}
.vdp-board-actions,.vdp-board-chooser,.vdp-project-create-actions{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.vdp-board-actions .button,.vdp-project-create-actions .button{white-space:nowrap}
.vdp-board-chooser{width:100%}
.vdp-board-chooser label{flex:1 1 210px;min-width:0}
.vdp-board-chooser select,.vdp-project-link select{width:100%;max-width:100%;min-width:0}

.vdp-scene-toolbar{min-width:0}
.vdp-scene-left,.vdp-scene-center,.vdp-scene-right{min-width:0;flex-wrap:wrap}
.vdp-scene-center select{max-width:100%;min-width:0}

.vdp-panel-tabs,.vdp-panel-tabs-5{display:flex!important;flex-wrap:wrap!important;gap:5px!important;grid-template-columns:none!important;padding:7px!important}
.vdp-panel-tabs button,.vdp-panel-tabs-5 button{flex:1 1 72px!important;min-width:62px!important;padding:9px 6px!important;white-space:normal!important;line-height:1.15!important}
.vdp-source-filter{display:flex;gap:7px;padding:10px 10px 2px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}
.vdp-source-filter button{flex:0 0 auto;border:1px solid var(--border);background:#fff;color:var(--muted);border-radius:999px;padding:8px 12px;font-size:.62rem;font-weight:800;white-space:nowrap}
.vdp-source-filter button.active{background:#563748;color:#fff;border-color:#563748}
.vdp-asset-filters{grid-template-columns:minmax(0,1fr)!important}
.vdp-asset-filters .inline-search{grid-column:auto!important;min-width:0}
.vdp-asset-filters input,.vdp-asset-filters select{width:100%;min-width:0;max-width:100%}
.vdp-assets-panel,.vdp-left-rail,.vdp-inspector,.vdp-canvas-column,.vdp-stage-card{min-width:0;max-width:100%}
.vdp-asset-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.vdp-asset-card{width:100%;min-width:0}
.vdp-asset-copy strong,.vdp-asset-copy small{max-width:100%}
.vdp-asset-actions button{min-width:0;overflow:hidden;text-overflow:ellipsis}
.vdp-stage-viewport{width:100%;max-width:100%;box-sizing:border-box}

/* Large desktop: balanced three-column editor. */
@media(min-width:1551px){
  .content.vdp-content-wide{padding-left:24px!important;padding-right:24px!important}
  .vdp-workspace{grid-template-columns:minmax(290px,320px) minmax(520px,1fr) minmax(280px,320px);gap:16px}
  .vdp-board-header{grid-template-columns:minmax(250px,.9fr) minmax(390px,1.15fr) minmax(260px,.75fr)}
}

/* Normal laptops and browser zoom: canvas stays primary, inspector moves below. */
@media(min-width:1181px) and (max-width:1550px){
  .content.vdp-content-wide{padding-left:18px!important;padding-right:18px!important}
  .vdp-board-header{grid-template-columns:minmax(0,1fr) minmax(360px,1.1fr)}
  .vdp-board-actions{grid-column:1/-1;justify-content:flex-end}
  .vdp-workspace{grid-template-columns:minmax(270px,310px) minmax(0,1fr);gap:14px}
  .vdp-left-rail{grid-column:1;grid-row:1}
  .vdp-canvas-column{grid-column:2;grid-row:1}
  .vdp-inspector{grid-column:1/-1;grid-row:2;position:static!important;max-height:none!important;overflow:visible!important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
  .vdp-inspector-section{min-width:0;border-right:1px solid var(--border)}
  .vdp-inspector-section:nth-child(3n){border-right:0}
  .vdp-stage-viewport{min-height:560px;max-height:72vh}
}

/* Smaller laptops: stack in a useful order rather than clipping. */
@media(min-width:821px) and (max-width:1180px){
  .vdp-workspace{display:flex!important;flex-direction:column!important}
  .vdp-canvas-column{order:1;width:100%}
  .vdp-left-rail{order:2;position:static!important;width:100%;max-height:none!important;overflow:visible!important}
  .vdp-inspector{order:3;position:static!important;width:100%;max-height:none!important;overflow:visible!important}
  .vdp-asset-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Floral Library: no cut-off horizontal showcase. */
.portfolio-featured-preview{max-width:100%;min-width:0}
.portfolio-featured-preview button{min-width:0}
.portfolio-library-groups,.portfolio-library-grid,.v8-floral-grid{min-width:0;max-width:100%}
.portfolio-library-card,.v8-floral-card{min-width:0;max-width:100%}
@media(min-width:761px) and (max-width:1300px){
  .portfolio-library-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .v8-floral-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:760px){
  .portfolio-featured-preview{grid-template-columns:1fr 1fr!important;grid-template-rows:repeat(2,130px)!important;min-height:0!important}
  .portfolio-featured-preview button:first-child{grid-row:auto!important}
}

/* Keep every action row readable at increased browser zoom. */
.toolbar,.toolbar-left,.toolbar-right,.hero-actions,.v8-library-toolbar{min-width:0;max-width:100%;flex-wrap:wrap}
.button{max-width:100%}

/* 8.8.9 — root viewport containment and desktop reflow repair */
*,*::before,*::after{box-sizing:border-box}
html,body{width:100%;max-width:100%;overflow-x:hidden!important}
.app-shell{width:100%;max-width:100%;min-width:0}
.main-shell{margin-left:0!important;width:auto!important;min-width:0!important;max-width:100%!important;overflow-x:clip}
.topbar,.content{width:100%;min-width:0;max-width:100%}
.content>*{min-width:0;max-width:100%}

/* Every desktop page must reflow inside the space remaining after the sidebar. */
.settings-grid,.form-grid,.account-panel,.stack,.panel,.panel-pad,.policy-grid,.setting-row{min-width:0;max-width:100%}
.settings-grid{grid-template-columns:minmax(0,1.45fr) minmax(280px,.72fr)!important;align-items:start}
.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.field,.field input,.field select,.field textarea{min-width:0;max-width:100%;width:100%}
.account-summary{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
.account-copy{min-width:0}
.account-copy h2,.account-copy p{overflow-wrap:anywhere}

/* The designer uses the actual available width, never an implied viewport width. */
.content.vdp-content-wide{width:100%!important;max-width:100%!important;overflow:visible!important}
.vdp-board-header,.vdp-scene-toolbar,.vdp-workspace{width:100%!important;max-width:100%!important;min-width:0!important}
.vdp-workspace>*{min-width:0!important;max-width:100%}
.vdp-board-header{overflow:visible}
.vdp-title-block,.vdp-project-link,.vdp-board-actions{min-width:0}
.vdp-board-actions{justify-content:flex-end}
.vdp-scene-toolbar{display:flex!important;flex-wrap:wrap!important}
.vdp-scene-left,.vdp-scene-center,.vdp-scene-right{flex:1 1 auto;max-width:100%}
.vdp-scene-center{justify-content:center}
.vdp-scene-right{justify-content:flex-end}
.vdp-left-rail,.vdp-canvas-column,.vdp-inspector{width:auto!important}
.vdp-assets-panel{overflow:hidden}
.vdp-panel-tabs,.vdp-source-filter{max-width:100%}
.vdp-source-filter{padding-bottom:8px}
.vdp-asset-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:4px!important}
.vdp-asset-actions button{width:100%!important;white-space:normal!important;line-height:1.1!important;padding:7px 3px!important}

/* Switch earlier based on the real content width after the 226–246px navigation rail. */
@media(min-width:901px) and (max-width:1399px){
  .content{padding-left:18px!important;padding-right:18px!important}
  .settings-grid{grid-template-columns:1fr!important}
  .settings-grid>aside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .vdp-board-header{grid-template-columns:1fr!important}
  .vdp-board-actions{grid-column:auto!important;justify-content:flex-start!important}
  .vdp-workspace{display:flex!important;flex-direction:column!important}
  .vdp-canvas-column{order:1;width:100%!important}
  .vdp-left-rail{order:2;position:static!important;width:100%!important;max-height:none!important;overflow:visible!important}
  .vdp-inspector{order:3;position:static!important;width:100%!important;max-height:none!important;overflow:visible!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .vdp-asset-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;max-height:540px;overflow-y:auto}
}

@media(min-width:1400px) and (max-width:1750px){
  .vdp-workspace{grid-template-columns:minmax(250px,285px) minmax(0,1fr)!important}
  .vdp-left-rail{grid-column:1;grid-row:1}
  .vdp-canvas-column{grid-column:2;grid-row:1}
  .vdp-inspector{grid-column:1/-1;grid-row:2;position:static!important;max-height:none!important;overflow:visible!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

@media(max-width:900px){
  .form-grid{grid-template-columns:1fr!important}
  .settings-grid>aside{display:grid;grid-template-columns:1fr}
  .account-summary{grid-template-columns:auto minmax(0,1fr)}
  .account-signout{grid-column:1/-1;width:100%}
}
