/* Roof photography retains the installed scene and finish of the selected SKU. */
.wb-roof-controls{display:flex;gap:6px;padding:10px;border-bottom:1px solid #e5dfd8;background:#fff}
.wb-roof-controls button{flex:1;min-height:40px;border:1px solid #e5dfd8;border-radius:8px;background:#faf8f5;color:#665f58;padding:7px 9px;font:inherit;font-size:13px;cursor:pointer}
.wb-roof-controls button[aria-pressed="true"]{color:#a12b23;background:#fff3ef;border-color:#a12b23;font-weight:600}
.wb-roof-controls button:focus-visible,.wb-roof-zoom:focus-visible{outline:2px solid #a12b23;outline-offset:2px}
.wb-visual[data-wb-kind="roof"] .wb-preview{height:auto!important;aspect-ratio:1;border-radius:0;background:#f4f1ed}
.wb-visual[data-wb-kind="roof"] .wb-preview>img{display:block;object-fit:cover;object-position:center;transition:transform .25s ease;transform-origin:50% 20%}
.wb-visual[data-roof-view="detail"] .wb-preview>img{transform:scale(1.85)}
.wb-visual[data-roof-view="diagram"] .wb-preview{aspect-ratio:auto;min-height:240px}
.wb-roof-diagram>svg{display:block;width:100%;height:auto}
.wb-roof-diagram{padding:10px}
.wb-roof-zoom{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:5px;min-height:38px;padding:7px 11px;border:1px solid #e5dfd8;border-radius:9px;background:#fffffff2;color:#554c46;font:inherit;font-size:12px;cursor:pointer;box-shadow:0 2px 8px #00000012}
.wb-roof-specs{padding:12px 12px 8px;border-top:1px solid #e5dfd8;background:#fff;font-size:12px;color:#554c46;line-height:1.7}
.wb-visual[data-wb-kind="roof"] .wb-visual-note{padding:0 12px 12px;font-size:11px;line-height:1.6;background:#fff}
.wb-visual[data-wb-kind="roof"] [hidden]{display:none!important}
@media(max-width:760px){.wb-roof-controls{gap:5px;padding:8px}.wb-roof-controls button{padding:7px 4px;font-size:12px}.wb-roof-specs{font-size:11px}}
@media(prefers-reduced-motion:reduce){.wb-visual[data-wb-kind="roof"] .wb-preview>img{transition:none}}
.wb-roof-controls button:disabled{opacity:.45;cursor:default}