/* v9.8 (5 Oct 2026): models-review batch. Loaded last on the 28 model pages and the two hubs. */
/* phone: show-site list on the hubs fits at 360 (was 186px + 150px + gap) */
@media (max-width:600px){html body .visitb .sites{grid-template-columns:repeat(2,minmax(0,1fr))!important}html body .visitb .sites>div{min-width:0;overflow-wrap:anywhere}}
/* phone: designer view tabs (Front / Plan / Photo) never push the page wider */
html body .vtabs{max-width:100%;flex-wrap:wrap}
@media (max-width:600px){html body #hero .v9fur{margin-top:8px!important}}

/* ---------- 13A: one hero frame on all 28 model pages ----------
   Desktop: 3:2 photo with a 5-thumbnail strip below; the facts column to the right. Phone: 4:3 photo at full width. */
html body #hero:not(#z1) [data-gallery]{position:relative!important;inset:auto!important;transform:none!important;max-width:none!important;height:auto!important;min-height:0!important;margin:0!important;grid-row:auto!important}
html body #hero:not(#z1) [data-gallery] .gmain{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:3/2!important;overflow:hidden!important;margin:0!important}
html body #hero:not(#z1) [data-gallery] .gmain>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-height:none!important;object-fit:cover!important;aspect-ratio:auto!important}
html body #hero:not(#z1) [data-gallery] .thumbs{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-auto-rows:auto!important;gap:8px!important;margin:8px 0 0!important;position:static!important;overflow:visible!important;width:100%!important;height:auto!important}
html body #hero:not(#z1) [data-gallery] .thumbs>button{position:relative!important;display:block!important;width:auto!important;height:auto!important;min-height:0!important;aspect-ratio:3/2!important;padding:0!important;margin:0!important;border:2px solid transparent!important;overflow:hidden!important;grid-column:auto!important;grid-row:auto!important;background:#e9e4da!important}
html body #hero:not(#z1) [data-gallery] .thumbs>button[aria-current]{border-color:#123627!important}
html body #hero:not(#z1) [data-gallery] .thumbs>button:nth-child(n+6){display:none!important}
html body #hero:not(#z1) [data-gallery] .thumbs>button>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
html body #hero:not(#z1) [data-gallery] .thumbs:has(>button:only-child){display:none!important}
html body #hero:not(#z1) [data-gallery]:has(.thumbs>button:only-child) .cnt{display:none!important}
html body #hero:not(#z1) .v91all{position:absolute!important;right:12px!important;bottom:12px!important;left:auto!important;top:auto!important;z-index:3!important;min-height:44px!important;padding:0 14px!important;background:#fff!important;color:#123627!important;border:0!important;font:600 14px/44px Montserrat,Arial,sans-serif!important}
@media (min-width:1000px){
 html body #hero:not(#z1)>.wrap.mh{display:grid!important;grid-template-columns:minmax(0,56fr) minmax(0,44fr)!important;gap:44px!important;align-items:start!important;padding:28px 0 0!important;width:min(1200px,calc(100% - 80px))!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important}
 html body #hero:not(#z1)>.wrap.mh>[data-gallery]{grid-column:1!important;width:100%!important}
 html body #hero:not(#z1)>.wrap.mh>.info{grid-column:2!important;position:static!important;width:auto!important;max-width:none!important;margin:0!important;padding:0!important;background:transparent!important;box-shadow:none!important}
}
@media (min-width:601px) and (max-width:999px){
 html body #hero:not(#z1)>.wrap.mh{display:block!important}
 html body #hero:not(#z1)>.wrap.mh>.info{position:static!important;margin-top:24px!important;max-width:none!important}
}
@media (max-width:600px){
 html body #hero:not(#z1)>.wrap.mh{display:block!important;padding-top:0!important}
 html body #hero:not(#z1){padding-top:0!important}
 html body #hero:not(#z1) [data-gallery]{margin:0 calc(50% - 50vw)!important;width:100vw!important}
 html body #hero:not(#z1) [data-gallery] .gmain{aspect-ratio:4/3!important}
 html body #hero:not(#z1) .hpv-sw{position:absolute!important;inset:0!important;height:100%!important}
 html body #hero:not(#z1) .hpv-sw img{height:100%!important;object-fit:cover!important}
 html.hpv-gal body #hero:not(#z1) [data-gallery] .thumbs{display:none!important}
 html body #hero:not(#z1) [data-gallery] .thumbs{padding:0 20px!important;gap:6px!important}
 html body #hero:not(#z1)>.wrap.mh>.info{position:static!important;margin-top:20px!important}
 html body #hero:not(#z1) .v91all{bottom:10px!important;right:10px!important}
}
.v98site{white-space:nowrap}

/* ---------- fix 16 + v9.7 leftover 4: dark bronze #7d6230 text on white/cream on the model pages turns green.
   Scoped to model pages (a hero gallery); the site-wide bronze token is unchanged, and bronze on dark green stays. */
html body:has(#hero [data-gallery]) main :is(#specification dt,#specification th,#specification i,#specification .wcz-wno,#specification span.ic,#specification span.s,#specification sup.fl,.jgo i,#hero .f4 span,#hero .hpv-i span,#hero .cz-ib .i,#hero .cz-wl,#installs .soon span,.hgs-tag,.kick,.eyebrow):not(.dark *){color:#123627!important}
html body:has(#hero [data-gallery]) main :is(#hero .hpv-i,#hero .cz-ib){border-color:#123627!important;color:#123627!important}
/* fix 15: garden shelter renders are labelled */
html body #hero .gmain .v98ill{position:absolute;left:12px;top:12px;z-index:3;background:#fff;color:#123627;font:600 14px/1 Montserrat,Arial,sans-serif;padding:7px 10px}
/* v9.8.4 area 10: Signature width buttons carry their price */
.seg [data-sgw]{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding-top:6px;padding-bottom:6px;line-height:1.15}
.seg [data-sgw] .sgwp{display:block;font:500 14px/1.15 Montserrat,Arial,sans-serif;color:inherit;opacity:.85;white-space:nowrap}
@media (max-width:420px){.seg.wrap5>[data-sgw]{flex-basis:30%}}
body:has(#hero [data-gallery]) svg .vl{fill:#123627!important}