/* Collection pages in the homepage pattern (Karo, 27 Sep 2026): tiles on the left, a large sticky picture
   of the door on its house on the right (range-house.js). Loaded after chrome-loop.css on pages with a
   [data-range-grid], by scripts/build-full-site.mjs. Phones keep the full-width tiles. */
html body .range-house{display:none}
@media(min-width:761px){
 html body .hhi-collection:has(>.range-house){display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:clamp(28px,3.2vw,48px);row-gap:0;align-items:start}
 html body .hhi-collection:has(>.range-house)>*{grid-column:1;min-width:0}
 html body .hhi-collection>.range-house{display:flex;flex-direction:column;grid-column:2;grid-row:1/span 12;position:sticky;top:20px;align-self:start;background:#EEECE7;padding:20px 20px 16px}
 html body .hhi-collection:has(>.range-house) .hhi-products{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1200px){html body .hhi-collection:has(>.range-house) .hhi-products{grid-template-columns:repeat(3,minmax(0,1fr))}}
html body .range-house-picture{position:relative;aspect-ratio:1448/1086;background:#e3dfd9;overflow:hidden}
html body .range-house-picture>img,html body .range-house-picture>canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
html body .range-house-picture>[hidden]{display:none}
html body .range-house.is-loading .range-house-picture>canvas{opacity:.85;transition:opacity .2s}
html body .range-house-bar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:4px 20px;margin-top:16px}
html body .range-house-door{display:flex;flex-direction:column;gap:2px;min-width:0}
html body .range-house-door strong{font-size:18px;line-height:24px;font-weight:600;color:#17152B}
html body .range-house-door span{font-size:12px;line-height:18px;color:#5f5b70}
html body .range-house-price{margin:0;font-size:20px;line-height:26px;font-weight:600;color:#17152B;white-space:nowrap;text-align:right}
html body .range-house-price small{font-size:12px;font-weight:400;color:#5f5b70}
html body .range-house-price span{display:block;font-size:12px;line-height:16px;font-weight:400;color:#5f5b70}
html body .range-house-price:not(:has(small)){font-size:14px;line-height:20px}
html body .range-house .hhi-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin:0;padding:0 20px;font-size:14px;font-weight:600;border-radius:5px;white-space:nowrap;box-shadow:none}
html body .range-house-note{margin:12px 0 0;font-size:12px;line-height:18px;color:#5f5b70}
/* A narrower panel (761-1199px) stacks the action under the words. */
@media(min-width:761px) and (max-width:1199px){
 html body .range-house-bar{grid-template-columns:minmax(0,1fr) auto}
 html body .range-house .hhi-button{grid-column:1/-1;width:100%;margin-top:8px}
}
@media(prefers-reduced-motion:reduce){html body .range-house.is-loading .range-house-picture>canvas{transition:none}}
/* The fire range's link to Fire doors explained (docs/slices/fire-doors-explained-2026-10-05.md). */
html body.hhi-page-range .range-fire-explainer{margin:-6px 0 14px;font-size:17px;line-height:1.4}
html body.hhi-page-range .range-fire-explainer a{display:inline-flex;align-items:center;min-height:44px;color:var(--hhi-ink);text-decoration:underline;text-underline-offset:4px}
html body.hhi-page-range .range-fire-explainer a:hover{color:var(--hhi-indigo)}