/* The preview sticks only within its own workspace, above Design with Billy. */
.customizer{display:block}
.customizer-workspace{display:grid;grid-template-columns:minmax(230px,280px) minmax(0,1fr) minmax(210px,260px);gap:24px;align-items:start;min-width:0}
.customizer-workspace>*{min-width:0}
.customizer .garment-stage{position:sticky;top:16px;grid-column:auto;grid-row:auto;align-self:start;min-width:0}
.customizer #garment-3d{height:clamp(360px,58svh,600px);min-height:0;isolation:isolate}
.customizer #garment-3d canvas{width:100%;height:100%;max-width:100%;display:block}
.customizer .billy-customizer{position:relative;margin-top:32px;min-width:0;clear:both;overflow-wrap:anywhere}
.billy-customizer>div,.billy-customizer>form{min-width:0}
@media(max-width:1200px){
 .customizer-workspace{grid-template-columns:minmax(220px,1fr) minmax(0,2fr)}
 .customizer .garment-stage{grid-column:2;grid-row:1/3}
 .customizer .placement-settings{grid-column:1;grid-row:2}
}
@media(max-width:800px){
 .customizer-workspace{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 .customizer .garment-stage{position:static;grid-column:1/-1;grid-row:1}
 .customizer .canvas-settings{grid-column:1;grid-row:2}
 .customizer .placement-settings{grid-column:2;grid-row:2}
 .customizer #garment-3d{height:clamp(320px,55svh,490px)}
}
@media(max-width:600px){
 .customizer-workspace{grid-template-columns:minmax(0,1fr)}
 .customizer .garment-stage{grid-column:1;grid-row:1}
 .customizer .canvas-settings{grid-column:1;grid-row:2}
 .customizer .placement-settings{grid-column:1;grid-row:3}
 .customizer #garment-3d{height:clamp(300px,52svh,440px)}
 .customizer .billy-customizer{margin-top:24px}
}