/* Keep the original photographs intact; only the small card window is cropped. */
.roof-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; border:0; padding:0; margin:18px 0 0; min-width:0; }
.roof-options[hidden] { display:none; }
.roof-options:not([hidden]) { animation:roof-options-reveal .22s ease-out; }
.roof-option { position:relative; min-width:0; display:flex; }
.roof-type-input { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.roof-option-label { display:flex; flex-direction:column; width:100%; min-width:0; padding:8px; background:#fff; border:1px solid var(--hair); cursor:pointer; }
.roof-option.on .roof-option-label { border-color:var(--strong); box-shadow:inset 0 0 0 1px var(--strong); }
.roof-type-input:focus-visible + .roof-option-label { outline:2px solid var(--strong); outline-offset:3px; }
.roof-option-photo { position:relative; display:block; aspect-ratio:3 / 2; overflow:hidden; background:#e5e7e1; }
.roof-option-photo img { position:absolute; width:132%; max-width:none; height:auto; left:-10%; top:-64%; display:block; }
.roof-option-body { display:flex; flex:1; flex-direction:column; align-items:flex-start; gap:7px; padding:14px 6px 7px; }
.roof-option-title { color:var(--ink); font-size:14px; line-height:1.45; }
.roof-option-description { color:var(--muted); font-size:12px; line-height:1.5; }
.roof-option-price { color:var(--sand); font-size:12px; line-height:1.5; margin-top:auto; padding-top:8px; }
.roof-option.on .roof-option-price { color:var(--strong); }
.roof-expand { position:absolute; top:12px; right:12px; display:grid; place-items:center; width:44px; height:44px; border:1px solid rgba(21,42,33,.14); border-radius:0; background:rgba(255,255,255,.94); color:var(--strong); cursor:pointer; }
.roof-expand:hover { background:#fff; }
.roof-expand:focus-visible,.roof-viewer-button:focus-visible,.roof-viewer-stage:focus-visible { outline:2px solid var(--sand); outline-offset:3px; }
html.roof-viewer-open,html.roof-viewer-open body { overflow:hidden; overscroll-behavior:none; }
.roof-viewer { width:min(1100px,calc(100% - 32px)); height:min(900px,calc(100vh - 32px)); height:min(900px,calc(100dvh - 32px)); max-width:none; max-height:none; margin:auto; padding:0; border:1px solid rgba(255,255,255,.16); border-radius:0; color:#f7f7f2; background:#152a21; overflow:hidden; }
.roof-viewer::backdrop { background:rgba(5,12,8,.84); }
.roof-viewer-shell { height:100%; display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.roof-viewer-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:20px 24px; }
.roof-viewer-head .lbl { color:#d5b782; font-size:10px; letter-spacing:.2em; margin:0 0 7px; }
.roof-viewer-head h2 { color:inherit; font-family:var(--body,inherit); font-weight:400; font-size:18px; line-height:1.35; margin:0; }
#roof-viewer-price { color:#d5b782; font-size:12px; line-height:1.4; margin:8px 0 0; }
.roof-viewer-stage { position:relative; min-width:0; min-height:0; overflow:hidden; background:#0b1410; touch-action:none; user-select:none; }
.roof-viewer-stage img { position:absolute; left:50%; top:50%; max-width:none; max-height:none; margin:0; transform-origin:center; user-select:none; pointer-events:none; }
.roof-viewer-stage.is-zoomed { cursor:grab; }
.roof-viewer-stage.is-zoomed:active { cursor:grabbing; }
.roof-viewer-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 24px; background:#152a21; border:0; color:inherit; }
.roof-viewer-footer p { max-width:330px; margin:0; color:#c4cfc8; font-size:12px; line-height:1.6; }
.roof-viewer-tools { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.roof-viewer-button { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; border:1px solid rgba(255,255,255,.3); border-radius:50%; color:inherit; background:transparent; cursor:pointer; }
.roof-viewer-button:disabled { opacity:.3; cursor:default; }
.roof-viewer-button:hover:not(:disabled) { background:rgba(255,255,255,.08); }
#roof-zoom-level { width:47px; text-align:center; font-size:12px; font-variant-numeric:tabular-nums; }
@keyframes roof-options-reveal { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@media(max-width:719px) {
  .roof-options { gap:10px; margin-top:14px; }
  .roof-option-label { padding:6px; }
  .roof-option-body { padding:11px 4px 5px; gap:6px; }
  .roof-option-title { font-size:13px; }
  .roof-option-description,.roof-option-price { font-size:11px; }
  .roof-expand { top:8px; right:8px; }
  .roof-expand svg { width:18px; height:18px; }
  .roof-viewer { width:100%; height:100vh; height:100dvh; border:0; }
  .roof-viewer-head { padding:calc(16px + env(safe-area-inset-top)) 18px 16px; }
  .roof-viewer-head h2 { font-size:17px; }
  .roof-viewer-footer { flex-direction:column; gap:10px; padding:12px 18px calc(14px + env(safe-area-inset-bottom)); }
  .roof-viewer-footer p { text-align:center; font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { .roof-options:not([hidden]) { animation:none; } }