/* Acreage Core — Elementor widget front end.
   Deliberately restrained: every colour that matters is exposed as an Elementor
   control, so the widgets take on whichever theme they land in rather than
   fighting it. --acreage-w-accent is the one hook everything shares. */

.acreage-w-grid,
.acreage-w-tiles,
.acreage-w-cats,
.acreage-w-gallery{display:grid;}

.acreage-w-card,
.acreage-w-filters,
.acreage-w-cats,
.acreage-w-detail{--acreage-w-accent:#9C6423;}

.acreage-w-notice{
  border:1px dashed currentColor;opacity:.7;padding:12px 14px;font-size:13px;
  line-height:1.5;margin:0 0 12px;
}
.acreage-w-empty{margin:0;padding:24px 0;opacity:.8;}

/* ------------------------------------------------------------------- grid */
/* The card itself is specified in one place, at the end of this file, under
   "THE APPROVED COMP". It used to be specified here as well, and then twice
   more further down — four passes stacked on top of each other, each one only
   partly overriding the last, so what a card actually looked like depended on
   which rule happened to win. One block now, and this is not it. */

/* ----------------------------------------------------------------- search */
.acreage-w-search{padding:24px;}
.acreage-w-search__heading{margin:0 0 18px;font-size:1.3em;}
.acreage-w-search__fields{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-bottom:18px;
}
.acreage-w-search__field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.acreage-w-search__label{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;opacity:.7;
}
.acreage-w-search__select{
  width:100%;padding:10px 12px;border:1px solid rgba(0,0,0,.2);background:#fff;
  border-radius:0;font:inherit;
}
.acreage-w-search__actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
/* Search, filter and enquiry buttons all read the theme's button contract,
   so they are identical to the page buttons rather than three near-misses. */
.acreage-w-search__submit,
.acreage-w-filters__submit{
  display:inline-flex;align-items:center;justify-content:center;
  line-height:var(--acreage-btn-line,1.4);
  min-height:var(--acreage-btn-min-h,48px);
  white-space:nowrap;
  cursor:pointer;
  background-color:var(--acreage-btn-bg,#354027);
  color:var(--acreage-btn-text,#F4F2EA);
  padding:var(--acreage-btn-pad-y,13px) var(--acreage-btn-pad-x,28px);
  border:var(--acreage-btn-border,0px) solid var(--acreage-btn-bg,#354027);
  border-radius:var(--acreage-btn-radius,0px);
  font-family:inherit;
  font-size:var(--acreage-btn-size,12px);
  font-weight:var(--acreage-btn-weight,700);
  letter-spacing:var(--acreage-btn-tracking,.14em);
  text-transform:var(--acreage-btn-transform,uppercase);
  transition:background .18s,color .18s,border-color .18s;
}
.acreage-w-search__submit:hover,
.acreage-w-filters__submit:hover{
  background-color:var(--acreage-btn-hover-bg,#9C6423);
  color:var(--acreage-btn-hover-text,#fff);
  border-color:var(--acreage-btn-hover-bg,#9C6423);
}
.acreage-w-search__clear,
.acreage-w-filters__clear{font-size:13px;opacity:.75;}

/* --- active filters ------------------------------------------------------
   A row of what is currently in force, each removable on its own, with a
   Clear all beside them. Sits at the TOP of the panel: a visitor who has
   arrived from a province tile needs to see why the list is short before they
   scroll past six collapsed checkbox groups looking for the reason. */
.acreage-w-filters__active{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  margin:0 0 18px;padding:0 0 16px;
  border-bottom:1px solid var(--acreage-rule,#DED5C0);
}
.acreage-w-filters__activelabel{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--acreage-stone,#8A8172);
}
.acreage-w-filters__chips{
  display:flex;flex-wrap:wrap;gap:8px;
  list-style:none;margin:0;padding:0;
}
.acreage-w-filters__chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;
  border:1px solid var(--acreage-rule,#DED5C0);
  background:#fff;
  font-size:13px;line-height:1.2;
  color:var(--acreage-ink,#1F2A21)!important;
  text-decoration:none;
}
.acreage-w-filters__chip:hover{
  border-color:var(--acreage-moss,#354027);
  background:var(--acreage-panel,#EFE9DA);
}
/* The x is the affordance, so it must not fade into the label. */
.acreage-w-filters__chipx{
  font-size:15px;line-height:1;
  color:var(--acreage-stone,#8A8172);
}
.acreage-w-filters__chip:hover .acreage-w-filters__chipx{color:var(--acreage-sienna,#9C6423);}
.acreage-w-filters__clearall{
  font-size:13px;
  color:var(--acreage-moss,#354027)!important;
  text-decoration:underline;text-underline-offset:.18em;
}

/* ---------------------------------------------------------------- filters */
.acreage-w-filters__heading{margin:0 0 16px;font-size:1.15em;}
.acreage-w-filters__group{border:0;margin:0 0 20px;padding:0;}
.acreage-w-filters__legend{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  opacity:.7;margin-bottom:8px;padding:0;
}
.acreage-w-filters__list{list-style:none;margin:0;padding:0;}
.acreage-w-filters__option{
  display:flex;align-items:center;gap:8px;padding:4px 0;cursor:pointer;font-size:.95em;
}
.acreage-w-filters__count{margin-left:auto;opacity:.55;font-variant-numeric:tabular-nums;font-size:.85em;}
.acreage-w-filters__actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
/* Layout only. The filter panel is a narrow sidebar column, so the button fills
   it instead of sitting at content width. */
.acreage-w-filters__submit{width:100%;}

/* --- the collapsible group of filters ----------------------------------- */
/* On a desktop this disclosure is not a disclosure: the summary is hidden and
   the script leaves it open, so the panel is the sidebar it always was. The
   markup is the same at both sizes because the alternative — rendering two
   different panels — is two things to keep in step. */
.acreage-w-filters__toggle{display:none;}

@media (max-width:900px){
  /* The panel heading and the disclosure label say the same thing one line
     apart. The summary is the one that has to stay — it is the control — so
     the heading stands down and the summary becomes the heading. */
  .acreage-w-filters__heading{
    position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
  .acreage-w-filters__toggle{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    min-height:48px;
    padding:12px 0;
    cursor:pointer;
    list-style:none;
    font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
    color:var(--acreage-moss,#354027);
  }
  /* Safari draws its own triangle through ::-webkit-details-marker and ignores
     list-style, so both have to be turned off to draw our own. */
  .acreage-w-filters__toggle::-webkit-details-marker{display:none;}

  /* The chevron. Rotates when the panel opens, so the control says which way
     it is going rather than only what it is called. */
  .acreage-w-filters__toggle::after{
    content:"";
    width:9px;height:9px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg);
    transition:transform 160ms ease;
    margin-inline-end:4px;
  }
  .acreage-w-filters__disclosure[open] > .acreage-w-filters__toggle::after{
    transform:rotate(-135deg);
  }
  /* The summary carries no rule under it.
     It had one, from before this panel sat inside a raised card. Inside the
     card the line had nothing below it to divide — closed, it drew a hairline
     across the panel 15px above the card's own bottom edge, inset from both
     sides, which read as a divider someone had forgotten to remove. The
     chevron is what says there is more here. */
  .acreage-w-filters__panel > .acreage-w-filters__group:first-of-type{margin-top:18px;}

  /* A checkbox row is a tap target and was 21px tall — the box itself is 13px.
     Padding rather than a min-height on the label, so the whole row including
     the count on the right stays clickable. */
  .acreage-w-filters__option{padding:11px 0;}
  .acreage-w-filters__option input[type="checkbox"]{width:18px;height:18px;flex:0 0 auto;}

  /* The opened panel is capped and scrolls itself.
     Four axes of seventeen checkboxes came to 1 100px on a 375 screen — the
     visitor opened the filters and then scrolled past four screens of them
     before reaching a single farm, which is what made the panel read as an
     obstacle rather than a tool. Capped, it is a block of about nine rows with
     the rest a flick away, and the farms stay where they were.

     overscroll-behavior stops the flick handing off to the page once the list
     ends, which is what makes a nested scroller feel broken on a phone. */
  .acreage-w-filters__panel{
    max-height:min(58vh,460px);
    overflow-y:auto;
    overscroll-behavior:contain;
    /* Room for the scrollbar so it never sits on top of the counts, and the
       thin variant where the browser offers one — a phone draws an overlay
       bar, a desktop at this width draws a full-width one. */
    scrollbar-width:thin;
    padding-inline-end:10px;
  }

  /* The axes need to be told apart at a glance in a list this long. A hairline
     between them, and the legend given the same air above it as the rows below
     — 8px was enough on a desktop sidebar read all at once, and not enough in
     something scrolled past. */
  .acreage-w-filters__legend{margin-bottom:12px;}
  /* The rule goes on the legend, not on the fieldset.
     A <legend> is drawn through its fieldset's top border — the border stops
     either side of it — so a border-top on the group came out as a hairline
     with "PROVINCE" punched out of the middle of it. Given full width, the
     legend draws the line itself and the label sits under it. */
  .acreage-w-filters__group + .acreage-w-filters__group > .acreage-w-filters__legend{
    width:100%;
    border-top:1px solid var(--acreage-rule,#DED5C0);
    padding-top:20px;
  }
}

/* --- live filtering ------------------------------------------------------
   Once the script has a grid to drive, Apply has nothing left to do: the farms
   changed the moment the box was ticked, and a button that does nothing is
   worse than no button. The row goes rather than the button alone, because the
   "Clear 2 filters" link beside it is the same offer as Clear all in the chip
   bar above. Both only ever disappear AFTER the script has bound, so a visitor
   with no JavaScript keeps the form intact. */
.acreage-w-filters.is-live .acreage-w-filters__actions{display:none;}

/* How many farms the current combination found. Sits under the chip bar, where
   the reason for a short list already is, and stays quiet enough to read as a
   caption rather than a result banner. */
.acreage-w-filters__result{
  margin:0 0 18px;font-size:13px;
  color:var(--acreage-stone,#8A8172);
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------------------ tiles */
.acreage-w-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;}
.acreage-w-tile{
  display:flex;flex-direction:column;gap:4px;padding:20px;text-decoration:none;
  background:rgba(0,0,0,.03);transition:background .18s ease;
}
.acreage-w-tile__name{font-size:1.05em;}
.acreage-w-tile__count{font-size:12px;opacity:.65;}

/* ---------------------------------------------------------- category cards */
.acreage-w-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;}
.acreage-w-cat{text-decoration:none;color:inherit;display:block;}
.acreage-w-cat__media{display:block;overflow:hidden;aspect-ratio:3/2;background:rgba(0,0,0,.06);}
.acreage-w-cat__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.6,.2,1);}
.acreage-w-cat:hover .acreage-w-cat__media img{transform:scale(1.04);}
.acreage-w-cat__body{display:block;padding-top:14px;}
.acreage-w-cat__count{
  display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;opacity:.6;margin-bottom:4px;
}
.acreage-w-cat__title{display:block;font-size:1.3em;margin-bottom:6px;}
.acreage-w-cat__text{display:block;opacity:.8;font-size:.95em;margin-bottom:10px;}
.acreage-w-cat__more{
  display:inline-block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--acreage-w-accent);
}

/* ----------------------------------------------------------------- detail */
/* --- the written sections ------------------------------------------------
   Improvements, Wildlife & vegetation, Land claims. From the listing comp:
   a hairline above each one, generous air around it, and the heading in the
   serif — the same face as the farm name in the hero and on every card.

   The sans headings these replace made the sections read as form labels over
   form fields. These are the parts of the page an interested buyer actually
   reads, and the serif is what says so. */
.acreage-w-detail__section{
  border-top:1px solid var(--acreage-rule,#DED5C0);
  padding:clamp(26px,3vw,40px) 0;
}
/* Nothing follows the last one, so it should not reserve room for it. */
.acreage-w-detail__section:last-child{padding-bottom:0;}

.acreage-w-detail__heading{
  font-family:var(--acreage-serif,Georgia,"Times New Roman",serif);
  font-weight:400;
  font-size:clamp(22px,2.4vw,30px);
  line-height:1.2;
  letter-spacing:0;
  margin:0 0 16px;
  color:var(--acreage-moss-deep,#232B18);
}
.acreage-w-prose > *:first-child{margin-top:0;}
.acreage-w-prose > *:last-child{margin-bottom:0;}

/* The written body, to the comp: 16/1.75 in a softer grey than the page ink,
   and — the part that matters most — a measure. The column these sit in is
   over 800px wide, which at full bleed is about ninety-five characters a line;
   the eye loses its place on the way back to the left margin. 62ch is the
   comp's figure and lands around seventy. */
.acreage-w-detail__section .acreage-w-prose{
  font-size:16px;
  line-height:1.75;
  color:#5A5F52;
  max-width:62ch;
}
.acreage-w-detail__section .acreage-w-prose p{margin:0 0 14px;text-wrap:pretty;}

/* --- a part with nothing to show -----------------------------------------
   The widget prints nothing for a farm that has no video, no wildlife section
   or no map, but the Elementor section around it still draws its background,
   its rule and its padding. These fold that away.

   Two rules, because there are two cases and only one of them is the section's
   to answer for: the widget itself always collapses, and the whole band
   collapses only when that widget was the only thing in it. A band holding
   other widgets keeps its shape — hiding it would take those with it. */
.elementor-widget:has(> .elementor-widget-container > .acreage-w-detail--empty){display:none;}
.elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget:only-child > .elementor-widget-container > .acreage-w-detail--empty){display:none;}

/* --- the location band ---------------------------------------------------
   From the listing comp: the serif heading, a short written note about where
   the farm is, and the map under it. The band's own background and padding are
   left to whichever Elementor section it is dropped into — the widget draws
   its contents, the page draws the band. */
.acreage-w-location__heading{margin-bottom:8px;}
.acreage-w-location__note{
  margin:0 0 24px;
  font-size:15px;line-height:1.6;
  color:#5F6553;
  max-width:56ch;
  text-wrap:pretty;
}
/* The frame is sized here rather than on the iframe, so a map that is slow to
   arrive still holds its space and the page below it does not jump. */
.acreage-w-location__map{
  position:relative;
  height:var(--acreage-w-map-h,clamp(220px,30vw,420px));
  background:#E4DCCA;
  border:1px solid var(--acreage-rule,#DED5C0);
}
.acreage-w-location__map iframe{
  display:block;width:100%;height:100%;border:0;
  /* Google's tiles run warm against this palette; the comp pulls them back. */
  filter:saturate(.9);
}
.acreage-w-price{margin:0;font-size:1.6em;font-weight:600;font-variant-numeric:tabular-nums;}
.acreage-w-price .acreage-price__vat{display:block;font-size:11px;font-weight:400;letter-spacing:.06em;opacity:.6;margin-top:4px;}

.acreage-w-facts{margin:0;display:grid;gap:0;}
.acreage-w-facts__row{
  display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid rgba(0,0,0,.1);
}
.acreage-w-facts__row:last-child{border-bottom:0;}
.acreage-w-facts dt{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;opacity:.6;
}
.acreage-w-facts dd{margin:0;font-weight:600;text-align:right;}

.acreage-w-species{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.acreage-w-species__chip{
  display:inline-block;padding:6px 12px;border:1px solid rgba(0,0,0,.18);
  font-size:13px;text-decoration:none;color:inherit;
}
.acreage-w-species__chip:hover{border-color:var(--acreage-w-accent);color:var(--acreage-w-accent);}

/* A row of thumbnails under the hero, not a second grid of full-size pictures.
   The widget prints the track size inline from its "Photograph size" control;
   this is the fallback for a gallery rendered without it. auto-FILL, not
   auto-fit: with three photographs the empty tracks stay empty and the
   thumbnails keep their size, instead of three images stretching to fill the
   width and undoing the whole point. */
.acreage-w-gallery{grid-template-columns:repeat(auto-fill,minmax(min(260px,calc(50% - 5px)),1fr));gap:10px;}
.acreage-w-gallery__item{display:block;overflow:hidden;aspect-ratio:3/2;background:rgba(0,0,0,.06);}
.acreage-w-gallery__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.6,.2,1);}
.acreage-w-gallery__item:hover img{transform:scale(1.05);}
.acreage-w-video iframe{width:100%;aspect-ratio:16/9;height:auto;display:block;}

/* ------------------------------------------------------------------- form */
.acreage-w-form__heading{margin:0 0 14px;font-size:1.3em;}
.acreage-w-form__about{margin:0 0 14px;opacity:.8;}
.acreage-w-form__field{display:flex;flex-direction:column;gap:6px;margin:0 0 14px;}
.acreage-w-form__field label{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;opacity:.7;
}
/* The select is listed here rather than left to the browser so the "Regarding"
   dropdown on the contact page matches the fields above it — a default select
   is a different height, a different border and a different font on every OS,
   and it sat in the middle of the form looking like it belonged to another
   site. The arrow it draws is replaced further down, in the select-arrow
   block, rather than left native. */
.acreage-w-form__field input,
.acreage-w-form__field select,
.acreage-w-form__field textarea{
  width:100%;padding:11px 12px;border:1px solid rgba(0,0,0,.2);background:#fff;
  font:inherit;border-radius:0;
}
/* Selects ignore the shared padding on their own text baseline in Safari, and
   sit a pixel taller than an input in Chrome. Matching the input's height
   explicitly is the only thing that lines the two up everywhere. */
.acreage-w-form__field select{height:calc(1.4em + 24px);}
.acreage-w-form__submit{
  display:inline-flex;align-items:center;justify-content:center;
  line-height:var(--acreage-btn-line,1.4);
  min-height:var(--acreage-btn-min-h,48px);
  white-space:nowrap;
  cursor:pointer;
  background-color:var(--acreage-btn-bg,#354027);
  color:var(--acreage-btn-text,#F4F2EA);
  padding:var(--acreage-btn-pad-y,13px) var(--acreage-btn-pad-x,28px);
  border:var(--acreage-btn-border,0px) solid var(--acreage-btn-bg,#354027);
  border-radius:var(--acreage-btn-radius,0px);
  font-family:inherit;
  font-size:var(--acreage-btn-size,12px);
  font-weight:var(--acreage-btn-weight,700);
  letter-spacing:var(--acreage-btn-tracking,.14em);
  text-transform:var(--acreage-btn-transform,uppercase);
  transition:background .18s,color .18s,border-color .18s;
}
.acreage-w-form__submit:hover{
  background-color:var(--acreage-btn-hover-bg,#9C6423);
  color:var(--acreage-btn-hover-text,#fff);
  border-color:var(--acreage-btn-hover-bg,#9C6423);
}
.acreage-w-form__ok,
.acreage-w-form__error{padding:14px 16px;margin:0;border-left:3px solid var(--acreage-w-accent,#354027);background:rgba(0,0,0,.04);}
.acreage-w-form__error{border-left-color:#B3261E;}
/* The honeypot must be unreachable for people but present for bots — never
   display:none, which some bots detect and skip. */
.acreage-w-form__trap{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ----------------------------------------------------------------- mobile */
@media (max-width:880px){
  .acreage-w-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .acreage-w-search__fields{grid-template-columns:repeat(2,minmax(0,1fr));}
  .acreage-w-tiles{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:560px){
  .acreage-w-grid,
  .acreage-w-cats,
  .acreage-w-search__fields{grid-template-columns:1fr;}
  .acreage-w-tiles{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* The gallery needs no rule here: its track size is capped at half the row,
     so two thumbnails fit at any width on their own. */
}
@media (prefers-reduced-motion:reduce){
  .acreage-w-card__media img,
  .acreage-w-cat__media img,
  .acreage-w-gallery__item img{transition:none;}
  .acreage-w-card:hover .acreage-w-card__media img,
  .acreage-w-cat:hover .acreage-w-cat__media img,
  .acreage-w-gallery__item:hover img{transform:none;}
}

/* ------------------------------------------------- grid: tabs, scroller, more */
/* Tabs. A row of buttons, not links — they change what is shown without
   navigating, and a button is the honest element for that. */
.acreage-w-tabs{
  display:flex;flex-wrap:wrap;gap:6px;margin:0 0 26px;
  border-bottom:1px solid var(--acreage-rule,#DED5C0);padding-bottom:2px;
}
.acreage-w-tab{
  appearance:none;background:none;border:0;cursor:pointer;
  padding:10px 18px;font:inherit;font-size:.78rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--acreage-stone,#665F52);
  border-bottom:2px solid transparent;margin-bottom:-3px;
  transition:color 160ms ease,border-color 160ms ease;
}
.acreage-w-tab:hover{color:var(--acreage-moss,#354027);}
.acreage-w-tab.is-on{
  color:var(--acreage-moss,#354027);
  border-bottom-color:var(--acreage-moss,#354027);
}

/* Loading state. The grid dims rather than emptying, so the page does not jump
   and the visitor keeps their place. */
.acreage-w-gridwrap.is-loading .acreage-w-grid{opacity:.45;transition:opacity 120ms ease;}
.acreage-w-gridwrap{position:relative;}

/* Load more. */
.acreage-w-more{margin-top:32px;text-align:center;}
/* "Show more farms" is the outline variant. It was its own thing — 13/34 at
   .78rem with a moss fill on hover — which is how a fourth button appearance
   got onto the archive without anyone deciding to add one. */
.acreage-w-more__btn{
  display:inline-flex;align-items:center;justify-content:center;
  line-height:var(--acreage-btn-line,1.4);
  min-height:var(--acreage-btn-min-h,48px);
  white-space:nowrap;
  appearance:none;cursor:pointer;
  background-color:transparent;
  color:var(--acreage-btn-bg,#354027);
  border:1px solid var(--acreage-btn-bg,#354027);
  border-radius:var(--acreage-btn-radius,0px);
  padding:var(--acreage-btn-pad-y,13px) var(--acreage-btn-pad-x,28px);
  font-family:inherit;
  font-size:var(--acreage-btn-size,12px);
  font-weight:var(--acreage-btn-weight,700);
  letter-spacing:var(--acreage-btn-tracking,.14em);
  text-transform:var(--acreage-btn-transform,uppercase);
  transition:background .18s,color .18s,border-color .18s;
}
.acreage-w-more__btn:hover{
  background-color:var(--acreage-btn-hover-bg,#9C6423);
  color:var(--acreage-btn-hover-text,#fff);
  border-color:var(--acreage-btn-hover-bg,#9C6423);
}
.acreage-w-more__btn[disabled]{opacity:.5;cursor:default;}

/* Sideways scroller. CSS scroll-snap only — swipe, trackpad, scrollbar and
   keyboard all work without a line of JavaScript, which is why there is no
   carousel library here. */
.acreage-w-grid--scroll{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(280px,var(--acreage-w-slide,32%));
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-left:2px;
  padding-bottom:14px;
  scrollbar-width:thin;
}
.acreage-w-grid--scroll > *{scroll-snap-align:start;}
@media (max-width:900px){
  .acreage-w-grid--scroll{grid-auto-columns:minmax(260px,78%);}
}

/* =========================================================== site nav widget */
/* One row above --acreage-nav-bp, a burger below it. The breakpoint is set
   per-widget as an inline custom property, so the query below uses a container-
   agnostic trick: the desktop layout is the default and the mobile rules are
   applied by a class the script never needs to set — CSS alone decides. */
.acreage-nav{
  --acreage-nav-bg:var(--acreage-paper,#F5F0E4);
  --acreage-nav-link:var(--acreage-ink-soft,#3C4A3F);
  background:var(--acreage-nav-bg);
  border-bottom:1px solid var(--acreage-rule,#DED5C0);
}
.acreage-nav--sticky{position:sticky;top:0;z-index:60;}

.acreage-nav__bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(16px,3vw,40px);
  padding:14px clamp(18px,4vw,72px);
  max-width:1440px;margin:0 auto;
}

.acreage-nav__brand{display:flex;flex-direction:column;line-height:1.1;min-width:0;}
.acreage-nav__name{
  font-family:var(--acreage-serif,Georgia,serif);
  font-size:clamp(19px,2.4vw,23px);
  color:var(--acreage-moss,#354027);text-decoration:none;letter-spacing:.01em;
}
.acreage-nav__tag{
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acreage-stone,#665F52);margin-top:5px;
}
.acreage-nav__brand img{max-height:52px;width:auto;}

.acreage-nav__panel{display:flex;align-items:center;gap:clamp(14px,2vw,30px);}
.acreage-nav__list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,1.8vw,28px);
}
.acreage-nav__list li{position:relative;}
.acreage-nav__list a{
  color:var(--acreage-nav-link);text-decoration:none;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 0;display:inline-block;
  border-bottom:2px solid transparent;
}
.acreage-nav__list a:hover,
.acreage-nav__list .current-menu-item > a{
  color:var(--acreage-moss,#354027);
  border-bottom-color:var(--acreage-moss,#354027);
}
.acreage-nav__list .sub-menu{
  display:none;position:absolute;top:100%;left:0;min-width:220px;
  background:var(--acreage-paper,#F5F0E4);border:1px solid var(--acreage-rule,#DED5C0);
  box-shadow:0 18px 40px -24px rgba(28,34,18,.55);
  padding:8px 0;margin:0;list-style:none;z-index:30;
}
.acreage-nav__list li:hover > .sub-menu,
.acreage-nav__list li:focus-within > .sub-menu{display:block;}
.acreage-nav__list .sub-menu a{
  display:block;padding:10px 20px;border:0;text-transform:none;letter-spacing:.02em;
}

.acreage-nav__cta{
  display:inline-block;white-space:nowrap;text-decoration:none;
  background-color:var(--acreage-btn-bg,#354027);
  color:var(--acreage-btn-text,#F4F2EA);
  padding:11px 20px;font-size:12px;letter-spacing:.1em;
  transition:background .18s,color .18s;
}
.acreage-nav__cta:hover{
  background-color:var(--acreage-btn-hover-bg,#9C6423);
  color:var(--acreage-btn-hover-text,#fff);
}

.acreage-nav__burger{
  display:none;background:none;border:0;padding:10px;cursor:pointer;
  margin-inline-start:auto;
}
.acreage-nav__burger span{
  display:block;width:24px;height:2px;margin:5px 0;
  background:var(--acreage-ink,#1F2A21);transition:transform 200ms ease,opacity 200ms ease;
}
.acreage-nav.is-open .acreage-nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.acreage-nav.is-open .acreage-nav__burger span:nth-child(2){opacity:0;}
.acreage-nav.is-open .acreage-nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Below the breakpoint the menu becomes a panel under the bar. 900px is the
   default; a widget set to another value overrides it inline. */
@media (max-width:900px){
  .acreage-nav__burger{display:block;}
  .acreage-nav__panel{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--acreage-nav-bg);
    border-bottom:1px solid var(--acreage-rule,#DED5C0);
    box-shadow:0 24px 40px -28px rgba(28,34,18,.5);
    padding:8px 0 18px;

    /* The panel must never be taller than the space under the bar.

       It had no ceiling and no overflow rule, so a menu with more items than
       this demo's five — or this demo's five on a phone held in landscape,
       where the viewport is 375px tall — ran off the bottom of the screen with
       no way to reach the last item. The page behind is scroll-locked while the
       panel is open, so there was no scrolling out of it either.

       The percentage resolves against .acreage-nav__bar, which is the panel's
       containing block, so this is "the viewport minus the bar" without needing
       to know the bar's height. dvh over vh because mobile browsers shrink the
       visual viewport when the address bar is showing.

       The extra 24px covers the gap between the top of the viewport and the top
       of the bar — the header section has its own padding above it, so the bar
       is not flush with the screen and its height alone under-subtracts. CSS
       cannot read that offset, so this allows for a generous one. It only costs
       height on screens where the cap is not binding anyway. */
    max-height:calc(100vh - 100% - 24px);
    max-height:calc(100dvh - 100% - 24px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .acreage-nav.is-open .acreage-nav__panel{display:flex;}
  .acreage-nav__bar{position:relative;flex-wrap:nowrap;}
  .acreage-nav__list{flex-direction:column;align-items:stretch;gap:0;}
  .acreage-nav__list a{
    display:block;padding:13px clamp(18px,5vw,32px);border-bottom:0;
    border-top:1px solid var(--acreage-rule,#DED5C0);font-size:14px;
  }
  .acreage-nav__list .sub-menu{
    display:block;position:static;border:0;box-shadow:none;padding:0;
    background:transparent;min-width:0;
  }
  .acreage-nav__list .sub-menu a{padding-left:clamp(34px,9vw,52px);font-size:13px;}

  /* Every row in the panel is a tap target, so every row gets the 44px
     minimum. The top-level items already cleared it at 48px; the submenu items
     came out at 41 and the telephone button at 37, which are the two things
     somebody actually aims at with a thumb while holding the phone one-handed.
     min-height rather than more padding, so the text stays where it is. */
  .acreage-nav__list a{
    min-height:44px;
    display:flex;align-items:center;
  }
  .acreage-nav__cta{
    margin:14px clamp(18px,5vw,32px) 0;text-align:center;padding:14px 20px;font-size:13px;
    min-height:44px;
    display:flex;align-items:center;justify-content:center;
  }
}

/* Stop the page scrolling behind an open menu panel. */
body.acreage-nav-open{overflow:hidden;}

/* ====================================================== responsive polish */
/* The grid columns are set by an Elementor control, which writes a
   grid-template-columns rule per breakpoint. These rules handle everything the
   control cannot: card internals, the scroller, tabs and touch targets. */

/* --- the sideways scroller --------------------------------------------- */
/* It was colliding on narrow screens because the track kept desktop column
   sizing. Give it its own sizing and let the cards breathe. */
.acreage-w-grid--scroll{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(300px,34%);
  gap:clamp(16px,2vw,28px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding:4px 4px 18px;margin:0 -4px;
}
.acreage-w-grid--scroll > *{scroll-snap-align:start;}
@media (max-width:1024px){ .acreage-w-grid--scroll{grid-auto-columns:minmax(280px,52%);} }
@media (max-width:700px){  .acreage-w-grid--scroll{grid-auto-columns:minmax(250px,84%);} }

/* --- tabs --------------------------------------------------------------- */
/* These used to become a nowrap horizontal scroller below 700px. That hid the
   third tab off the right edge of a box with no scrollbar and no fade, so on a
   phone the category filter looked like it had two options instead of three —
   and a customer with more categories than this demo would lose more of them.
   A scroller needs an affordance; wrapping needs nothing, works for three tabs
   or eight, and is what the strip already does above 700px anyway. */
@media (max-width:700px){
  .acreage-w-tabs{
    flex-wrap:wrap;
    gap:0 2px;
    /* Pulled left by one tab's padding so the text of the first tab in EVERY
       row sits on the page's margin. Zeroing padding-left on :first-child only
       aligns the first row and leaves every wrapped row indented by 10px. */
    margin-left:-10px;
  }
  /* Tighter than the desktop 10/18 so the common case — a few short category
     names — still lands on one line before it has to wrap. */
  .acreage-w-tab{white-space:nowrap;padding:12px 10px;font-size:11px;}
}

/* --- comfortable tap targets ------------------------------------------- */
/* Keyed on the pointer, not the width: a phone is coarse at any size and a
   desktop is fine at any size, so this reaches touch without inflating a
   mouse-driven layout that happens to be in a narrow window.

   The species chips and the filter chips were missing from this list. Both are
   standalone controls a thumb has to hit — a species chip is a link to every
   other farm carrying that game — and both came out at 35px. Card titles are
   deliberately absent: the card's photograph is already a large link to the
   same place, and forcing a title to 44px turns a two-line heading into a
   four-line block. */
@media (pointer:coarse){
  .acreage-w-tab,
  .acreage-w-more__btn,
  .acreage-w-card__more,
  .acreage-w-card__enquire,
  .acreage-w-species__chip,
  .acreage-w-filters__chip,
  .acreage-w-pagination a,
  .acreage-w-pagination span{min-height:44px;display:inline-flex;align-items:center;}
}

/* --- category cards ----------------------------------------------------- */
.acreage-w-cat__media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--acreage-panel,#EFE9DA);}
.acreage-w-cat__media img{width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:700px){
  .acreage-w-cats{grid-template-columns:minmax(0,1fr)!important;}
}

/* --- province tiles ----------------------------------------------------- */
@media (max-width:700px){
  .acreage-w-tiles{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

/* --- motion preference -------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .acreage-w-card,
  .acreage-w-card__media img{transition:none;}
  .acreage-w-card:hover{transform:none;}
  .acreage-w-card:hover .acreage-w-card__media img{transform:none;}
}

/* Sections breathe on the same rhythm as the comp: ~70px vertical. */
.acreage-w-tabs{margin-bottom:30px;}

/* ============================================== header on the content grid */
/* The bar was capped at 1440 with its own 72px gutter, while the hero content
   is capped at 1400 inside a section that adds the same 72px. Two different
   grids, so the wordmark sat 42px inboard of the headline and the phone button
   overhung the search bar by 258px. Nothing lined up, which is most of why the
   header read as wrong.

   Cap the bar at the content width PLUS both gutters, and the inner edges land
   exactly on the hero's. One grid for the whole page. */
.acreage-nav__bar{
  /* Comp: 18px vertical, gutters only, no container cap. */
  max-width:none;
  padding-block:18px;
}

/* Give the brand and menu a little more room to breathe and stop the middle of
   the bar reading as a void on very wide screens: the menu is pulled toward the
   button it belongs with rather than floating in the centre. */
.acreage-nav__panel{margin-inline-start:auto;gap:clamp(18px,2.4vw,44px);}

.acreage-nav__name{line-height:1.05;}
.acreage-nav__tag{margin-top:6px;}

/* The call button is the one action in the header, so it should look like one.
   The ghost treatment at 14% fill was almost invisible against the photograph. */
.acreage-nav__cta{
  /* Comp: 10px 17px. Anything taller inflates the whole header bar. */
  padding:10px 17px;
  font-weight:400;
  letter-spacing:.1em;
  border:1px solid transparent;
}

@media (max-width:900px){
  .acreage-nav__bar{padding-block:14px;}
}

/* ============================================ THE APPROVED COMP — card spec */
/* Every value below is measured from the Loop Item in "Africa Game Farms
   Homepage.dc.html" and "Farms for Sale.dc.html" — one card design, shared by
   the homepage band and the archive, exactly as the comp's build note asks.
   This is the ONLY place the card is specified. Three earlier passes each
   redefined it further up this file; they have been removed, because a card
   whose appearance depends on which of four blocks wins is a card nobody can
   change safely.

   Bordered, raised surface on paper white, ochre border on hover with a small
   lift and a slow image push. Serif title. The VAT line is part of the card,
   not an afterthought — the brief lists it as a non-negotiable. */
.acreage-w-card{
  display:flex;flex-direction:column;min-width:0;
  background:#FCFAF2;
  border:1px solid var(--acreage-rule,#DED5C0);
  border-radius:0;
  box-shadow:none;
  overflow:hidden;
  transition:box-shadow 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.acreage-w-card:hover{
  box-shadow:0 18px 40px -22px rgba(35,43,24,.55);
  border-color:var(--acreage-sienna,#9C6423);
  transform:translateY(-3px);
}

/* --- the photograph ----------------------------------------------------- */
.acreage-w-card__media{
  display:block;position:relative;
  aspect-ratio:3/2;                 /* stops the grid jumping as images load */
  overflow:hidden;
  background:#E4DCCA;
}
.acreage-w-card__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 600ms cubic-bezier(.2,.7,.2,1);
}
.acreage-w-card:hover .acreage-w-card__media img{transform:scale(1.06);}
.acreage-w-card__placeholder{display:block;width:100%;height:100%;}

/* --- the body ----------------------------------------------------------- */
/* A flex column with a 12px rhythm. Nothing is positioned by order: the markup
   comes out of PHP in the comp's order already, so a switched-off line simply
   is not there and the card closes up around the gap. */
.acreage-w-card__body{
  display:flex;flex-direction:column;gap:12px;
  padding:22px 22px 24px;
  flex:1 1 auto;
}

/* "Game · Waterberg, Limpopo" */
.acreage-w-card__where{
  display:flex;flex-wrap:wrap;gap:8px;margin:0;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acreage-stone,#8A8172);
}
.acreage-w-card__dot{opacity:.85;}

.acreage-w-card__title{
  font-family:var(--acreage-serif,Georgia,"Times New Roman",serif);
  font-weight:400;font-size:22px;line-height:1.2;letter-spacing:0;margin:0;
}
.acreage-w-card__title a{color:var(--acreage-moss-deep,#232B18);text-decoration:none;}
.acreage-w-card__title a:hover{color:var(--acreage-sienna,#9C6423);}

/* The price sits on its own line with the VAT note directly under it — they
   are one statement, which is why the gap between them is 4px and not 12. */
.acreage-w-card__facts{margin:0;}
.acreage-w-card__price{
  font-size:20px;font-weight:400;letter-spacing:.01em;
  color:var(--acreage-moss,#354027);
  font-variant-numeric:tabular-nums;
}
.acreage-w-card__vat{
  margin:-8px 0 0;                  /* pulls up against the 12px body gap */
  font-size:11px;color:var(--acreage-stone,#8A8172);
}
.acreage-w-card__excerpt{
  margin:0;font-size:14px;line-height:1.6;color:#5A5F52;
  text-wrap:pretty;
}

/* --- the last row ------------------------------------------------------- */
/* The rule separates the farm's own facts from the two things you can do about
   it. margin-top:auto is what makes a row of cards line their footers up even
   when the summaries run to different lengths. */
.acreage-w-card__foot{
  display:flex;flex-wrap:wrap;gap:8px 18px;
  align-items:center;justify-content:space-between;
  margin-top:auto;padding-top:16px;
  border-top:1px solid #E4DED1;
}
.acreage-w-card__extent{
  font-size:13px;color:var(--acreage-moss-light,#6E7566);
  font-variant-numeric:tabular-nums;
}
.acreage-w-card__links{
  display:flex;gap:14px;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
}
/* Both links are underlined in the comp with a rule a shade lighter than the
   text, which is a border rather than text-decoration so the offset is exact. */
.acreage-w-card__more,
.acreage-w-card__enquire{
  text-decoration:none;padding-bottom:2px;
  border-bottom:1px solid;
  transition:color 180ms ease, border-color 180ms ease;
}
.acreage-w-card__more{color:var(--acreage-moss,#354027);border-bottom-color:#C9C1B0;}
.acreage-w-card__enquire{color:var(--acreage-sienna,#9C6423);border-bottom-color:#DCC9B6;}
.acreage-w-card__more:hover{color:var(--acreage-sienna,#9C6423);border-bottom-color:currentColor;}
.acreage-w-card__enquire:hover{color:var(--acreage-moss,#354027);border-bottom-color:currentColor;}

/* --- the status badge --------------------------------------------------- */
/* Inset from the corner, not flush to it. The default is the quiet one: a farm
   with no status term still says something, because "no badge" reads as an
   unfinished card rather than as a farm that is simply for sale. */
.acreage-w-badge{
  position:absolute;top:14px;left:14px;z-index:2;
  padding:7px 11px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:400;
  background:#EFE9DA;color:#5F6553;
}
.acreage-w-badge--new-listing{background:var(--acreage-moss,#354027);color:#F2F0E6;}
.acreage-w-badge--big-five{background:var(--acreage-sienna,#9C6423);color:#FBF6EF;}
.acreage-w-badge--off-market{background:#4C5142;color:#F7F6EF;}
.acreage-w-badge--sold{background:#AFA894;color:#FCFAF2;}

/* --- sold ---------------------------------------------------------------- */
/* A sold farm stays on the site — it is proof the agent sells farms — but it
   must not read as available. The photograph loses most of its colour and the
   two loudest lines step back. Nothing is hidden: the price of a sold farm is
   the most interesting number on the page to the next seller. */
.acreage-w-card--sold .acreage-w-card__media img{filter:grayscale(.75) brightness(1.04);}
.acreage-w-card--sold .acreage-w-card__title a{color:var(--acreage-stone,#8A8172);}
.acreage-w-card--sold .acreage-w-card__price{color:#9C9384;}

/* Comp grid: auto-fill at a 300px minimum, not a fixed column count. The
   results page overrides the minimum inline — see Acreage_Widget_Farm_Grid. */
.acreage-w-grid{
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(18px,2vw,32px);
}

/* ==================================== THE APPROVED COMP — results bar spec */
/* "Farms for Sale.dc.html": a rule-bottomed row above the grid with what
   matched on the left and the sort on the right. It reads as a caption for the
   results rather than as a second toolbar, which is why there is no fill, no
   box and no button competing with the filter panel's own. */
.acreage-w-results{
  display:flex;flex-wrap:wrap;gap:14px 24px;
  align-items:center;justify-content:space-between;
  padding-bottom:16px;
  border-bottom:1px solid var(--acreage-rule,#DED5C0);
  margin-bottom:clamp(18px,2.2vw,28px);
}
.acreage-w-results__count{
  margin:0;font-size:14px;color:#5F6553;
  font-variant-numeric:tabular-nums;
}
.acreage-w-results__sort{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.acreage-w-results__label{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acreage-moss-light,#6E7566);
}
/* The comp's box. The arrow it draws is at the end of this file, shared with
   the hero search fields — the comp removes the native one and puts nothing
   back, which leaves a control that does not look like one. */
.acreage-w-results__select{
  background:#FCFAF2;
  border:1px solid #C9C1B0;
  border-radius:0;
  color:var(--acreage-ink,#1F2A21);
  font:inherit;font-size:14px;letter-spacing:0;text-transform:none;
  padding:11px 14px;
  min-height:44px;                  /* a comfortable target on a phone */
}
.acreage-w-results__select:focus-visible{
  outline:2px solid var(--acreage-moss,#354027);outline-offset:1px;
}
/* Only ever rendered inside <noscript>, for a visitor whose browser cannot
   reorder the farms in place. With a script running there is no button at all:
   changing the select IS the action. */
.acreage-w-results__go{
  cursor:pointer;
  background:none;
  border:1px solid var(--acreage-moss,#354027);
  color:var(--acreage-moss,#354027);
  font:inherit;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:0 16px;min-height:44px;
}
.acreage-w-results__go:hover{background:var(--acreage-moss,#354027);color:#F7F5EF;}

@media (max-width:600px){
  /* On a phone the row stacks, and a full-width select is easier to hit than
     one squeezed beside its label.

     The label goes above the select rather than beside it, which is what makes
     "full width" true: left inline it took 44px off the front of the row, so
     the control started 44px right of the page gutter and lined up with
     nothing — not the farm cards under it, not the filter card over it. Above
     it, the select runs the full column and the pair reads the way every other
     labelled field on this site does. */
  .acreage-w-results__sort{
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }
  .acreage-w-results__select{flex:1 1 auto;min-width:0;}
}

/* ======================================== search panel — the comp spec */
/* Measured from "Africa Game Farms Homepage.dc.html" at 1425px:
     panel padding 30px, fields 46px tall, submit FULL WIDTH at 50px with the
     Clear button sitting beside it on the right.

   The small inline submit we had made the panel read as a form on a page. The
   comp's full-width bar is what makes it read as the primary action of the
   whole hero, which is the brief's "search must be immediately findable". */
.acreage-w-search{padding:clamp(18px,2.2vw,30px);}

.acreage-w-search__heading{
  font-family:var(--acreage-sans);
  font-size:11px;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#3C4A3F;
  margin:0 0 16px;
}

.acreage-w-search__fields{gap:10px;}

.acreage-w-search__label{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acreage-muted,#6E7566);margin-bottom:6px;display:block;
}
.acreage-w-search__select{
  appearance:none;width:100%;min-width:0;
  background:#FCFAF2;
  border:1px solid #C9C1B0;
  color:var(--acreage-ink,#1F2A21);
  font-size:14px;letter-spacing:0;text-transform:none;
  padding:12px;min-height:46px;border-radius:0;
}

.acreage-w-search__actions{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px;
}
/* Layout only. This rule used to restate the colour, font-size and tracking as
   well, and being later in the file it quietly beat the shared button contract —
   so the search button stayed 13px/.16em while every other button moved to
   12px/.14em. Anything that decides what a button LOOKS like belongs in the
   contract; this keeps only what makes it a full-width bar. */
/* Layout only: what makes this one a full-width bar. Its height, colour and
   type all come from the shared contract, so it is the same button as the
   enquiry form's — just stretched across the row. */
.acreage-w-search__submit{
  flex:1 1 200px;
}
/* The outline variant. It had its own grey border, its own tracking and no
   vertical padding, which made it a third button sitting next to the other
   two. */
.acreage-w-search__clear{
  display:inline-flex;align-items:center;justify-content:center;
  line-height:var(--acreage-btn-line,1.4);
  min-height:var(--acreage-btn-min-h,48px);
  white-space:nowrap;
  background-color:transparent;
  color:var(--acreage-btn-bg,#354027);
  padding:var(--acreage-btn-pad-y,13px) var(--acreage-btn-pad-x,28px);
  border:1px solid var(--acreage-btn-bg,#354027);
  border-radius:var(--acreage-btn-radius,0px);
  font-family:inherit;
  font-size:var(--acreage-btn-size,12px);
  font-weight:var(--acreage-btn-weight,700);
  letter-spacing:var(--acreage-btn-tracking,.14em);
  text-transform:var(--acreage-btn-transform,uppercase);
  transition:background-color .18s,color .18s,border-color .18s;
}
.acreage-w-search__clear:hover{
  background-color:var(--acreage-btn-hover-bg,#9C6423);
  color:var(--acreage-btn-hover-text,#fff);
  border-color:var(--acreage-btn-hover-bg,#9C6423);
}

/* Elementor pads every widget wrap by 10px. On the header that is 20px of dead
   height the comp does not have — its bar is exactly 74px. */
.acreage-headbar .elementor-widget-wrap{padding:0;}

/* Province tiles: the comp is a 1px-gap grid on a rule-coloured background,
   240px minimum, 22px/24px cells — ours were running much taller. */
.acreage-w-tiles{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1px;
  background:var(--acreage-rule,#DED5C0);
  border:1px solid var(--acreage-rule,#DED5C0);
}
.acreage-w-tile{
  background:var(--acreage-paper,#F5F0E4);
  padding:22px 24px;
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  transition:background 200ms ease, padding-left 200ms ease;
}
.acreage-w-tile:hover{background:var(--acreage-moss,#354027);padding-left:32px;}
.acreage-w-tile__name{
  font-family:var(--acreage-serif,Georgia,serif);
  font-size:19px;color:var(--acreage-dark,#232B18);
  transition:color 200ms ease;
}
.acreage-w-tile:hover .acreage-w-tile__name{color:var(--acreage-paper,#F5F0E4);}
.acreage-w-tile__count{
  font-size:13px;color:var(--acreage-sienna,#9C6423);letter-spacing:.04em;
  transition:color 200ms ease;
}
.acreage-w-tile:hover .acreage-w-tile__count{color:var(--acreage-paper,#F5F0E4);}

/* ================================ category band — the comp spec, in full */
/* This section had NO styling at all: the widget emitted correct markup and
   the stylesheet said nothing about it, so it rendered as two grey boxes with
   loose text under them. In the comp it is the strongest block on the page —
   two full-bleed photographs with solid colour panels beneath, green for game
   and cream for cattle.
   Source: "Africa Game Farms Homepage.dc.html", the #game / #cattle section. */
.acreage-w-cats{
  display:flex;
  flex-wrap:wrap;
  gap:0;
}
.acreage-w-cat{
  flex:1 1 420px;
  min-width:280px;
  display:flex;
  flex-direction:column;
  text-decoration:none;
}

/* The photograph band. */
.acreage-w-cat__media{
  display:block;
  min-height:clamp(220px,26vw,340px);
  position:relative;
  background:#E4DCCA;
  overflow:hidden;
  aspect-ratio:auto;          /* overrides the card rule; this band is taller */
}
.acreage-w-cat__media img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
}

/* The colour panel under it. */
.acreage-w-cat__body{
  flex:1;
  display:block;
  padding:clamp(28px,3.5vw,56px) clamp(20px,4vw,60px);
}
.acreage-w-cat__count{
  display:block;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  margin-bottom:16px;
}
.acreage-w-cat__title{
  display:block;
  font-family:var(--acreage-serif,Georgia,serif);
  font-weight:400;
  font-size:clamp(24px,2.6vw,34px);
  line-height:1.15;
  margin:0 0 14px;
}
.acreage-w-cat__text{
  display:block;
  font-size:15px;line-height:1.65;
  max-width:44ch;
  margin:0 0 22px;
}
.acreage-w-cat__more{
  display:inline-block;
  padding:14px 24px;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  transition:background 200ms ease, color 200ms ease;
}

/* Game farms — the dark panel. */
.acreage-w-cat:nth-child(odd) .acreage-w-cat__body{
  background:var(--acreage-moss,#354027);
  color:#E8E6DB;
}
.acreage-w-cat:nth-child(odd) .acreage-w-cat__count{color:#A8B79E;}
.acreage-w-cat:nth-child(odd) .acreage-w-cat__title{color:#E8E6DB;}
.acreage-w-cat:nth-child(odd) .acreage-w-cat__text{color:#C7CDBC;}
.acreage-w-cat:nth-child(odd) .acreage-w-cat__more{
  border:1px solid #7C8E76;color:#E8E6DB;
}
.acreage-w-cat:nth-child(odd):hover .acreage-w-cat__more{
  background:#E8E6DB;color:var(--acreage-moss,#354027);
}

/* Cattle farms — the light panel. */
.acreage-w-cat:nth-child(even) .acreage-w-cat__body{
  background:var(--acreage-panel,#EFE9DA);
  color:var(--acreage-dark,#232B18);
}
.acreage-w-cat:nth-child(even) .acreage-w-cat__count{color:var(--acreage-sienna,#9C6423);}
.acreage-w-cat:nth-child(even) .acreage-w-cat__title{color:var(--acreage-dark,#232B18);}
.acreage-w-cat:nth-child(even) .acreage-w-cat__text{color:#5A5F52;}
.acreage-w-cat:nth-child(even) .acreage-w-cat__more{
  border:1px solid var(--acreage-moss,#354027);color:var(--acreage-moss,#354027);
}
.acreage-w-cat:nth-child(even):hover .acreage-w-cat__more{
  background:var(--acreage-moss,#354027);color:#F7F5EF;
}

/* ============================ province tiles — beat the widget's own control */
/* The widget writes grid-template-columns from an Elementor control, at a
   specificity our plain class cannot reach. The comp is an auto-fill grid at a
   240px minimum, which gives five across at this width rather than four. */
.elementor-widget-acreage-province-tiles .acreage-w-tiles.acreage-w-tiles{
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}

/* ===================================================== single farm: chrome */
/* Breadcrumb + result navigation, matched to the comp's bar:
   14px padding, #FCFAF2, 1px bottom rule, 12px uppercase. */
.acreage-w-crumbs{
  display:flex;flex-wrap:wrap;gap:12px 24px;
  align-items:center;justify-content:space-between;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--acreage-stone,#8A8172);
}
.acreage-w-crumbs__trail{display:flex;flex-wrap:wrap;gap:8px;}
.acreage-w-crumbs__sep{color:#C4BBA4;}
.acreage-w-crumbs a{color:var(--acreage-ink-soft,#3C4A3F);text-decoration:none;}
.acreage-w-crumbs a:hover{color:var(--acreage-moss,#354027);}
.acreage-w-crumbs__trail [aria-current]{color:#5F6553;}
.acreage-w-crumbs__nav{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;}
.acreage-w-crumbs__back{color:var(--acreage-moss,#354027)!important;}
.acreage-w-crumbs__steps{display:flex;gap:8px;}
.acreage-w-crumbs__step{
  display:inline-block;white-space:nowrap;
  padding:7px 13px;
  border:1px solid var(--acreage-rule,#DED5C0);
  color:#5F6553;background:var(--acreage-paper,#F5F0E4);
  transition:border-color 160ms ease,color 160ms ease;
}
.acreage-w-crumbs__step:hover{border-color:var(--acreage-moss,#354027);color:var(--acreage-dark,#232B18);}

/* --- hero band ---------------------------------------------------------- */
.acreage-w-hero{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:stretch;
  background:var(--acreage-paper,#F5F0E4);
}

/* The photograph. object-fit:cover on a real <img> rather than a background
   image, so it carries alt text and the browser can pick a sensible size. */
.acreage-w-hero__media{
  position:relative;
  min-height:clamp(280px,38vw,540px);
  background:#E4DCCA;
  overflow:hidden;
}
.acreage-w-hero__media img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
}
.acreage-w-hero--noimg .acreage-w-hero__media{background:var(--acreage-panel,#EFE9DA);}

.acreage-w-hero__badge{
  position:absolute;
  top:clamp(16px,2vw,26px);left:clamp(16px,2vw,26px);
  z-index:2;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 13px;
  background:var(--acreage-sienna,#9C6423);color:#FBF6EF;
}

/* The particulars. Centred vertically so a short farm name does not leave the
   panel top-heavy against a tall photograph. */
.acreage-w-hero__panel{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,4vw,56px) clamp(24px,4vw,56px);
  background:var(--acreage-panel,#EFE9DA);
}
.acreage-w-hero__meta{
  display:block;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acreage-stone,#8A8172);
  margin:0 0 14px;
}
.acreage-w-hero__title{
  margin:0 0 18px;
  font-family:var(--acreage-serif,Georgia,serif);font-weight:400;
  font-size:clamp(26px,3vw,42px);line-height:1.08;
  color:var(--acreage-ink,#1F2A21);
}
.acreage-w-hero__price{
  margin:0;
  font-family:var(--acreage-serif,Georgia,serif);
  font-size:clamp(22px,2.4vw,30px);
  color:var(--acreage-moss,#354027);
  font-variant-numeric:tabular-nums;
}
.acreage-w-hero__extent{
  margin:6px 0 0;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acreage-stone,#8A8172);
}
.acreage-w-hero__cta{margin:26px 0 0;}

/* Below the grid breakpoint the two halves stack, photograph first — the image
   is what makes somebody keep reading, so it must not end up under a screen of
   text on a phone. */
@media (max-width:880px){
  /* minmax(0,1fr), not a bare 1fr. A 1fr track has an automatic minimum of
     min-content, so the panel's padding plus its longest unbreakable run — the
     price — held the single column at 311px inside a 305px screen and pushed
     the whole page sideways. The explicit zero minimum lets the track shrink to
     the space that actually exists; above 880 the two-column rule already does
     this and never had the problem. */
  .acreage-w-hero{grid-template-columns:minmax(0,1fr);}
  .acreage-w-hero__media{min-height:clamp(220px,56vw,340px);}
}

/* --- price rate --------------------------------------------------------- */
.acreage-w-price__rate{
  margin:6px 0 0;
  font-size:12px;
  color:var(--acreage-stone,#8A8172);
}

/* --- similar farms ------------------------------------------------------ */
.acreage-w-grid--similar{
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}

/* --------------------------------------------------------------- page links
 *
 * Shown by the Farm Grid when it runs its own query on a results page. The
 * load-more button is deliberately unavailable on that source, so without
 * these links every farm past the first page would be unreachable.
 */
.acreage-w-pages {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 48px;
}

.acreage-w-pages .page-numbers {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	border: 1px solid var(--acreage-rule, #DED5C0);
	color: var(--acreage-moss, #354027);
	font-family: var(--acreage-sans, Helvetica, Arial, sans-serif);
	font-size: 14px;
	letter-spacing: 0.02em;
	text-decoration: none;
	background: transparent;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.acreage-w-pages a.page-numbers:hover,
.acreage-w-pages a.page-numbers:focus-visible {
	background: var(--acreage-moss, #354027);
	border-color: var(--acreage-moss, #354027);
	color: var(--acreage-paper, #F5F0E4);
}

.acreage-w-pages .page-numbers.current {
	background: var(--acreage-ochre, #9C6423);
	border-color: var(--acreage-ochre, #9C6423);
	color: #FFF;
}

.acreage-w-pages .page-numbers.dots {
	border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
	.acreage-w-pages .page-numbers {
		transition: none;
	}
}

/* ============================================================ select arrow */
/* Every select in the comp is set to appearance:none and given nothing in
   place of the arrow it removes. On screen that is two different faults: the
   sort control keeps the browser's own arrow crammed against its right border
   because a native arrow ignores padding, and the five hero search fields end
   up with no arrow at all — five boxes that do not look like controls.
 
   So the arrow is drawn here instead: one chevron, inset to match each field's
   own horizontal padding, with room reserved for it so no option label can
   ever run underneath. Drawn rather than native because a native arrow's
   position cannot be set, and it lands differently in every browser.
 
   It is a background image rather than a pseudo-element because a select
   cannot have one. */
.acreage-w-results__select,
.acreage-w-search__select,
.acreage-w-form__field select{
  /* Without this the browser keeps its own arrow and draws ours beside it. */
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23354027' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:11px 7px;
  cursor:pointer;
}

/* The inset matches the padding on the other side, so the chevron sits on the
   same margin as the text rather than floating at an arbitrary distance. */
.acreage-w-results__select{
  background-position:right 14px center;
  padding-right:40px;
}
.acreage-w-search__select{
  background-position:right 12px center;
  padding-right:36px;
}
/* The enquiry form's "Regarding" dropdown was left out of this block when it
   was written, so it kept the browser's own arrow — and a native arrow ignores
   padding, which is why it sat hard against the field's right border. 12px is
   the inset the field already uses on its left, so the chevron now sits on the
   same margin as the text opposite it. */
.acreage-w-form__field select{
  background-position:right 12px center;
  padding-right:36px;
}

/* Old Edge drew a second arrow of its own beside ours. */
.acreage-w-results__select::-ms-expand,
.acreage-w-search__select::-ms-expand,
.acreage-w-form__field select::-ms-expand{display:none;}

@media (prefers-reduced-motion:no-preference){
  .acreage-w-results__select,
  .acreage-w-search__select{transition:border-color 160ms ease;}
}
.acreage-w-results__select:hover,
.acreage-w-search__select:hover{border-color:var(--acreage-moss,#354027);}

/* ================================================ the species hover card */
/* One panel, appended to <body>, moved to whichever chip asked for it. It is
   fixed rather than absolute on purpose: the chip list lives inside Elementor
   sections whose overflow we do not control, and an absolutely positioned card
   is clipped by the first ancestor that hides it — which on a listing page is
   the section itself.

   z-index sits above Elementor's sticky header (99) and below its lightbox
   (9999), so the card covers the page it belongs to and never the photograph
   a visitor has opened over the top of it. */
.acreage-w-wiki{
  position:fixed;z-index:999;top:0;left:0;
  width:min(320px,calc(100vw - 24px));
  background:var(--acreage-paper,#F5F0E4);
  color:var(--acreage-ink,#1F2A21);
  border:1px solid var(--acreage-rule,#DED5C0);
  box-shadow:0 18px 40px rgba(0,0,0,.14);
  /* The card is a hint, not a target. Without this, the card appearing under a
     travelling pointer swallows the mouseout of the chip it came from and the
     row below it stops responding until the pointer leaves. The body inside
     turns pointer events back on, so the Wikipedia link is still clickable. */
  pointer-events:none;
}
.acreage-w-wiki__body{padding:14px 16px 12px;pointer-events:auto;}
.acreage-w-wiki__media{display:block;margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--acreage-panel,#EFE9DA);}
.acreage-w-wiki__media img{width:100%;height:100%;object-fit:cover;display:block;}
.acreage-w-wiki__name{
  margin:0 0 6px;font-weight:700;font-size:14px;line-height:1.3;
  color:var(--acreage-moss,#354027);
}
/* Room for roughly four lines of Wikipedia's opening sentence. The server has
   already trimmed the extract; this is the guard for the one that arrives long
   anyway, so a card can never grow taller than the viewport it is placed in. */
.acreage-w-wiki__text{
  margin:0;font-size:13px;line-height:1.55;opacity:.85;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;
  overflow:hidden;
}
/* Not decoration: Wikipedia's text is CC BY-SA and quoting it obliges the card
   to say so and to link back. Small, quiet, and always there. */
.acreage-w-wiki__credit{
  margin:10px 0 0;padding-top:9px;border-top:1px solid rgba(0,0,0,.1);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;opacity:.6;
}
.acreage-w-wiki__link{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;}
.acreage-w-wiki__link:hover{color:var(--acreage-w-accent,#9C6423);}

/* The chip says there is more to read, quietly — a dotted underline is the
   convention for "hover me" and costs the chip none of its own weight. */
.acreage-w-species__chip[data-species]{text-decoration:underline dotted rgba(0,0,0,.35);text-underline-offset:3px;}
.acreage-w-species__chip[data-species]:hover,
.acreage-w-species__chip[data-species]:focus-visible{text-decoration-color:currentColor;}

@media (prefers-reduced-motion:no-preference){
  .acreage-w-wiki{opacity:0;transform:translateY(4px);transition:opacity 140ms ease,transform 140ms ease;}
  .acreage-w-wiki.is-in{opacity:1;transform:none;}
}

/* --- header search ------------------------------------------------------ */
/* A magnifier in the bar, and a keyword box that drops out of it. NOT a search
   bar sitting open in the header: the brief is calm and premium, and a header
   with a permanent field and a coloured Go button is the visual signature of
   the property portals the client rejected. Closed, this costs the header
   seventeen pixels of line art.

   The box is placed against the bar rather than against the magnifier, so it
   lands on the page's own margin instead of floating at whatever x-position the
   icon happens to sit at once the menu above it has been edited. */
.acreage-nav__search{position:static;display:flex;align-items:center;}
.acreage-nav__searchtoggle{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--acreage-nav-link);text-decoration:none;
  padding:8px 0;cursor:pointer;
  border-bottom:2px solid transparent;
}
.acreage-nav__searchtoggle:hover,
.acreage-nav.is-searching .acreage-nav__searchtoggle{color:var(--acreage-moss,#354027);}
.acreage-nav__searchicon{display:block;flex:none;}
/* The word is set to the same specification as a menu item, because that is
   what it reads as standing beside them — a lone icon in a row of words looks
   like something that failed to load, and in the burger panel it would be an
   unlabelled row in a column of labelled ones. */
.acreage-nav__searchlabel{
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;
}

.acreage-nav__searchform{
  display:none;
  position:absolute;top:100%;right:clamp(18px,4vw,72px);
  z-index:40;
  width:min(420px,calc(100vw - 36px));
  gap:0;
  background:var(--acreage-nav-bg,var(--acreage-paper,#F5F0E4));
  border:1px solid var(--acreage-rule,#DED5C0);
  box-shadow:0 18px 40px -24px rgba(28,34,18,.55);
  padding:10px;
}
.acreage-nav.is-searching .acreage-nav__searchform{display:flex;}
.acreage-nav__searchfield{
  flex:1 1 auto;min-width:0;
  border:0;background:transparent;
  font:inherit;font-size:15px;color:var(--acreage-ink,#1F2A21);
  padding:10px 12px;
}
/* The field carries no border of its own — the panel around it is the border —
   so the focus ring has to be put back deliberately or a keyboard user has no
   idea where they are. */
.acreage-nav__searchfield:focus{outline:2px solid var(--acreage-moss,#354027);outline-offset:-2px;}
.acreage-nav__searchfield::-webkit-search-cancel-button{cursor:pointer;}
.acreage-nav__searchsubmit{
  flex:none;cursor:pointer;font-family:inherit;
  background-color:var(--acreage-btn-bg,#354027);
  color:var(--acreage-btn-text,#F4F2EA);
  border:0;padding:12px 22px;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  transition:background .18s,color .18s;
}
.acreage-nav__searchsubmit:hover{
  background-color:var(--acreage-btn-hover-bg,#9C6423);
  color:var(--acreage-btn-hover-text,#fff);
}

/* The bar is the containing block for the dropped box, and it only becomes one
   below the breakpoint in the rules above — where it also has to hold the menu
   overlay. Stated here as well so the box hangs off the bar at every width. */
.acreage-nav__bar{position:relative;}

@media (max-width:900px){
  /* Inside the burger panel the search is a row like any other, and the box is
     part of the column rather than a thing floating over it — there is no room
     beside a phone-width overlay for anything to drop out of. */
  .acreage-nav__search{display:block;order:-1;}
  /* display:flex, not the inline-flex it carries in the bar: a row in this
     panel has to span it, or its top rule stops dead at the end of the word
     while every rule under it runs the full width. */
  .acreage-nav__searchtoggle{
    display:flex;align-items:center;
    padding:13px clamp(18px,5vw,32px);min-height:44px;
    border-top:1px solid var(--acreage-rule,#DED5C0);border-bottom:0;
    font-size:14px;
  }
  .acreage-nav__searchform{
    position:static;width:auto;border:0;box-shadow:none;
    padding:0 clamp(18px,5vw,32px) 14px;
    background:transparent;
  }
  .acreage-nav__searchfield{
    border:1px solid var(--acreage-rule,#DED5C0);background:#fff;min-height:44px;
  }
  .acreage-nav__searchsubmit{min-height:44px;}
}

/* ============================================ hidden means hidden, always */
/* `[hidden] { display: none }` is a USER-AGENT rule, and any author rule that
   sets `display` on the same element beats it. So an element styled
   `display:flex` in this file cannot be hidden by setting its hidden property
   in script — the attribute lands, and nothing happens on screen.

   That is not a hypothetical. `.acreage-w-pages` is `display:flex`, and
   filters.js sets `pages.hidden = true` on the first live filter, because page
   links rendered for twelve farms stop being true the moment the visitor
   filters down to seven. The attribute was being set correctly and the links
   stayed on screen, still pointing at /page/2/ with no filter in the URL — so
   following them dropped the visitor's filter and showed them a cattle farm in
   a game-farms-only result set. `.acreage-w-wiki__media` had the same fault: a
   species with no photograph would have kept an empty grey placeholder.

   One rule for the whole namespace rather than two patches, because the trap
   catches the next `display` added to any of these components too. !important
   is warranted exactly here: this rule's entire job is to be unconditional. */
[class*="acreage-w-"][hidden],
[class*="acreage-nav"][hidden]{display:none!important;}

/* ================================== the gallery as a sideways filmstrip */
/* Used when a farm has more photographs than the wrapped row can hold without
   turning the page into a contact sheet. Pure CSS scroll-snap, which is the
   same answer the Farm Grid's sideways scroller gives: it works with a swipe,
   a trackpad, the scrollbar, and tabbing between the photographs, and there is
   no JavaScript to fail. The widget prints the track size inline. */
.acreage-w-gallery--scroll{
  grid-auto-flow:column;
  grid-template-columns:none;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  /* Room under the row for the scrollbar, so it never sits over the last
     photograph, and a little at the sides for the focus ring on a thumbnail at
     either end — outlines draw outside the box and an overflow container clips
     them, which is how a keyboard user loses track of where they are. */
  padding:3px 3px 14px;
  margin:0 -3px;
  scroll-padding-inline:3px;
}
.acreage-w-gallery--scroll > *{scroll-snap-align:start;}
/* The strip is focusable so that arrow keys scroll it; say so visibly. */
.acreage-w-gallery--scroll:focus-visible{outline:2px solid var(--acreage-moss,#354027);outline-offset:2px;}

/* A visible track, not an overlay scrollbar that fades out.
   On a desktop with a mouse the scrollbar IS the affordance — the thing that
   says this row continues past the edge — so it is styled to be read rather
   than hidden for tidiness. */
/* Written for .acreage-w-gallery, not only the --scroll variant: the phone
   rules below turn every gallery into a strip, and a narrow desktop window is
   the one place that shows a classic chunky scrollbar rather than the overlay
   one a real phone draws. A wrapped gallery never overflows, so this costs it
   nothing. */
.acreage-w-gallery{scrollbar-width:thin;scrollbar-color:var(--acreage-panel-deep,#DED5C0) transparent;}
.acreage-w-gallery::-webkit-scrollbar{height:8px;}
.acreage-w-gallery::-webkit-scrollbar-track{background:transparent;}
.acreage-w-gallery::-webkit-scrollbar-thumb{
  background:var(--acreage-panel-deep,#DED5C0);border-radius:99px;
}
.acreage-w-gallery:hover::-webkit-scrollbar-thumb{background:var(--acreage-stone,#8A8172);}

/* --- the phone ---------------------------------------------------------- */
/* One photograph at a time, with the next one clipped by the edge of the
   screen. That sliver is the whole affordance: it is what makes a thumb swipe
   without being told to, and it beats an arrow, a dot row or a caption saying
   "swipe", none of which survive being looked at for half a second.

   A wrapped grid is the wrong shape here whatever the count — 20 photographs
   two-up is ten screens of scrolling to get past the gallery — so below 700px
   the row scrolls even when the farm has few enough to wrap. */
@media (max-width:700px){
  /* EVERY gallery, not only the ones PHP marked.
     The server cannot know the screen it is being read on, and on a phone the
     wrapped row is the wrong shape at any count: two photographs side by side
     are 170px wide and show nothing, and twenty of them are ten screens of
     scrolling to get past. So the strip is the mobile layout full stop, and
     the inline grid-template-columns the widget printed — a desktop
     measurement — is overridden here. !important because it is competing with
     a style attribute, which nothing else can beat. */
  .acreage-w-gallery{
    grid-auto-flow:column!important;
    grid-template-columns:none!important;
    /* 78% of a 375px screen is 292px; the remaining 22% is the peek. */
    grid-auto-columns:78%!important;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    padding:3px 3px 14px;
    margin:0 -3px;
    scroll-padding-inline:3px;
  }
  .acreage-w-gallery > *{scroll-snap-align:start;}
  /* Taller than the 3:2 of the wrapped thumbnails: at nearly full width this is
     the main view of the farm on a phone, not a contact print of it. */
  .acreage-w-gallery__item{aspect-ratio:4/3;}
}

/* Nothing about a filmstrip should animate itself; snapping is the browser's,
   and it already respects the visitor's motion setting. The zoom on hover is
   ours, and a photograph that grows under a thumb resting mid-swipe is noise. */
@media (pointer:coarse){
  .acreage-w-gallery__item:hover img{transform:none;}
}