/* Real 3D lives in its own canvas. The approved page and its controls stay still. */
.roof-system-v4 .roof-artwork-perspective{perspective:none;inset:64px 1% 192px -4%}
.roof-system-v4 .roof-artwork{transform:none!important;transform-style:flat}
.roof-system-v4 .roof-artwork-zoom{inset:0;transform:none;transition:none}
.roof-system-v4[data-view=photo] .roof-artwork-zoom{transform:scale(var(--roof-zoom,1));inset:3% 10%}
.roof-system-v4 .roof-assembly-frame{pointer-events:auto;overflow:hidden}
.roof-model-host,.roof-model-fallback{position:absolute;inset:0;width:100%;height:100%}
.roof-model-host canvas{display:block;width:100%;height:100%;touch-action:pan-y pinch-zoom;outline-offset:-4px}
.roof-model-fallback{object-fit:contain;pointer-events:none}
[data-renderer="3d"] .roof-model-fallback{display:none}
.roof-system-v4 .roof-hotspots{display:none}
.roof-camera-controls{position:absolute;z-index:5;top:23px;left:0;right:6%;display:flex;align-items:center;flex-direction:column;gap:10px}
.roof-camera-hint{font-size:.65rem;letter-spacing:.04em;color:#767676}
.roof-camera-controls>div{display:flex;gap:3px;padding:4px;border:1px solid #e8e8e8;border-radius:30px;background:#fafafaed}
.roof-camera-controls button{border:0;background:transparent;color:#696969;font-size:.63rem;border-radius:30px;min-height:34px;padding:7px 14px;transition:background .18s}
.roof-camera-controls button:hover{background:#eeeeed}.roof-camera-controls button[aria-pressed=true]{background:#3f4140;color:#fff}
.roof-system-v4 .roof-component-info{left:3%;right:7%;width:auto;bottom:112px;top:auto;display:grid;grid-template-columns:1fr auto;gap:7px 20px;padding:17px 21px;background:#ffffffed;box-shadow:0 10px 28px #3030300a}
.roof-system-v4 .roof-component-info>p[data-roof-body]{grid-column:1;max-width:640px;margin:0;font-size:.72rem;line-height:1.55}
.roof-system-v4 .roof-component-info>h2{grid-column:1}
.roof-system-v4 .roof-component-info>[data-roof-peel-intro],.roof-system-v4 .roof-component-info>[data-roof-detail-link],.roof-system-v4 .roof-component-info>[data-roof-compare]{grid-column:2;grid-row:1 / 3;align-self:center;max-width:170px}
.roof-system-v4 .roof-detail-link{padding:8px 0;border-top:0;white-space:normal;font-size:.68rem;line-height:1.5}
.roof-system-v4 .roof-view-controls{left:0;right:5%;bottom:43px}
.roof-system-v4 .roof-view-caption{bottom:17px;left:2%;right:7%;text-align:center}
.roof-model-status{position:absolute;z-index:4;left:12%;right:14%;top:60%;text-align:center;font-size:.7rem;color:#777;background:#ffffffef;padding:10px;border-radius:8px}
.roof-explode-control{display:flex;align-items:center;gap:14px;padding:0 0 23px;max-width:780px}
.roof-explode-control label{font-size:.74rem;font-weight:500;margin-right:13px;white-space:nowrap}.roof-explode-control span,.roof-explode-control output{font-size:.66rem;color:#737373;white-space:nowrap}.roof-explode-control output{min-width:30px}
.roof-explode-control input{min-width:100px;flex:1;height:32px;accent-color:#444e4a;cursor:ew-resize}.roof-explode-control input:focus-visible{outline:2px solid #777;outline-offset:4px}
.roof-system-v4 .roof-layer-buttons{grid-template-columns:repeat(4,minmax(0,1fr))}
.roof-system-v4 .roof-component-rail{grid-template-columns:repeat(5,minmax(0,1fr));row-gap:22px}
.roof-system-v4 .roof-component-tab:before{top:-5px}.roof-system-v4 .roof-tab-art svg{height:130px}
.roof-product-section{grid-column:1 / -1;width:100%;padding-top:14px;border-top:1px solid #ddd}
.roof-product-heading{display:grid;grid-template-columns:1fr 1fr;gap:8px 50px;margin:18px 0 25px}.roof-product-heading .roof-detail-eyebrow{grid-column:1 / -1;margin-bottom:0!important}
.roof-product-heading h3{font-size:1.7rem;font-weight:500;letter-spacing:-.05em;margin:0;line-height:1.2}.roof-product-heading>p:last-child{font-size:.76rem;line-height:1.7;color:#777;max-width:490px}
.roof-product-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.roof-product-card{display:block;min-width:0;border:1px solid #e2e2df;border-radius:14px;background:#fff;text-decoration:none;overflow:hidden;transition:box-shadow .2s,transform .2s}
.roof-product-card:hover{box-shadow:0 14px 32px #0000000b;transform:translateY(-3px)}
.roof-product-photo{background:#fff;height:235px;padding:23px;border-bottom:1px solid #f1f1f1}.roof-product-photo img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.roof-product-card>div:last-child{padding:21px}.roof-product-card span{font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:#888}.roof-product-card h4{font-size:.94rem;line-height:1.4;letter-spacing:-.02em;margin:6px 0 12px;color:#333}.roof-product-card p{font-size:.74rem;color:#707070;line-height:1.65}
[data-renderer=fallback] .roof-explode-control,[data-renderer=fallback] .roof-layer-buttons,[data-renderer=fallback] .roof-peel-footer,[data-renderer=fallback]:not([data-view=photo]) .roof-zoom-controls{display:none}
@media(min-width:1600px){.roof-system-v4 .roof-artwork-perspective{bottom:205px}.roof-system-v4 .roof-component-info{bottom:115px}.roof-product-photo{height:270px}}
@media(max-width:1150px){.roof-system-v4 .roof-component-info{left:0;right:5%;padding:14px;gap:5px 13px}.roof-system-v4 .roof-component-info>p[data-roof-body]{font-size:.66rem}.roof-camera-controls button{padding-inline:10px}.roof-system-v4 .roof-artwork-perspective{inset:80px 0 212px -5%}.roof-product-cards{gap:14px}.roof-product-photo{height:200px}}
@media(max-width:850px){.roof-system-v4 .roof-system-stage{min-height:650px}.roof-system-v4 .roof-artwork-perspective{inset:76px 0 211px}.roof-camera-controls{left:5%;right:5%;top:19px}.roof-camera-controls button{min-height:40px;padding-inline:14px}.roof-system-v4 .roof-component-info{left:5%;right:5%;bottom:113px}.roof-system-v4 .roof-view-controls{left:5%;right:5%}.roof-system-v4 .roof-component-rail{display:flex}.roof-system-v4 .roof-layer-buttons{grid-template-columns:repeat(3,minmax(0,1fr))}.roof-explode-control{gap:10px}.roof-explode-control label{margin-right:0}.roof-product-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.roof-product-heading{grid-template-columns:1fr;gap:10px}.roof-product-section{padding-top:12px}.roof-product-photo{height:210px}}
@media(max-width:520px){.roof-system-v4 .roof-system-stage,.roof-system-v4[data-view=finished] .roof-system-stage{min-height:665px;padding-bottom:134px}.roof-system-v4 .roof-artwork-perspective{inset:98px 0 auto;height:305px}.roof-system-v4 .roof-component-info{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;margin:415px 0 0;display:block;padding:15px 17px;min-height:0}.roof-system-v4 .roof-component-info>p[data-roof-body]{font-size:.73rem;margin:7px 0}.roof-system-v4 .roof-detail-link{font-size:.7rem;padding:6px 0}.roof-system-v4 .roof-component-info>[data-roof-compare]{max-width:none}.roof-system-v4 .roof-artwork-zoom{inset:0}.roof-camera-controls{gap:8px;left:4%;right:4%;top:24px}.roof-camera-controls>div{max-width:100%;gap:0;padding:3px}.roof-camera-controls button{padding:9px 10px;font-size:.6rem;min-height:40px}.roof-camera-hint{font-size:.62rem}.roof-system-v4 .roof-view-controls{bottom:43px;gap:8px}.roof-system-v4 .roof-view-caption{font-size:.51rem;bottom:14px}.roof-system-v4 .roof-layer-buttons{grid-template-columns:1fr 1fr}.roof-explode-control{flex-wrap:wrap;gap:6px 10px}.roof-explode-control label{flex-basis:100%;margin-bottom:6px}.roof-explode-control input{min-width:80px}.roof-product-cards{grid-template-columns:1fr}.roof-product-photo{height:260px}.roof-product-card>div:last-child{padding:20px}.roof-product-heading h3{font-size:1.5rem}.roof-product-heading>p:last-child{font-size:.75rem}.roof-system-v4[data-view=photo] .roof-system-stage{min-height:460px}.roof-model-status{left:7%;right:7%;top:40%}}
@media(prefers-reduced-motion:reduce){.roof-product-card{transition:none}.roof-product-card:hover{transform:none}}