/* proto-awesomeo v6: garden room configurator visual fills its panel (Contemporary, Heritage, Sandringham, Clarence, Buckingham).
   Loaded last on those 5 pages; everything is scoped to .v6fit (the configurator section).
   - the visual (SVG drawing, technical drawing, photo) fills the stage cell's width and height, with modest padding;
   - the view tabs sit in a slim bar with the view title, so they don't take a band of the drawing;
   - the panel is the drawing's cream (no inner card); SVGs are 100% × 100%, viewBox tightened by the scripts, meet. */
.v6fit .ccfg .stg{display:flex;flex-direction:column;background:#f6f1e6;padding:8px 10px 10px}
.v6fit .ccfg .stagebar{flex:none;margin:0 0 6px;min-height:34px;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:12px;position:static}
.v6fit .ccfg .stagebar>div:first-child{display:block;min-width:0;flex:1 1 auto;overflow:hidden}
.v6fit .ccfg .stagebar .kick{display:block;font-size:14px;line-height:1.2;letter-spacing:.14em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v6fit .ccfg .stagebar p{margin:1px 0 0;font-size:14px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v6fit .ccfg .vtabs{flex:none;border-color:#d9cfb9;background:#fff}
.v6fit .ccfg .vtabs button{min-height:32px;padding:4px 12px;font-size:14px;line-height:1}
.v6fit .stg>[role=tabpanel]{position:relative;flex:1 1 auto;min-height:var(--vish,300px);margin:0}
.v6fit .stg>[role=tabpanel]>.svgw,.v6fit .stg>[role=tabpanel]>.ctimg{position:absolute;inset:0;margin:0;height:auto;aspect-ratio:auto}
.v6fit .stg .svgw{margin:0}
.v6fit .stg .svgw>svg{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;overflow:visible}
.v6fit .stg [hidden]{display:none!important}
.v6fit .stg .ctimg{background:transparent;overflow:hidden}
.v6fit .stg .ctimg img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none}
.v6fit .stg .ctimg:not(.ph) img{object-fit:contain;mix-blend-mode:multiply}
.v6fit .stg .ctimg.ph img{object-fit:cover}
@media (min-width:1000px){ .v6fit{--vish:clamp(224px,calc(100vh - 496px),304px)} }
@media (max-width:999px){
 .v6fit{--vish:236px}
 .v6fit .ccfg .stg{padding:6px 8px 8px}
 .v6fit .ccfg .stagebar{min-height:36px;gap:8px;margin-bottom:4px}
 .v6fit .ccfg .stagebar .kick{display:none}
 .v6fit .ccfg .stagebar p{font-size:14px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
 .v6fit .ccfg .vtabs button{min-height:36px;padding:4px 9px;font-size:14px}
}
/* SVG text and strokes: the drawings are in CSS-pixel units now, so these are real on-screen sizes */
.v6fit .svgw svg.fitd .dl,.v6fit #hg-svg.fitd .dl{font-size:12.5px}
.v6fit .svgw svg.fitd .fl,.v6fit #hg-svg.fitd .fl{font-size:11.5px}
.v6fit .svgw svg.fitd .vl,.v6fit #hg-svg.fitd .vl{font-size:10px}
.v6fit .svgw svg.fitd .ct,.v6fit #hg-svg.fitd .ct{font-size:12.5px}
.v6fit .svgw svg.fitd .cs,.v6fit #hg-svg.fitd .cs{font-size:9.5px}
.v6fit .svgw svg.ctsvg.fitd .ct{font-size:15px}
.v6fit .svgw svg.sgsvg.fitd .dl{font-size:13px}.v6fit .svgw svg.sgsvg.fitd .fl{font-size:12px}.v6fit .svgw svg.sgsvg.fitd .ct{font-size:18px}
.v6fit #hg-svg.fitd .ol{stroke-width:1.15}.v6fit #hg-svg.fitd .frame{stroke-width:1.1}.v6fit #hg-svg.fitd .glass{stroke-width:.8}.v6fit #hg-svg.fitd .dim{stroke-width:.9}
@media (max-width:999px){
 .v6fit .svgw svg.fitd .dl,.v6fit #hg-svg.fitd .dl,.v6fit .svgw svg.sgsvg.fitd .dl{font-size:11.5px}
 .v6fit .svgw svg.fitd .fl,.v6fit #hg-svg.fitd .fl,.v6fit .svgw svg.sgsvg.fitd .fl{font-size:11px}
 .v6fit .svgw svg.fitd .vl,.v6fit #hg-svg.fitd .vl{font-size:10px}
 .v6fit .svgw svg.fitd .ct,.v6fit #hg-svg.fitd .ct{font-size:11.5px}
 .v6fit .svgw svg.fitd .cs,.v6fit #hg-svg.fitd .cs{font-size:10px}
 .v6fit .svgw svg.ctsvg.fitd .ct{font-size:13px}.v6fit .svgw svg.sgsvg.fitd .ct{font-size:15px}
}