/* Lavender Lotus Studio 8.9.3 — QA-verified responsive containment */
*,*::before,*::after{box-sizing:border-box}
html,body{width:100%;max-width:100%;overflow-x:hidden!important}
.app-shell,.main-shell,.topbar,.content,.content>*,.v8-page,.v8-page>*{min-width:0!important;max-width:100%!important}
.main-shell{width:auto!important;margin-left:0!important;overflow-x:clip!important}
.content{width:100%!important}
img,svg,video,canvas{max-width:100%}

/* Floral Library: a horizontal carousel may scroll inside its own row, but it
   must never enlarge the page or push the rest of the interface off-screen. */
.v8-page{width:100%!important;grid-template-columns:minmax(0,1fr)!important}
.v8-page-hero,.v8-signature-library,.v8-library-toolbar,.v8-floral-grid{width:100%!important;min-width:0!important;max-width:100%!important}
.v8-page-hero h2,.v8-page-hero p{max-width:100%!important;overflow-wrap:anywhere}
.v8-signature-library{overflow:hidden!important}
.v8-signature-library>header{min-width:0!important;max-width:100%!important}
.v8-signature-library>header>div{min-width:0!important}
.v8-signature-library h3,.v8-signature-library p{max-width:100%!important;overflow-wrap:anywhere}
.v8-signature-row{width:100%!important;min-width:0!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;grid-auto-columns:clamp(185px,24%,240px)!important;overscroll-behavior-inline:contain}
.v8-library-toolbar>*{min-width:0!important;max-width:100%!important}
.v8-library-toolbar input,.v8-library-toolbar select{width:100%!important;min-width:0!important;max-width:100%!important}
.v8-floral-grid{overflow:visible!important}

/* Weddings / Projects: show every pipeline stage without hiding half the
   workflow beyond the right edge. */
.pipeline-board{width:100%!important;max-width:100%!important;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important;overflow-x:visible!important;align-items:start}
.pipeline-column{min-width:0!important;width:auto!important}
.pipeline-head strong{overflow-wrap:anywhere}
@media(max-width:560px){.pipeline-board{grid-template-columns:minmax(0,1fr)!important}.pipeline-column{min-height:0!important}}

/* Pricing: use premium summary cards on normal laptops and scaled displays.
   The wide financial table is reserved for genuinely wide monitors. */
@media(max-width:1550px){
  .pricing-desktop-table{display:none!important}
  .pricing-mobile-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 14px}
  .pricing-mobile-card{display:grid!important}
  .pricing-show-more{display:flex!important}
}
@media(max-width:760px){.pricing-mobile-list{grid-template-columns:minmax(0,1fr)!important}}
@media(min-width:1551px){
  .pricing-table{width:100%!important;min-width:0!important;table-layout:fixed}
  .pricing-table th,.pricing-table td{white-space:normal!important;overflow-wrap:anywhere}
  .pricing-table th:first-child,.pricing-table td:first-child{width:28%}
  .pricing-table th:last-child,.pricing-table td:last-child{width:52px}
}
.data-table-wrap{width:100%!important;max-width:100%!important;min-width:0!important}

/* Design Studio and settings: all columns can shrink and controls wrap. */
.vdp-board-header,.vdp-scene-toolbar,.vdp-workspace,.vdp-workspace>*,.vdp-left-rail,.vdp-canvas-column,.vdp-inspector,.vdp-assets-panel{min-width:0!important;max-width:100%!important}
.vdp-board-actions,.vdp-board-chooser,.vdp-project-create-actions,.vdp-scene-left,.vdp-scene-center,.vdp-scene-right{flex-wrap:wrap!important;min-width:0!important}
.settings-grid,.form-grid,.account-panel,.setting-row,.settings-grid>*{min-width:0!important;max-width:100%!important}
.field input,.field select,.field textarea{width:100%!important;min-width:0!important;max-width:100%!important}

/* General action and modal containment. */
.toolbar,.toolbar-left,.toolbar-right,.topbar-actions,.hero-actions,.detail-actions{min-width:0!important;max-width:100%!important;flex-wrap:wrap!important}
.dialog-layer .modal,.search-dialog{max-width:calc(100vw - 24px)!important}
.button,button,input,select,textarea{max-width:100%}

@media(max-width:900px){
  .v8-page-hero{padding:34px 22px!important}
  .v8-page-hero h2{font-size:clamp(2.55rem,12vw,3.65rem)!important}
  .v8-signature-library{padding:18px 14px!important}
  .v8-signature-library>header{display:block!important}
  .v8-signature-row{grid-auto-columns:minmax(185px,72%)!important}
}

