/* ==========================================================================
   Riverside Rentals — search results
   The home page's own chrome and its own photograph, with the cottages
   scrolling on the left and the Broads held still on the right.
   ========================================================================== */
:root{
  color-scheme:dark;
  --ink:#06181D;
  --ink-2:#0A2830;
  --paper:#F4F1E9;
  --mist:rgba(244,241,233,.75);
  --mist-2:rgba(244,241,233,.75);
  --sail:#005A92;
  --sail-hi:#004E7F;
  --gold:#E2BE72;
  --on-accent:#FFFFFF;
  --line:rgba(244,241,233,.16);
  --ustrip-h:44px;   /* 44px, so the strip's links are full-size tap targets (Danny, 5 Nov 2026) */
  --glass:rgba(6,24,29,.42);
  --sky:#DCE9F1;
  --sky-2:#C9DDE9;
  --display:"Newsreader",ui-serif,Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  /* the utility strip plus the floating masthead */
  --chrome-h:calc(var(--ustrip-h) + 92px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus,var(--sail));outline-offset:3px;border-radius:4px}
img{display:block}

/* the hero photograph, held still while everything scrolls over it */
.res__bg{
  position:fixed;inset:0;z-index:-1;
  background:url(../hero-house.jpg) center 42%/cover no-repeat;
}
.res__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(6,24,29,.82) 0%,rgba(6,24,29,.68) 30%,rgba(6,24,29,.86) 100%),
    radial-gradient(120% 90% at 50% 30%,rgba(6,24,29,0) 10%,rgba(6,24,29,.5) 100%);
}

.res{padding-top:calc(var(--chrome-h) + 8px)}

/* ---------- the count and the filters ---------- */
.res__head{padding-top:clamp(14px,2.2vw,26px)}
.rcount{
  margin:0;font-family:var(--display);font-weight:300;
  font-size:clamp(1.55rem,3.1vw,2.5rem);line-height:1.08;letter-spacing:-.022em;
  color:var(--paper);text-shadow:0 2px 20px rgba(6,24,29,.6);
  scroll-margin-top:calc(var(--chrome-h) + 12px); /* results.js brings it back under the header */
}
/* sort first, then the filters — and every filter is the way to change it */
.rtools{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:16px}
.rsort{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--mist)}
/* the browser's own menu look is switched off, with our own arrow, so the
   Sort menu looks the same in Safari, Chrome, Firefox and Edge (Danny,
   17 Oct 2026). The open list itself stays the browser's. */
