/* ROUND 80 — Mobile filter pop-up (Gallery, Plans, House & Land). body.sh-r80 is set on those three
   templates only; body.sh-r80-on once r80-filters.js has built the bar. From 1024px up nothing here
   applies except the hidden bar: the approved desktop filter columns are untouched.
   The pop-up itself is the Download Brochure pop-up (.sh-lead / .sh-lead__scrim / .sh-lead__card,
   r63.css): same scrim, cream card, 16px corners, bottom sheet below 768px, centred card above,
   same open / close motion. Only the inside is laid out for filters. */

.sh-r80-bar,.sh-r80-dlg{display:none}

/* Plans below 1024px: inner.css gives the plan rows (.ac-plan) display:flex, which beat the
   [hidden] attribute the filter engine sets, so every plan showed whatever was filtered and the
   load-more count never applied. The engine's hidden rows stay hidden again (Plans page only). */
.sh-r80 .pl [data-pl-card][hidden]{display:none!important}
.sh-r80-hidden{display:none!important}

@media (max-width:1023px){
  /* exactly one filtering interface: the desktop column steps aside for the bar */
  .sh-r80-on .gal__filters,.sh-r80-on .pl__filters,.sh-r80-on .hl__filters{display:none!important}
  .sh-r80-on .gal__filters-toggle{display:none!important}

  .sh-r80-bar{display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:100%}
  .sh-r80-open{align-self:flex-start}
  .sh-r80 .sh-r80-open,.sh-r80 .sh-r80-open:hover,.sh-r80 .sh-r80-open:focus-visible,.sh-r80 .sh-r80-open:active{color:var(--charcoal);background:transparent;border-color:var(--charcoal)}
  .sh-r80 .sh-r80-open::before{display:none}
  .sh-r80-open__count{margin-left:2px}

  /* applied chips */
  .sh-r80-chips{width:100%}
  .sh-r80-chips[hidden]{display:none}
  .sh-r80-chips__list{display:flex;flex-wrap:wrap;gap:8px}
  .sh-r80-chips.is-collapsed .sh-r80-chips__list{max-height:calc(2 * 36px + 8px);overflow:hidden}
  .sh-r80-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;max-width:100%;padding:6px 10px 6px 14px;border:0;border-radius:999px;background:var(--white);color:var(--charcoal);box-shadow:0 1px 2px rgba(0,0,0,.15);font:500 13px/1.3 var(--sans);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .sh-r80-chip__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(70vw,420px)}
  .sh-r80-chip__x{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--cream);font-size:15px;line-height:1}
  .sh-r80-chip:focus-visible,.sh-r80-chips__more:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  .sh-r80-chips__more{margin-top:8px;padding:6px 0;border:0;background:none;color:var(--charcoal);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
  .sh-r80-chips__more[hidden]{display:none}

  /* page-specific spacing (bar sits where each column started) */
  .sh-r80 .gal__body .sh-r80-bar{margin-bottom:0}
  .sh-r80 .hl__inner .sh-r80-bar,.sh-r80 .pl__inner .sh-r80-bar{margin-bottom:0}

  /* ---- the pop-up ---- */
  .sh-r80-dlg{display:flex}
  .sh-r80-dlg[hidden]{display:none}
  .sh-lead.sh-r80-dlg .sh-r80-card{display:flex;flex-direction:column;padding:0;overflow:hidden;
    max-height:min(92vh,calc(var(--sh-r80-vh,100vh) - 48px))}
  .sh-r80-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 24px 16px 32px;border-bottom:1px solid rgba(66,64,64,.1)}
  .sh-lead .sh-r80-title{margin:0}
  /* the heading only receives focus on open (so the dialog is announced by name); it is not a control */
  .sh-r80 .sh-lead .sh-r80-title:focus,.sh-r80 .sh-lead .sh-r80-title:focus-visible{outline:none!important;box-shadow:none!important}
  .sh-r80-cancel{flex:none;min-width:44px;min-height:44px;margin:-8px -8px -8px 0;padding:0 8px;border:0;background:none;color:var(--charcoal);cursor:pointer;text-decoration:underline;text-underline-offset:4px;-webkit-tap-highlight-color:transparent}
  .sh-r80-cancel:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:6px}
  .sh-r80-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:8px 32px 24px}
  .sh-r80-foot{flex:none;display:flex;gap:12px;padding:16px 24px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(66,64,64,.1);background:var(--cream)}
  .sh-r80-foot .btn{min-height:44px}
  .sh-r80-apply{flex:1 1 auto}
  .sh-r80 .sh-r80-clear,.sh-r80 .sh-r80-clear:hover,.sh-r80 .sh-r80-clear:focus-visible,.sh-r80 .sh-r80-clear:active{color:var(--charcoal);background:transparent;border-color:var(--charcoal)}
  .sh-r80 .sh-r80-clear::before{display:none}

  /* accordion groups */
  .sh-r80-acc{border-bottom:1px solid rgba(66,64,64,.1)}
  .sh-r80-acc:last-child{border-bottom:0}
  .sh-r80-acc__head{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;padding:12px 0;border:0;background:none;color:var(--charcoal);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .sh-r80-acc__head:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:6px}
  .sh-r80-acc__text{display:flex;flex-direction:column;gap:4px;min-width:0}
  .sh-r80-acc__sum{font:400 14px/1.4 var(--sans);color:var(--mid-grey);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sh-r80-acc__sum:empty{display:none}
  .sh-r80-acc.is-open .sh-r80-acc__sum{display:none}
  .sh-r80-acc__chev{flex:none;width:16px;height:16px;transition:transform .3s var(--ease-soft)}
  .sh-r80-acc.is-open .sh-r80-acc__chev{transform:rotate(180deg)}
  .sh-r80-acc__panel{padding:0 0 20px}
  .sh-r80-acc__panel[hidden]{display:none}
  .sh-r80-flat{padding-top:12px}
  .sh-r80-flat__label{margin:0 0 16px;color:var(--charcoal)}

  /* controls: the page's own option styles, a little more touch room */
  .sh-r80-ctl--gal,.sh-r80-ctl--pl,.sh-r80-ctl--hl{display:flex;flex-direction:column;gap:6px}
  .sh-r80-ctl .gal__opt,.sh-r80-ctl .pl__radio,.sh-r80-ctl .hl__radio{min-height:40px}
  .sh-r80-ctl .gal__opt-text,.sh-r80-ctl .pl__rlabel{white-space:normal}
  .sh-r80-ctl .pl__radio{font-size:15px;gap:8px}
  .sh-r80-ctl.pl__pills{gap:10px;padding-bottom:0}
  .sh-r80-ctl .pl__pill{width:44px;height:44px;font-size:14px}
  .sh-r80-ctl.pl__size{max-width:none;margin:0 10px;padding-top:34px}
  .sh-r80-ctl .gal__keyword,.sh-r80-ctl .pl__name input,.sh-r80-text{min-height:44px;font-size:16px}
  .sh-r80-ctl .pl__name{display:block}

  /* background lock that holds on iOS too (the page is pinned where it was) */
  html.sh-r80-locked body{position:fixed;left:0;right:0;width:100%;overflow:hidden}
}

@media (max-width:767px){
  .sh-lead.sh-r80-dlg .sh-r80-card{max-height:min(92vh,calc(var(--sh-r80-vh,100vh) - 24px))}
  .sh-r80-head{padding:20px 16px 12px 24px}
  .sh-r80-body{padding:4px 24px 20px}
  .sh-r80-foot{padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px))}
  .sh-lead .sh-r80-title{font-size:28px}
}
@media (max-width:359px){
  .sh-r80-foot{gap:8px}
  .sh-r80-foot .btn{padding-left:14px;padding-right:14px}
}
@media (prefers-reduced-motion: reduce){
  .sh-r80-acc__chev{transition:none}
}