/* Gazebos hub compare (v8.2): garden-rooms compare pattern + Clara's rules (review/journey-holes/clara.md) */
.gzc{--hl:rgba(18,54,39,.12);margin-top:26px}
.gz-grid{display:grid;grid-template-columns:150px repeat(3,minmax(0,1fr));grid-template-rows:repeat(12,auto);column-gap:32px}
.gz-labels,.gz-col{grid-row:span 12;display:grid;grid-template-rows:subgrid;row-gap:0}
.gz-ph{display:block;aspect-ratio:4/3;overflow:hidden;background:#e9e3d6}
.gz-ph img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.03) brightness(1.02)}
.gz-nm{font-family:Optima,Georgia,serif;font-weight:400;font-size:24px;line-height:1.2;margin:16px 0 0;color:var(--f)}
.gz-nm a{color:inherit;text-decoration:none}.gz-nm a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--g)}
.gz-nm .new{vertical-align:4px;margin-left:8px}
.gz-ln p{margin:4px 0 0;font-size:14px;line-height:1.45;color:#4a463d;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.gz-stand{margin:6px 0 0;font-size:14px;line-height:1.4;color:#6b6455}
.gz-pr{margin:8px 0 14px;font-size:14px;color:#4a463d}.gz-pr b{font-family:Optima,Georgia,serif;font-weight:400;font-size:22px;color:var(--f)}
.gz-rows{display:contents}
.gz-row,.gz-lab{border-top:1px solid var(--hl);padding:12px 0;font-size:14px;line-height:1.5}
.gz-row dt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gz-row dd{margin:0;color:#333}
.gz-lab{font:600 14px/1.5 Montserrat,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#4d6b5a}
.gz-ac{border-top:1px solid var(--hl);padding:18px 0 4px}
.gz-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;border:1px solid var(--f);color:var(--f);background:transparent;text-decoration:none;font:600 14px/1.2 Montserrat,Arial,sans-serif;letter-spacing:0;text-transform:none;text-align:center;padding:0 12px;transition:background .15s,color .15s}
.gz-btn:hover{background:var(--f);color:#fff}
.gz-btn:focus-visible{outline:2px solid var(--f);outline-offset:3px}
.gz-ac-sh{border-top:0;max-width:360px;margin-top:16px}
.gz-dots{display:none}
@media (max-width:899px){
 .gzc{margin-top:18px}
 .gz-grid{grid-template-columns:repeat(3,82%);column-gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:-20px;padding-right:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .gz-grid::-webkit-scrollbar{display:none}
 .gz-labels{display:none}
 .gz-col{scroll-snap-align:start}
 .gz-nm{font-size:23px;margin-top:12px}
 .gz-ln p{-webkit-line-clamp:2}
 .gz-row{padding:10px 0}
 .gz-row dt{position:static;width:auto;height:auto;clip:auto;white-space:normal;font:600 14px/1.4 Montserrat,Arial,sans-serif;letter-spacing:0;text-transform:none;color:#4d6b5a;margin-bottom:2px}
 .gz-dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
 .gz-dots i{width:7px;height:7px;border-radius:50%;background:#d9d0bd}.gz-dots i.on{background:var(--f)}
 .gz-ac-sh{max-width:none}
}
.gz-ln p.gz-stand{display:block;-webkit-line-clamp:unset;overflow:visible}

/* v8.3: absolutely-positioned .sr text in the off-screen columns escaped the swipe scroller (no positioned ancestor),
   so mobile pages could pan sideways (scrollWidth 770 at 390). Make the scroller the containing block. */
.gz-grid{position:relative}

/* v8.2.2 hotfix: compare card photo + name go to that range's group in the finder (#range-x, same page). Photo reads as clickable. */
.gz-ph{position:relative;cursor:pointer}
.gz-ph img{transition:transform .45s cubic-bezier(.2,.6,.2,1)}
.gz-ph:hover img{transform:scale(1.04)}
.gz-ph:active img{transform:scale(1.02)}
.gz-pill,.gz-shl .gz-pill{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;padding:6px 11px 6px 12px;border-radius:999px;background:rgba(13,42,30,.8);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;font:600 14px/1.2 Montserrat,Arial,sans-serif;letter-spacing:0;text-transform:none;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.18);pointer-events:none;transition:background .2s,transform .2s}
.gz-pill i{font-style:normal;font-size:15px;line-height:1;margin-top:-2px;transition:transform .2s}
.gz-ph:hover .gz-pill,.gz-shl:hover .gz-pill,.gz-shl:focus-visible .gz-pill{background:rgba(13,42,30,.94)}
.gz-ph:hover .gz-pill i,.gz-shl:hover .gz-pill i,.gz-shl:focus-visible .gz-pill i{transform:translateX(2px)}
.gz-ph:focus-visible{outline:2px solid var(--f);outline-offset:3px}
.gz-nm a:focus-visible,.gz-shl:focus-visible{outline:2px solid var(--f);outline-offset:3px;border-radius:1px}
.gz-ar{display:inline-block;margin-left:7px;font:500 .8em/1 Montserrat,Arial,sans-serif;color:var(--f);opacity:.75;transition:transform .2s,opacity .2s}
.gz-nm a:hover .gz-ar,.gz-shl:hover .gz-ar{opacity:1}
.gz-nm a:hover .gz-ar,.gz-nm a:focus-visible .gz-ar,.gz-shl:hover .gz-ar,.gz-shl:focus-visible .gz-ar{transform:translateX(3px)}
.gz-shl{cursor:pointer}
.gz-shl .gim img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gz-shl .gz-pill{right:6px;bottom:6px;padding:5px 8px 5px 9px;font-size:14px;letter-spacing:.04em}
.gz-shl:active img{transform:scale(1.02)}
@media (prefers-reduced-motion:reduce){.gz-ph img,.gz-pill,.gz-pill i,.gz-ar,.gz-shl img{transition:none}.gz-ph:hover img,.gz-ph:active img,.gz-shl:hover img,.gz-shl:focus-visible img,.gz-shl:active img{transform:none}}