.rsort select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  border:1px solid var(--line);border-radius:999px;color:var(--paper);
  background-color:rgba(6,24,29,.55);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23F4F1E9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 4.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:11px 11px;
  padding:9px 36px 9px 15px;font-size:12.5px;line-height:1.3;cursor:pointer;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:border-color .2s ease,background-color .2s ease;
}
.rsort select:hover{border-color:rgba(244,241,233,.4);background-color:rgba(6,24,29,.72)}
.rsort select::-ms-expand{display:none}
.rsort select:focus-visible{outline:2px solid var(--focus,var(--sail));outline-offset:2px}
.rsort select option{background:var(--ink-2);color:var(--paper)}
.rchips{display:contents}
.rchips__filters{display:flex;flex-wrap:wrap;gap:9px}
.rchip{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:9px 16px;border-radius:999px;border:1px solid var(--line);
  background:rgba(6,24,29,.55);color:var(--mist);font-size:12.5px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.rchip b{font-weight:600;color:var(--paper)}
.rchip svg{width:13px;height:13px;flex:0 0 auto}
/* the editable ones say so */
.rchip--edit{
  cursor:pointer;
  transition:background-color .22s ease,border-color .22s ease,color .22s ease;
}
.rchip--edit:hover,.rchip--edit.is-open{
  background:var(--paper);border-color:var(--paper);color:var(--ink);
}
.rchip--edit:hover b,.rchip--edit.is-open b{color:var(--ink)}
.rchip--edit .rchip__pen{opacity:.5}
.rchip--edit:hover .rchip__pen{opacity:1}
.rchip--on{background:var(--sail);border-color:var(--sail);color:var(--on-accent)}
.rchip--on b{color:var(--on-accent)}
.rchip--offer{background:var(--gold);border-color:var(--gold);color:#06181D;font-weight:600}
.rchip--offer b{color:#06181D}
.rchip--clear{
  cursor:pointer;background:var(--sail);border-color:var(--sail);color:var(--on-accent);
  font-weight:600;
  transition:background-color .25s ease,border-color .25s ease;
}
.rchip--clear:hover{background:var(--sail-hi);border-color:var(--sail-hi)}

/* ---------- the two panes ---------- */
.rmain{
  width:min(1240px,100%);margin-inline:auto;padding-inline:23px;
  display:grid;grid-template-columns:1fr;
  gap:clamp(18px,2.4vw,30px);
  padding-top:clamp(18px,2.4vw,26px);padding-bottom:clamp(30px,4vw,54px);
  align-items:start;
}
.rgrid{
  display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,24px);
  margin:0;padding:0;list-style:none;
}

/* ---------- a cottage ----------
   The photograph is its own rounded tile with nothing over it but the
   pills; the name, rating, rooms and price sit underneath on white. */
.rcard{
  position:relative;display:flex;flex-direction:column;
  padding:8px;border-radius:24px;isolation:isolate;
  background:#fff;color:var(--ink);
  border:1px solid rgba(6,24,29,.08);
  box-shadow:0 24px 50px -30px rgba(0,0,0,.7);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s ease,box-shadow .35s ease;
}
.rcard.is-hot{
  transform:translateY(-4px);border-color:rgba(0,90,146,.75);
  box-shadow:0 30px 60px -28px rgba(0,90,146,.8);
}
.rcard__media{
  position:relative;overflow:hidden;isolation:isolate;
  aspect-ratio:4/3;border-radius:17px;background:var(--ink-2);
}
.rcard__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.8,.2,1);
}
.rcard:hover .rcard__media img,.rcard.is-hot .rcard__media img{transform:scale(1.05)}
.rcard__body{display:flex;flex-direction:column;flex:1 1 auto;padding:14px 10px 8px}
.rcard__tags{position:absolute;z-index:1;top:12px;left:12px;right:12px;display:flex;flex-wrap:wrap;gap:7px}
.rtag{
  display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;white-space:nowrap;
  font-size:12px;font-weight:500;color:var(--paper);
  background:rgba(6,24,29,.46);border:1px solid rgba(244,241,233,.24);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.rtag svg{width:13px;height:13px;flex:0 0 auto}
.rtag--deal{
  background:var(--gold);border-color:var(--gold);color:#06181D;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:11px;
}
.rcard__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.rcard__name{
  margin:0;font-family:var(--display);font-weight:300;
  font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.05;letter-spacing:-.02em;
}
.rcard__where{font-size:13px;color:rgba(6,24,29,.75);white-space:nowrap}
.stars{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ink)}
.stars svg{width:13px;height:13px;color:#D9A441;flex:0 0 auto}
.stars b{font-weight:600}
.stars span{color:rgba(6,24,29,.75)}
.rcard__stars{margin-top:6px}
.rcard__specs{
  margin:7px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:5px 14px;
  font-size:13px;color:rgba(6,24,29,.75);
}
.rcard__specs li{display:inline-flex;align-items:center;gap:6px}
.rcard__specs svg{width:14px;height:14px;opacity:.7}
.rcard__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding-top:14px;flex-wrap:wrap}
.rcard__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}
.rcard__was{font-size:13.5px;color:rgba(6,24,29,.75);text-decoration:line-through}
.rcard__now{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
.rcard__unit{font-size:12px;color:rgba(6,24,29,.75)}
/* the winter fuel charge inside the price (22 Oct 2026) */
.rcard__extra{flex-basis:100%;margin-top:-4px;font-size:12px;color:rgba(6,24,29,.75)}
.rcard__btn{
  display:inline-flex;align-items:center;padding:11px 21px;border-radius:999px;
  background:var(--sail);color:var(--on-accent);
  font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  transition:background-color .25s ease,color .25s ease;
}
.rcard:hover .rcard__btn,.rcard.is-hot .rcard__btn{background:var(--sail-hi);color:var(--on-accent)}
.rcard__link{position:absolute;inset:0;z-index:2;border-radius:24px}

.rnone{
  grid-column:1 / -1;padding:clamp(34px,6vw,60px) clamp(20px,4vw,44px);text-align:center;
  border:1px dashed var(--line);border-radius:24px;background:rgba(6,24,29,.5);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.rnone h2{
  margin:0 0 10px;font-family:var(--display);font-weight:300;
  font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.02em;
}
.rnone p{margin:0 auto;max-width:44ch;color:var(--mist);font-size:15px}
.rnone__acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.rbtn{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:14px 26px;border-radius:999px;border:1px solid var(--line);
  background:rgba(244,241,233,.06);color:var(--paper);
  font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease;
}
.rbtn:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.rbtn--go{background:var(--sail);border-color:var(--sail);color:var(--on-accent)}
.rbtn--go:hover{background:var(--sail-hi);border-color:var(--sail-hi);color:var(--on-accent)}

/* ---------- the map ---------- */
.rmap{
  position:relative;border-radius:24px;overflow:hidden;
  border:1px solid var(--line);background:var(--sky);
  height:min(62vh,520px);
}
/* isolate: both map engines stack their own panes up in the hundreds, and
   without a context of its own here they would paint over the card */
.rmap__canvas{position:absolute;inset:0;z-index:0;isolation:isolate}
.rmap__fallback{
  position:absolute;inset:0;display:none;place-items:center;text-align:center;padding:30px;
  color:rgba(6,24,29,.75);font-size:14px;
}
.rmap.is-down .rmap__fallback{display:grid}
.rmap .leaflet-container{font-family:var(--sans);background:var(--sky)}
.rmap .leaflet-control-zoom a{color:var(--ink);border-color:rgba(6,24,29,.14);font-family:var(--sans);font-weight:400}
.rmap .leaflet-control-attribution{font-size:10px;background:rgba(255,255,255,.82);color:#333}
.rmap .leaflet-control-attribution a{color:#005A92}

/* the price pills: the same markup whichever map is underneath */
.rpin{background:none;border:0;line-height:1}
.rpin__body{
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  padding:6px 12px;border-radius:999px;cursor:pointer;
  background:#fff;color:var(--ink);border:1px solid rgba(6,24,29,.2);
  font-family:var(--sans);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
  box-shadow:0 6px 18px -8px rgba(6,24,29,.5);
  transform-origin:center bottom;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .25s ease;
}
/* hovering a pill shows the same blue as clicking it, so you always know
   which one you are on */
.rpin__body:hover{
  background:var(--sail);border-color:var(--sail);color:var(--on-accent);
  transform:scale(1.1);box-shadow:0 12px 26px -10px rgba(0,90,146,.65);
}
.rpin.is-hot .rpin__body{
  background:var(--sail);border-color:var(--sail);color:var(--on-accent);
  transform:scale(1.16);box-shadow:0 14px 30px -10px rgba(0,90,146,.7);
}
.rpin.is-deal .rpin__body{background:var(--gold);border-color:var(--gold);color:#06181D}
/* "from £x": the weekly price when there are no dates to price */
.rpin__body i{font-style:normal;font-weight:400;font-size:11.5px;margin-right:4px;opacity:.75}
.rpin.is-deal .rpin__body:hover,.rpin.is-deal.is-hot .rpin__body{
  background:var(--sail);border-color:var(--sail);color:var(--on-accent);
}

/* ---------- the card a pin opens ---------- */
.rcardpop{
  position:absolute;z-index:3;width:272px;
  transform:translate(-50%,calc(-100% - 6px));
  opacity:0;pointer-events:none;
  transition:opacity .22s ease;
}
.rcardpop.is-on{opacity:1;pointer-events:auto}
/* the list card, smaller */
.rcard--pop{
  width:272px;padding:6px;border-radius:20px;
  box-shadow:0 26px 60px -20px rgba(6,24,29,.6),0 2px 8px rgba(6,24,29,.12);
}
.rcard--pop:hover{transform:none}
.rcard--pop .rcard__media{border-radius:15px}
.rcard--pop .rcard__tags{top:9px;left:9px;right:48px;gap:5px}
.rcard--pop .rtag{padding:4px 9px;font-size:11px}
.rcard--pop .rtag svg{width:11px;height:11px}
.rcard--pop .rcard__body{padding:10px 8px 6px}
.rcard--pop .rcard__name{font-size:1.25rem}
.rcard--pop .rcard__where{font-size:12px}
.rcard--pop .rcard__stars{margin-top:4px}
.rcard--pop .stars{font-size:11.5px}
.rcard--pop .rcard__specs{margin-top:5px;font-size:12px;gap:4px 11px}
.rcard--pop .rcard__specs svg{width:12px;height:12px}
.rcard--pop .rcard__foot{padding-top:10px;gap:10px}
.rcard--pop .rcard__now{font-size:16px}
.rcard--pop .rcard__btn{padding:9px 15px;font-size:10.5px}
.rcard--pop .rcard__link{border-radius:20px}
.rcardpop__x{
  position:absolute;z-index:3;top:14px;right:14px;
  display:grid;place-items:center;width:30px;height:30px;border-radius:999px;cursor:pointer;
  border:0;background:rgba(255,255,255,.94);color:#06181D;
  box-shadow:0 2px 10px rgba(6,24,29,.25);
  transition:transform .2s ease;
}
.rcardpop__x svg{width:11px;height:11px}
.rcardpop__x:hover{transform:scale(1.06)}

.rmap__toggle{
  position:fixed;z-index:44;left:50%;bottom:24px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:14px 24px;border-radius:999px;border:0;
  background:var(--paper);color:var(--ink);
  font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 22px 50px -18px rgba(0,0,0,.8);
}
.rmap__toggle svg{width:15px;height:15px}

/* ---------- boat hire ---------- */
.bhire{
  position:relative;z-index:2;
  border-top:1px solid var(--line);
  background:rgba(6,24,29,.62);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:clamp(40px,5vw,66px) 0 clamp(40px,5vw,62px);
}
.bhire__head{display:flex;flex-direction:column;gap:9px;margin-bottom:clamp(20px,2.6vw,30px)}
.bhire__eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--mist)}
.bhire__title{
  margin:0;font-family:var(--display);font-weight:300;
  font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.06;letter-spacing:-.022em;
}
.bhire__copy{margin:0;max-width:52ch;color:var(--mist);font-size:15px;line-height:1.55}
.barmount--boats{width:100%}
.bhire__grid{
  display:grid;grid-template-columns:1fr;gap:clamp(12px,1.6vw,18px);
  margin:clamp(22px,3vw,32px) 0 0;padding:0;list-style:none;
}
.bcard2{
  position:relative;display:flex;flex-direction:column;
  padding:7px;border-radius:22px;isolation:isolate;
  background:#fff;color:var(--ink);border:1px solid rgba(6,24,29,.08);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s ease;
}
.bcard2:hover{transform:translateY(-4px);border-color:rgba(0,90,146,.7)}
.bcard2__media{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:16px;background:var(--ink-2)}
.bcard2__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.8,.2,1);
}
.bcard2:hover .bcard2__media img{transform:scale(1.05)}
.bcard2__body{display:flex;flex-direction:column;flex:1 1 auto;padding:12px 9px 8px}
.bcard2__tag{
  position:absolute;top:12px;left:12px;padding:6px 11px;border-radius:999px;
  background:rgba(6,24,29,.66);color:var(--paper);border:1px solid rgba(244,241,233,.24);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-size:11.5px;font-weight:500;
}
.bcard2__taken{background:rgba(6,24,29,.72);color:rgba(244,241,233,.75)}
.bcard2__name{
  margin:0;font-family:var(--display);font-weight:300;
  font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.05;letter-spacing:-.02em;
}
.bcard2__copy{margin:5px 0 14px;font-size:12.5px;color:rgba(6,24,29,.75);line-height:1.45}
.bcard2__btn{
  margin-top:auto;display:inline-flex;align-self:flex-start;align-items:center;
  padding:10px 19px;border-radius:999px;background:var(--sail);color:var(--on-accent);
  font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  transition:background-color .25s ease,color .25s ease;
}
.bcard2:hover .bcard2__btn{background:var(--sail-hi);color:var(--on-accent)}
.bcard2.is-off{opacity:.45}
.bcard2.is-off:hover{transform:none;border-color:rgba(6,24,29,.08)}
.bcard2__price{margin:-6px 0 14px;font-size:12.5px;color:rgba(6,24,29,.75)}
.bcard2__price b{font-size:15px;font-weight:600;color:var(--ink)}
.bcard2__btn--call{background:var(--ink)}
.bhire__note{margin:clamp(16px,2vw,22px) 0 0;font-size:12.5px;color:var(--mist-2)}

@media (min-width:600px){
  .bhire__grid{grid-template-columns:1fr 1fr}
}
@media (min-width:980px){
  .bhire__grid{grid-template-columns:repeat(5,1fr)}
}
@media (min-width:760px){
  .rgrid{grid-template-columns:1fr 1fr}
}
/* Desktop: the map is pinned to the window, under the header, and never
   moves. Everything else — the count, the filters, the cottages and the boat
   hire — is one column on its left, and that column is what scrolls. The
   pair sits in a centred frame, so a big screen gets margins, not a
   stretched grid. */
@media (min-width:1080px){
  .res{
    --frame:min(1560px,calc(100vw - 46px));
    --side:calc((100vw - var(--frame)) / 2);
    --map-w:clamp(360px,calc(var(--frame) * .4),640px);
    --gap:clamp(20px,2vw,30px);
    padding-left:var(--side);
    padding-right:calc(var(--side) + var(--map-w) + var(--gap));
  }
  .res .wrap,.rmain{width:auto;max-width:none;margin:0;padding-inline:0}
  /* the count and the filters run the full width, over the map's column
     too: the map starts level with the cards, below them, so the filters fit
     on one line and the first cards sit higher (Danny, 28 Oct 2026). On a
     narrower window they still wrap rather than run off the edge. */
  .res:not(.bpg) .res__head{margin-right:calc(-1 * (var(--map-w) + var(--gap)))}
  /* at least a window tall, so a short list (still checking availability, or
     nothing in this part of the map) never pulls the footer up beside the map */
  .rmain{display:block;min-height:calc(100vh - var(--chrome-h))}
  .rgrid{grid-template-columns:1fr 1fr}
  /* as tall as the window allows once pinned (Kevin, 27 Oct 2026; it was a
     fixed 640px). results.js shortens it while it sits lower down, level
     with the cards, so its foot is always 16px above the window's edge */
  .rmap{
    position:fixed;z-index:1;
    top:calc(var(--chrome-h) + 12px);bottom:auto;
    right:var(--side);width:var(--map-w);
    height:calc(100vh - var(--chrome-h) - 28px);
  }
  .rmap__toggle{display:none}
  /* in the column, the boat hire is a panel rather than a full-width band */
  .bhire{
    margin-bottom:16px;padding:clamp(28px,3vw,40px);
    border:1px solid var(--line);border-radius:24px;
  }
  .bhire__grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
  /* the footer runs full width; results.js lifts the map with it at the end */
  .foot{z-index:3}
}

@media (max-width:1079px){
  .rmap.is-hidden{display:none}
  .rmap{
    position:fixed;z-index:35;inset:var(--chrome-h) 0 0 0;
    height:auto;border-radius:0;border:0;
  }
  .rmap__toggle{bottom:28px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- the boat hire page ---------- */
.bpg .res__head{display:flex;flex-direction:column;gap:10px;padding-bottom:clamp(20px,2.6vw,30px)}
.bpg__lead{margin:0;max-width:58ch;color:var(--mist);font-size:15.5px;line-height:1.55;text-shadow:0 2px 16px rgba(6,24,29,.6)}
.bhire--page{border-top:1px solid var(--line)}
.bhire--page .bhire__grid{margin-top:clamp(24px,3vw,34px)}
/* the boat page has no map: undo the results page's left-column frame */
@media (min-width:1080px){
  .res.bpg{padding-left:0;padding-right:0}
  .bpg .wrap{width:min(1240px,100%);margin-inline:auto;padding-inline:23px}
  .bpg .bhire--page{width:min(1194px,calc(100% - 46px));margin-inline:auto}
  .bpg .bhire--page .wrap{width:auto;padding-inline:0}
  .bpg .bhire__grid{grid-template-columns:repeat(5,1fr)}
}

/* ---------- a listing page (WordPress: /cottages/…, /region/…, /type/…) ----------
   The results page with the listing's own heading and introduction above
   the count and filters, and the listing's longer text folded under it. */
.rlist{display:flex;flex-direction:column;gap:10px;margin-bottom:clamp(14px,2vw,22px)}
.rlist__title{
  margin:0;font-family:var(--display);font-weight:300;
  font-size:clamp(1.9rem,3.8vw,3rem);line-height:1.04;letter-spacing:-.024em;
  color:var(--paper);text-shadow:0 2px 20px rgba(6,24,29,.6);
}
.rlist .bpg__lead p{margin:0 0 .6em}
.rlist .bpg__lead p:last-child{margin-bottom:0}
.rlist__more{max-width:68ch;color:var(--mist);font-size:14.5px;line-height:1.6;text-shadow:0 2px 16px rgba(6,24,29,.6)}
.rlist__more summary{cursor:pointer;width:max-content;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--paper)}
.rlist__more[open] summary{margin-bottom:8px}
.rlist__more a{color:var(--paper)}
.rlist + .rcount{font-size:clamp(1.15rem,2vw,1.5rem)}

/* ---------- accessibility: 44px tap targets (2.5.5), 18 Oct 2026 ---------- */
.rchip{min-height:44px}
.rsort select{min-height:44px}
.stars,.rpin__body{position:relative}
.stars::before,.rpin__body::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.bcard2__btn{min-height:44px}

/* Phones: nothing smaller than 12px (MOBILE-AUDIT L1) and every control
   at least 44px to tap (M3), 28 Oct 2026 */
@media (max-width:719px){
  .rtag--deal,.rcard__btn,.rpin__body i,.rcard--pop .rtag,.rcard--pop .stars,
  .rcard--pop .rcard__btn,.bhire__eyebrow,.bcard2__tag,.bcard2__btn{font-size:12px}
  .rmap .leaflet-control-zoom a{width:44px;height:44px;line-height:44px}
}

/* Phones: the row of pills becomes one summary button that opens the
   full-screen search (results.js, Danny, 28 Oct 2026). Sort sits under it
   at the left; a map area, offer or deal still shows as its own small pill. */
.rsum{display:none}
@media (max-width:719px){
  .rtools{gap:8px;margin-top:12px}
  .rsum{display:block;flex:1 1 100%;min-width:0}
  .rsum .slaunch{width:100%}
  .rchips .rchip--edit,.rchips .rchips__filters,.rchips .rchip--clear{display:none}
  .rsort{font-size:12px}
  .rsort select{padding-block:8px;font-size:12.5px}
}