/* Medium-screen pricing cards need the same finished visual system as mobile. */
@media(min-width:721px) and (max-width:1550px){
  .pricing-mobile-card{position:relative;display:grid!important;gap:12px;padding:18px;border:1px solid rgba(100,76,87,.16);border-radius:22px;background:rgba(255,255,255,.94);box-shadow:0 14px 34px rgba(48,34,40,.07);overflow:hidden}
  .pricing-mobile-card::before{content:'';position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#725263,#b793a1,#d4c4b7)}
  .pricing-mobile-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
  .pricing-mobile-card header>div{min-width:0}
  .pricing-mobile-category{display:block;margin-bottom:5px;color:#8b727c;font-size:.58rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
  .pricing-mobile-card h3{margin:0;font-family:var(--v8-display,Georgia,serif);font-size:1.35rem;line-height:1.08;color:#2f2529}
  .pricing-mobile-card>p{margin:0;color:#7c6e74;font-size:.74rem;line-height:1.5}
  .pricing-mobile-card .level-pill{flex:0 0 auto;max-width:44%;white-space:normal;text-align:center;justify-content:center;line-height:1.15}
  .pricing-mobile-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid rgba(102,79,89,.13);border-radius:16px;overflow:hidden;background:#faf7f4}
  .pricing-mobile-metrics>div{min-width:0;padding:12px 10px;display:grid;gap:3px;align-content:start}
  .pricing-mobile-metrics>div+div{border-left:1px solid rgba(102,79,89,.13)}
  .pricing-mobile-metrics span{font-size:.53rem;font-weight:850;letter-spacing:.04em;text-transform:uppercase;color:#8a7980}
  .pricing-mobile-metrics span em{display:inline-flex;margin-left:3px;padding:2px 4px;border-radius:999px;background:#efe5e9;color:#765160;font-style:normal;font-size:.43rem}
  .pricing-mobile-metrics strong{font-size:.9rem;color:#382d32;white-space:nowrap}
  .pricing-mobile-metrics small{font-size:.52rem;color:#8a7c82;line-height:1.25}
  .pricing-mobile-edit{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:43px;border:0;border-radius:14px;background:#3c2d34;color:#fff;font-size:.68rem;font-weight:850}
  .pricing-mobile-edit svg{width:16px;height:16px}
}


/* 8.9.3 — verified mobile settings reflow. The prior late desktop rule
   kept a 2-column settings grid on phones and squeezed the form into a
   64px column. Force one full-width column below the mobile breakpoint. */
@media(max-width:900px){
  .settings-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important}
  .settings-grid>*,.settings-grid>.stack,.settings-grid>aside{grid-column:1!important;width:100%!important;min-width:0!important;max-width:100%!important}
  .settings-grid>aside{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:14px!important}
  .settings-grid .form-grid{grid-template-columns:minmax(0,1fr)!important;width:100%!important}
  .settings-grid .field,.settings-grid .field input,.settings-grid .field select,.settings-grid .field textarea{width:100%!important;min-width:0!important;max-width:100%!important}
  .settings-grid .setting-row{width:100%!important;min-width:0!important;flex-wrap:wrap!important}
}

/* 8.9.3 — no hidden sideways content in the mobile Palette & Moodboard view.
   Family filters wrap and palette choices stack as full-width cards instead of
   relying on a clipped horizontal carousel. */
@media(max-width:650px){
  .vd-curated-660 .vd-family-tabs{
    display:flex!important;
    flex-wrap:wrap!important;
    overflow:visible!important;
    width:100%!important;
    margin-right:0!important;
    padding-right:0!important;
  }
  .vd-curated-660 .vd-family-tabs button{flex:0 1 auto!important;max-width:100%!important}
  .vd-preset-grid-660{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-flow:row!important;
    grid-auto-columns:auto!important;
    width:100%!important;
    overflow:visible!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  .vd-preset-card-660{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    grid-template-columns:minmax(105px,40%) minmax(0,1fr)!important;
    scroll-snap-align:none!important;
  }
  .vd-preset-card-660 .vd-preset-photo-stack,
  .vd-preset-card-660 .vd-preset-copy{min-width:0!important;max-width:100%!important}
  .vd-preset-card-660 .vd-preset-copy strong,
  .vd-preset-card-660 .vd-preset-copy small{overflow-wrap:anywhere!important}
}

/* Keep selected colors and the board palette fully visible on phones. */
@media(max-width:650px){
  .vd-selected-strip{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    overflow:visible!important;
    min-height:0!important;
  }
  .vd-selected-strip>span{grid-column:1/-1!important;padding:16px!important}
  .vd-selected-strip button{min-width:0!important;width:100%!important;border-bottom:1px solid rgba(255,255,255,.35)!important}
  .vd-board-palette{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    overflow:visible!important;
  }
  .vd-board-palette>div{min-width:0!important}
  .vd-board-palette>p{grid-column:1/-1!important}
}