/* Shared visual tidy-up for building-size finders on retail sites.
   Scoped to town pages and homepage; category/product filter logic is unchanged.
   2026-10-24 */

/* Give the explanatory heading its own row rather than squeezing everything. */
body .category-size-finder.town-size-finder,
body .category-size-finder.home-building-finder{
  grid-template-columns:minmax(0,1fr);
  align-items:stretch;
  gap:15px;
  padding:22px 24px;
}
body .town-size-finder .category-size-copy,
body .home-building-finder .category-size-copy{max-width:900px;min-width:0}
body .town-size-finder .category-size-copy h3{
  font-size:24px;line-height:1.2;margin:5px 0 6px;
}
body .town-size-finder .category-size-copy p,
body .home-building-finder .category-size-copy p{
  max-width:80ch;line-height:1.5;
}
body .town-size-finder .category-size-controls{
  grid-template-columns:minmax(135px,1fr) 24px minmax(135px,1fr) minmax(315px,1.7fr) minmax(155px,auto);
  align-items:end;
  gap:12px;
  min-width:0;
}
body .home-building-finder .category-size-controls{
  grid-template-columns:minmax(205px,1.35fr) minmax(125px,.8fr) 24px minmax(125px,.8fr) minmax(295px,1.75fr) minmax(170px,auto);
  align-items:end;
  gap:10px;
  min-width:0;
}
body .town-size-finder .category-size-controls>label,
body .home-building-finder .category-size-controls>label{
  min-width:0;
  font-size:12px;
  gap:6px;
}
body .town-size-finder .category-size-controls select,
body .home-building-finder .category-size-controls select{
  display:block;
  width:100%;
  min-width:0;
  min-height:48px;
  padding:0 12px;
  font-size:14px;
  text-overflow:ellipsis;
}
body .town-size-finder .category-size-controls .size-cross,
body .home-building-finder .category-size-controls .size-cross{
  height:48px;
  min-width:0;
  padding:0;
  text-align:center;
  place-self:end center;
}
body .town-size-finder .category-size-mode,
body .home-building-finder .category-size-mode{
  grid-template-columns:repeat(2,minmax(0,1fr));
  min-width:0;
  gap:8px;
}
body .town-size-finder .category-size-mode>label,
body .home-building-finder .category-size-mode>label{
  min-width:0;
  min-height:48px;
  padding:8px 10px;
  gap:8px;
  border-radius:8px;
  background:#fff;
}
body .town-size-finder .category-size-mode input,
body .home-building-finder .category-size-mode input{flex:0 0 auto}
body .town-size-finder .category-size-mode strong,
body .home-building-finder .category-size-mode strong{font-size:12px;line-height:1.2}
body .town-size-finder .category-size-mode small,
body .home-building-finder .category-size-mode small{
  font-size:10px;
  line-height:1.25;
  margin-top:3px;
}
body .town-size-finder .category-size-controls .btn,
body .home-building-finder .category-size-controls .btn{
  min-width:0;
  min-height:48px;
  padding:11px 17px;
  white-space:nowrap;
  font-size:15px;
}
body .town-size-finder .category-size-controls .btn{min-width:155px}
body .home-building-finder .category-popular-sizes{
  grid-column:1/-1;
  min-width:0;
}
@media(max-width:1140px){
  body .home-building-finder .category-size-controls,
  body .town-size-finder .category-size-controls{
    grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);
    gap:11px;
  }
  body .home-building-finder .home-building-type{
    grid-column:1/-1;
  }
  body .home-building-finder .category-size-mode,
  body .town-size-finder .category-size-mode{
    grid-column:1/-1;
  }
  body .home-building-finder .category-size-controls .btn,
  body .town-size-finder .category-size-controls .btn{
    grid-column:1/-1;
    justify-self:start;
    min-width:190px;
  }
}
@media(max-width:620px){
  body .category-size-finder.town-size-finder,
  body .category-size-finder.home-building-finder{
    padding:16px;
    gap:13px;
  }
  body .town-size-finder .category-size-copy h3{font-size:21px}
  body .home-building-finder .category-size-controls,
  body .town-size-finder .category-size-controls{gap:10px}
  body .home-building-finder .category-size-controls .btn,
  body .town-size-finder .category-size-controls .btn{
    width:100%;
    justify-self:stretch;
  }
}
@media(max-width:450px){
  body .home-building-finder .category-size-mode,
  body .town-size-finder .category-size-mode{grid-template-columns:1fr}
}