/* ═══════════════════════════════════════════════════════════════
   Amax Connect Public Styles v2
   All design tokens are injected as CSS custom properties from PHP.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Design tokens (defaults — overridden by PHP inline CSS) ── */
:root {
  --ac-primary:      #0066ff;
  --ac-secondary:    #f5f7fa;
  --ac-accent:       #ff5500;
  --ac-btn-bg:       #0066ff;   /* separate from primary so it can be customised independently */
  --ac-btn-text:     #ffffff;
  --ac-text:         #1a1a2e;
  --ac-text-muted:   #6b7280;
  --ac-border:       #e5e7eb;
  --ac-card-bg:      #ffffff;
  /* The controls bar's two fills. Used since the bar was written and declared
     nowhere until 1.9.0-beta.133, so `var(--ac-surface, #fff)` resolved to nothing
     and every control fill on the bar came out transparent: measured on /dev,
     the inactive size chips and the location select box both computed
     background rgba(0, 0, 0, 0) against the bar's own #f7f7f5, so they
     rendered as outlines with the bar showing through. --ac-surface-2 was only
     ever read with a fallback, which is why the bar itself looked right and
     the controls on it did not. */
  --ac-surface:      #ffffff;
  --ac-surface-2:    #f7f7f5;
  --ac-radius:       12px;
  --ac-btn-radius:   8px;
  --ac-font:         inherit;
  --ac-heading-size: 20px;
  --ac-shadow:       0 2px 12px rgba(0,0,0,0.07);
  --ac-shadow-hover: 0 10px 40px rgba(0,0,0,0.14);
  --ac-transition:   0.22s ease;
}

/* ─── Container ──────────────────────────────────────────────── */
.ac-wrap {
  font-family: var(--ac-font);
  color: var(--ac-text);
  width: 100%;
}
.ac-wrap *, .ac-wrap *::before, .ac-wrap *::after { box-sizing: border-box; }
.ac-wrap a { transition: var(--ac-transition); }
.ac-error {
  background: #fee2e2; color: #dc2626;
  padding: 12px 16px;
  border-left: 4px solid #dc2626;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 16px;
}
.ac-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--ac-text-muted);
  font-size: 15px;
}

/* ─── Filter Bar ─────────────────────────────────────────────── */
/* Scoped under .ac-wrap + !important on visual properties so      */
/* theme button styling can't override. Matches the minimal site   */
/* tab aesthetic: no chunky pills, no heavy backgrounds.           */

.ac-wrap .ac-filter-bar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px 24px !important;
  margin: 0 0 12px 0 !important;
  padding: 4px 0 0 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.ac-wrap .ac-filter-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #94a3b8 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  flex: none !important;
  background: transparent !important;
  border: none !important;
}
.ac-wrap .ac-filter-group {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  flex-wrap: nowrap !important;
}
/* count on each filter option (faceted). Fixed min-width + tabular figures so
   the number changing (1 → 2 digits) never changes the button width — that
   width jitter was making the Features group jump between rows on select. */
.ac-wrap .ac-opt-count {
  display: inline-block !important;
  min-width: 1.5em !important;
  text-align: left !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  opacity: 0.55 !important;
  font-variant-numeric: tabular-nums !important;
  margin-left: 1px !important;
}
/* Features has the most options; pin it to its own row so it can't hop lines
   as counts change. Result: a stable 2-row bar (Sort·Show·Size / Features). */
.ac-wrap .ac-filter-group--feat { flex-basis: 100% !important; }
.ac-wrap .ac-size-btn--active .ac-opt-count,
.ac-wrap .ac-feat-btn--active .ac-opt-count,
.ac-wrap .ac-avail-btn--active .ac-opt-count { opacity: 0.8 !important; }
.ac-wrap .ac-opt--empty { opacity: 0.4 !important; }
.ac-wrap .ac-sort-select {
  padding: 6px 28px 6px 10px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  font-family: var(--ac-font, inherit) !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2394a3b8' d='M5 6L0 0h10z'/%3E%3C/svg%3E") no-repeat right 10px center !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.ac-wrap .ac-sort-select:hover {
  border-color: #cbd5e1 !important;
}
.ac-wrap .ac-sort-select:focus-visible {
  outline: 2px solid var(--ac-primary, #0066ff) !important;
  outline-offset: 1px !important;
}

/* Segmented control for Availability — inline pill buttons */
.ac-wrap .ac-avail-btns {
  display: inline-flex !important;
  gap: 0 !important;
  padding: 2px !important;
  background: #f1f5f9 !important;
  border-radius: 6px !important;
  border: none !important;
}
.ac-wrap .ac-avail-btn {
  padding: 5px 12px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 4px !important;
  background: transparent !important;
  font-family: var(--ac-font, inherit) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #64748b !important;
  cursor: pointer !important;
  transition: color .15s ease, background-color .15s ease !important;
  box-shadow: none !important;
  text-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
  transform: none !important;
}
.ac-wrap .ac-avail-btn:hover {
  color: #0f172a !important;
  background: rgba(255,255,255,0.6) !important;
}
.ac-wrap .ac-avail-btn--active,
.ac-wrap .ac-avail-btn--active:hover {
  background: #fff !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.06) !important;
  transform: none !important;
}
.ac-wrap .ac-size-btns {
  display: inline-flex !important;
  gap: 0 !important;
  padding: 2px !important;
  background: #f1f5f9 !important;
  border-radius: 6px !important;
  border: none !important;
}
.ac-wrap .ac-size-btn {
  padding: 5px 12px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 4px !important;
  background: transparent !important;
  font-family: var(--ac-font, inherit) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #64748b !important;
  cursor: pointer !important;
  transition: color .15s ease, background-color .15s ease !important;
  box-shadow: none !important;
  text-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
  transform: none !important;
}
.ac-wrap .ac-size-btn:hover {
  color: #0f172a !important;
  background: rgba(255,255,255,0.6) !important;
}
.ac-wrap .ac-size-btn--active,
.ac-wrap .ac-size-btn--active:hover {
  background: #fff !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.06) !important;
  transform: none !important;
}
.ac-wrap .ac-filter-count {
  margin-left: auto !important;
  font-size: 12px !important;
  color: #94a3b8 !important;
  white-space: nowrap !important;
  font-weight: 500 !important;
}

/* ─── Grid ───────────────────────────────────────────────────── */
.ac-grid {
  display: grid;
  gap: 24px;
}
.ac-cols-1 { grid-template-columns: 1fr; }
.ac-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.ac-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.ac-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }

/* List layout overrides */
.ac-layout-list { grid-template-columns: 1fr !important; gap: 10px; }

/* Responsive breakpoints */
@media (max-width: 1100px) {
  .ac-cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
}
@media (max-width: 860px) {
  .ac-cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ac-cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 540px) {
  .ac-cols-2, .ac-cols-3, .ac-cols-4 { grid-template-columns: 1fr; gap: 14px; }
}

/* ─── Card Base ──────────────────────────────────────────────── */
.ac-card {
  background: var(--ac-card-bg, #fff);
  border-radius: var(--ac-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--ac-transition), box-shadow var(--ac-transition);
  position: relative;
  min-width: 0; /* prevent grid blowout */
}

/* ── Card Style: Default ── */
.ac-style--default .ac-card {
  box-shadow: var(--ac-shadow);
  border: 1px solid var(--ac-border);
}
.ac-style--default .ac-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ac-shadow-hover);
}

/* ── Card Style: Flat ── */
.ac-style--flat .ac-card {
  box-shadow: none;
  border: 1.5px solid var(--ac-border);
}
.ac-style--flat .ac-card:hover { border-color: var(--ac-primary); }

/* ── Card Style: Elevated ── */
.ac-style--elevated .ac-card {
  box-shadow: 0 4px 20px rgba(0,0,0,0.10);
  border: none;
}
.ac-style--elevated .ac-card:hover {
  transform: scale(1.02);
  box-shadow: 0 16px 48px rgba(0,0,0,0.18);
}

/* ── Card Style: Dark ── */
.ac-style--dark .ac-card {
  background: #1e293b;
  border: 1px solid #334155;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.ac-style--dark .ac-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.4); transform: translateY(-3px); }
.ac-style--dark .ac-card__title { color: #fff !important; }
.ac-style--dark .ac-card__size  { color: #94a3b8; }
.ac-style--dark .ac-card__features li { color: #cbd5e1; }
.ac-style--dark .ac-feat-icon   { stroke: var(--ac-accent); }
.ac-style--dark .ac-price__amount { color: var(--ac-accent); }
.ac-style--dark .ac-price__period { color: #94a3b8; }

/* ─── Card density at higher column counts ───────────────────── */
/* 3 columns — slightly tighter */
.ac-cols-3 .ac-card__body         { padding: 14px 16px; gap: 8px; }
.ac-cols-3 .ac-card__title        { font-size: clamp(14px, 1.5vw, 18px); }
.ac-cols-3 .ac-price__amount      { font-size: 19px; }
.ac-cols-3 .ac-card__media        { aspect-ratio: 4/3; }

/* 4 columns — compact */
.ac-cols-4 .ac-card__body         { padding: 12px 14px; gap: 6px; }
.ac-cols-4 .ac-card__title        { font-size: clamp(13px, 1.3vw, 16px); margin-bottom: 2px; }
.ac-cols-4 .ac-card__size         { font-size: 12px; }
.ac-cols-4 .ac-price__amount      { font-size: 18px; }
.ac-cols-4 .ac-card__media        { aspect-ratio: 4/3; }
.ac-cols-4 .ac-card__foot         { padding-top: 10px; gap: 8px; }
.ac-cols-4 .ac-card__features li  { font-size: 12px; }
.ac-cols-4 .ac-btn                { padding: 9px 12px; font-size: 13px; }
.ac-cols-4 .ac-promo-badge        { font-size: 11px; padding: 3px 8px; }

/* ─── Card Media ─────────────────────────────────────────────── */
.ac-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--ac-secondary);
  flex-shrink: 0;
}
.ac-wrap .ac-card__media img,
.ac-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.ac-card:hover .ac-card__media img { transform: scale(1.04); }

/* ─── Badges on image ────────────────────────────────────────── */
.ac-dim-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  top: auto;            /* defensive: prevent themes pinning top+bottom */
  right: auto;          /* defensive: prevent full-width stretch */
  height: auto;         /* defensive: size to content, not container */
  width: auto;          /* defensive: size to content, not container */
  max-width: calc(100% - 20px);
  align-self: auto;     /* defensive: ignore flex align-items: stretch */
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  box-sizing: border-box;
  white-space: nowrap;
}
.ac-status-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 4px;
}
.ac-status-badge--inline {
  position: static;
  display: inline-block;
  margin-bottom: 10px;
}
.ac-status--bookable      { background: #dcfce7; color: #15803d; }
.ac-status--lead-capture  { background: #fef3c7; color: #b45309; }
.ac-status--rented,
.ac-status--reserved      { background: #fee2e2; color: #b91c1c; }
.ac-status--hidden        { background: #f1f5f9; color: #64748b; }
.ac-status--other         { background: #e0e7ff; color: #4338ca; }

/* ─── Card Body ──────────────────────────────────────────────── */
.ac-card__body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}
.ac-card__head-section {}
.ac-card__title {
  font-size: var(--ac-heading-size);
  font-weight: 700;
  color: var(--ac-primary);
  margin: 0 0 4px;
  line-height: 1.25;
}
.ac-card__size {
  font-size: 13px;
  color: var(--ac-text-muted);
  margin: 0;
}
.ac-card__site {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ac-text-muted);
  margin: 0 0 6px;
  line-height: 1.2;
}
.ac-card__site-icon { flex-shrink: 0; opacity: .75; }
.ac-style--dark .ac-card__site { color: #94a3b8; }

/* ─── Features list ──────────────────────────────────────────── */
.ac-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.ac-wrap .ac-card__features li,
.ac-card__features li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--ac-text-muted);
}
.ac-feat-icon { flex-shrink: 0; stroke: var(--ac-primary); }

/* ─── Card Footer ────────────────────────────────────────────── */
.ac-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--ac-border);
  flex-wrap: wrap;
}
.ac-style--dark .ac-card__foot { border-color: #334155; }

/* ─── Price ──────────────────────────────────────────────────── */
.ac-price { display: flex; align-items: baseline; gap: 2px; }
.ac-price__amount {
  font-size: 22px;
  font-weight: 800;
  color: var(--ac-accent);
  line-height: 1;
}
.ac-price__period {
  font-size: 13px;
  color: var(--ac-text-muted);
  font-weight: 500;
}
/* Promotional price: discounted first-period figure on top, the
   ongoing price stated plainly beneath it. */
.ac-price--promo {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.ac-price--promo .ac-price__lead {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.ac-price__then {
  font-size: 12px;
  color: var(--ac-text-muted);
  font-weight: 500;
}
.ac-style--dark .ac-price__then { color: #94a3b8; }

/* ─── CTA Buttons ────────────────────────────────────────────── */
/*
 * Doubled under .ac-wrap, the way every modifier below already is. A lone
 * .ac-btn is one class and nothing else, so it is beaten by any host-theme rule
 * carrying one class and one tag - the ordinary shape of theme button styling,
 * .some-wrapper a - and it loses the padding and the font size on every CTA
 * this plugin renders. That is the "the buttons look wrong" report, four times.
 * Two classes puts the rule above that whole family. The bare selector stays
 * because the size guide includes the enquiry modal AFTER its wrapper closes
 * (templates/unit-types-size-guide.php), so on that one surface the modal's
 * own buttons have no .ac-wrap ancestor to inherit from.
 */
.ac-wrap .ac-btn,
.ac-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--ac-btn-radius);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: var(--ac-transition);
  line-height: 1;
  white-space: nowrap;
}
.ac-wrap .ac-btn--reserve,
.ac-btn--reserve {
  background: var(--ac-btn-bg);
  color: var(--ac-btn-text);
  border: 2px solid var(--ac-btn-bg);
}
.ac-wrap .ac-btn--reserve:hover,
.ac-btn--reserve:hover {
  filter: brightness(0.88);
  color: var(--ac-btn-text);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

/* --primary and --ghost were only ever styled in the ADMIN stylesheet, but the
   thank-you template uses both on the front end. There they got the bare
   .ac-btn base — no background, no colour — so the host theme's global link
   colour applied: measured 2.16:1 against white on a themed site. The primary
   button escaped only because that one template happens to carry an inline
   style; the ghost button had nothing.

   Qualified with .ac-wrap and the element (0,2,1) so they beat a theme's
   `.some-kit a` (0,1,1) without !important, and :visited is covered because
   themes routinely restyle it. */
.ac-wrap a.ac-btn--primary,
.ac-wrap a.ac-btn--primary:link,
.ac-wrap a.ac-btn--primary:visited,
.ac-wrap button.ac-btn--primary {
  background: var(--ac-btn-bg);
  color: var(--ac-btn-text);
  border: 2px solid var(--ac-btn-bg);
}

.ac-wrap a.ac-btn--primary:hover,
.ac-wrap a.ac-btn--primary:focus {
  color: var(--ac-btn-text);
  filter: brightness(0.88);
}

/* Secondary action: readable on the card, clearly not the primary button. */
.ac-wrap a.ac-btn--ghost,
.ac-wrap a.ac-btn--ghost:link,
.ac-wrap a.ac-btn--ghost:visited,
.ac-wrap button.ac-btn--ghost {
  background: #fff;
  color: var(--ac-primary, #1a2e4a);
  border: 1.5px solid #cbd5e1;
}

.ac-wrap a.ac-btn--ghost:hover,
.ac-wrap a.ac-btn--ghost:focus {
  background: #f8fafc;
  color: var(--ac-primary, #1a2e4a);
  border-color: #94a3b8;
}
.ac-btn--enquire {
  background: transparent;
  color: var(--ac-text-muted);
  border: 1.5px solid var(--ac-border);
}
.ac-btn--enquire:hover {
  border-color: var(--ac-primary);
  color: var(--ac-primary);
}
/* The rule above is (0,1,0) and loses to a theme's `.kit button` (0,1,1).
   On a themed site this quiet outline button rendered as a solid accent-
   coloured one — visually competing with Reserve, and white-on-orange at
   2.55:1. Same cascade problem as the anchors, for <button> this time.
   Qualified to (0,2,1); the colour is stated outright rather than left to
   --ac-text-muted so it cannot land under 4.5:1 on a white card. */
.ac-wrap button.ac-btn--enquire,
.ac-wrap a.ac-btn--enquire {
  background: transparent;
  color: #475569;
  border: 1.5px solid #cbd5e1;
}
.ac-wrap button.ac-btn--enquire:hover,
.ac-wrap a.ac-btn--enquire:hover,
.ac-wrap button.ac-btn--enquire:focus,
.ac-wrap a.ac-btn--enquire:focus {
  background: #f8fafc;
  border-color: var(--ac-primary, #1a2e4a);
  color: var(--ac-primary, #1a2e4a);
}

/* Sold-out "Join Waitlist" button — styled identically to Reserve   */
/* Now (solid flat button, same padding / radius / weight) but in    */
/* a warm orange tone so it's distinguishable at a glance. Reuses    */
/* .ac-btn--enquire for the click handler.                           */
.ac-wrap .ac-btn--waitlist,
.ac-btn--waitlist {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #cc4d0a !important;
  color: #fff !important;
  border: 2px solid #cc4d0a !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease !important;
}
.ac-wrap .ac-btn--waitlist:hover,
.ac-btn--waitlist:hover {
  background: #cc4d0a !important;
  border-color: #cc4d0a !important;
  color: #fff !important;
  filter: brightness(0.92) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.25) !important;
}
.ac-wrap .ac-btn--waitlist:active,
.ac-btn--waitlist:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
  filter: brightness(0.88) !important;
}
.ac-btn--waitlist .ac-btn__icon {
  flex-shrink: 0;
  opacity: 0.95;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .ac-btn--waitlist,
  .ac-wrap .ac-btn--waitlist,
  .ac-btn--waitlist:hover,
  .ac-wrap .ac-btn--waitlist:hover {
    transform: none !important;
    transition: none !important;
  }
}

/* Purely presentational "Sold Out" chip — non-interactive. */
.ac-wrap .ac-btn--sold-out,
.ac-btn--sold-out {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f1f5f9 !important;
  /* #64748b on this grey measured 4.34:1, just under AA. */
  color: #475569 !important;
  border: 1.5px solid #e2e8f0 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  font-weight: 600 !important;
}

.ac-btn--full { width: 100%; }

/* ═══════════════════════════════════════════════════════════════
   COMPACT LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.ac-layout-compact .ac-card {
  flex-direction: row;
  align-items: stretch;
  overflow: visible;
}
.ac-layout-compact .ac-card__media {
  width: 38%;
  flex-shrink: 0;
  border-radius: var(--ac-radius) 0 0 var(--ac-radius);
  aspect-ratio: unset;
  min-height: 200px;
}
.ac-layout-compact .ac-card__body {
  flex: 1;
  min-width: 0;
}
.ac-layout-compact .ac-card:hover .ac-card__media img { transform: scale(1.03); }

@media (max-width: 600px) {
  .ac-layout-compact .ac-card { flex-direction: column; }
  .ac-layout-compact .ac-card__media { width: 100%; min-height: unset; aspect-ratio: 16/9; border-radius: var(--ac-radius) var(--ac-radius) 0 0; }
}

/* ═══════════════════════════════════════════════════════════════
   LIST LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.ac-layout-list .ac-card {
  flex-direction: row;
  align-items: center;
  padding: 0;
  overflow: hidden;
}
.ac-layout-list .ac-card__media {
  width: 140px;
  min-height: 90px;
  flex-shrink: 0;
  aspect-ratio: unset;
  border-radius: 0;
}
.ac-layout-list .ac-card__body {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 18px;
}
.ac-layout-list .ac-card__head-section { flex: 1; min-width: 180px; }
.ac-layout-list .ac-card__features { flex-direction: row; flex-wrap: wrap; flex: none; }
.ac-layout-list .ac-card__foot {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
  flex-shrink: 0;
}
.ac-layout-list .ac-dim-badge { bottom: auto; top: 8px; left: 8px; }

@media (max-width: 640px) {
  .ac-layout-list .ac-card { flex-direction: column; }
  .ac-layout-list .ac-card__media { width: 100%; min-height: unset; aspect-ratio: 16/9; }
  .ac-layout-list .ac-card__body { flex-direction: column; align-items: flex-start; }
  .ac-layout-list .ac-card__foot { border-top: 1px solid var(--ac-border); padding-top: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   SINGLE UNIT
   ═══════════════════════════════════════════════════════════════ */
.ac-card--single { overflow: visible; }
.ac-single__inner {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
.ac-single__media {
  flex: 0 0 45%;
  position: relative;
  border-radius: var(--ac-radius);
  overflow: hidden;
}
.ac-wrap .ac-single__media img,
.ac-single__media img {
  width: 100%;
  border-radius: var(--ac-radius);
  display: block;
}
.ac-single__body { flex: 1; }
.ac-single__body .ac-card__features { max-width: none; }
.ac-card--single .ac-status-badge { position: static; display: inline-block; margin-bottom: 10px; }

@media (max-width: 720px) {
  .ac-single__inner { flex-direction: column; }
  .ac-single__media { flex: none; width: 100%; }
}

/* ─── Promotion badge ────────────────────────────────────────── */
.ac-promo-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}
.ac-style--dark .ac-promo-badge {
  background: #451a03;
  color: #fde68a;
  border-color: #78350f;
}

/* ─── Availability chip ──────────────────────────────────────── */
.ac-avail-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #15803d;
  background: #dcfce7;
  border-radius: 20px;
  padding: 3px 9px;
  white-space: nowrap;
}
.ac-avail-chip svg { opacity: 0.8; }
.ac-style--dark .ac-avail-chip { background: #14532d; color: #86efac; }
.ac-cols-4 .ac-avail-chip { font-size: 11px; padding: 2px 7px; }

/* ─── Price strip (show_only_price mode) ──────────────────────── */
.ac-price-strip {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  background: var(--ac-primary);
  color: #fff;
  padding: 6px 16px;
  border-radius: var(--ac-btn-radius);
  font-size: 20px;
  font-weight: 800;
}
.ac-price-strip__period { font-size: 13px; font-weight: 400; opacity: .8; }

/* ─── Inline shortcodes ──────────────────────────────────────── */
.ac-count { font-size: 14px; color: var(--ac-text); }
.ac-wrap .ac-count strong,
.ac-count strong { color: var(--ac-primary); font-size: 1.2em; }
.ac-count--zero  { color: var(--ac-text-muted); }
.ac-price-from   { font-size: 14px; color: var(--ac-text-muted); }
.ac-wrap .ac-price-from strong,
.ac-price-from strong { color: var(--ac-primary); font-size: 1.3em; }
.ac-price-from__period { font-size: .8em; }

/* ─── Enquiry Modal ──────────────────────────────────────────── */
#ac-enquiry-modal { position: fixed; inset: 0; z-index: 99999; }
.ac-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
}
.ac-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: calc(var(--ac-radius) + 4px);
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow-y: auto;
  z-index: 100000;
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
  padding: 28px 30px;
}
.ac-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.ac-wrap .ac-modal__head h3,
.ac-modal__head h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: var(--ac-text); }
.ac-wrap .ac-modal__head p,
.ac-modal__head p  { margin: 0; font-size: 13px; color: var(--ac-text-muted); }
.ac-modal-close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ac-text-muted);
  padding: 4px;
  border-radius: 6px;
  transition: var(--ac-transition);
  display: flex;
}
.ac-modal-close:hover { background: #f1f5f9; color: var(--ac-text); }
/* Harden the close button so host themes (e.g. an orange `button` style)
   can't turn the little × into a big coloured block button. ID-scoped +
   !important so it always wins over theme button rules.

   44px, not the 36px this used to be: it is the only way out of the modal
   besides the overlay, and the plugin's own tap floor everywhere else is 44.
   The icon inside stays 20px, so the box grows and the × does not.

   box-sizing is pinned because this modal renders OUTSIDE .ac-wrap, so the
   border-box rule at the top of this file never reaches it. StandBy's theme
   happens to set border-box globally; a client theme on content-box would
   otherwise add the 6px padding on top and render 56px, and the armour would
   be guaranteeing a number it does not control. */
#ac-enquiry-modal .ac-modal-close {
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 6px !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  color: var(--ac-text-muted, #6b7280) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 0 !important;
  text-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
#ac-enquiry-modal .ac-modal-close:hover { background: #f1f5f9 !important; color: var(--ac-text, #1a1a2e) !important; }
#ac-enquiry-modal .ac-modal-close svg { width: 20px !important; height: 20px !important; display: block !important; flex: none !important; }
.ac-modal__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.ac-modal__field { display: flex; flex-direction: column; gap: 5px; }
.ac-modal__field--full { grid-column: 1 / -1; }
.ac-wrap .ac-modal__field label,
.ac-modal__field label { font-size: 12px; font-weight: 700; color: var(--ac-text); }
/* Secondary billing period, e.g. a weekly figure under the monthly price.
   Deliberately quiet: it is supporting information, not a competing price. */
.ac-price__alt {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ac-muted, #6b7280);
  line-height: 1.3;
}
.ac-price__alt-period { margin-left: 1px; }

.ac-wrap .ac-modal__field input,
.ac-modal__field input,
.ac-wrap .ac-modal__field select,
.ac-modal__field select,
.ac-wrap .ac-modal__field textarea,
.ac-modal__field textarea {
  padding: 9px 12px;
  border: 1px solid var(--ac-border);
  border-radius: 7px;
  font-size: 13px;
  color: var(--ac-text);
  background: #fafafa;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .15s;
}
/* Match the height of the text inputs — host themes often size selects
   differently, so pin the box model rather than inheriting theirs. */
.ac-wrap .ac-modal__field select,
.ac-modal__field select {
  -webkit-appearance: none;
  appearance: none;
  height: auto;
  /* Deliberately no line-height here. Setting one (it used to be 1.4) makes the
     select a couple of pixels taller or shorter than the text inputs beside it,
     in whichever direction the surrounding theme happens to differ. Leaving it
     alone lets the select size the same way the inputs do. A theme that sets an
     explicit line-height on its inputs should match it here via Custom CSS. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='1,1 6,6 11,1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.ac-modal__field input:focus,
.ac-modal__field select:focus,
.ac-modal__field textarea:focus {
  outline: none;
  border-color: var(--ac-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0,102,255,.1);
}
.ac-wrap .ac-modal__field textarea,
.ac-modal__field textarea { resize: vertical; min-height: 90px; }
/* Why an optional field is worth filling in. Quiet enough not to compete with
   the label, and it wraps rather than pushing the grid column wider. */
.ac-modal__hint {
  font-size: 11px;
  line-height: 1.4;
  color: var(--ac-muted, #6b7280);
  overflow-wrap: anywhere;
}
.ac-req { color: #dc2626; }

/* The line that explains the asterisk. Hidden from assistive technology in the
   template, so it is styled purely as quiet supporting text. */
.ac-modal__req-note {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ac-muted, #6b7280);
}
.ac-booking__req-note {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ac-muted, #6b7280);
}
.ac-modal-response {
  padding: 10px 14px;
  border-radius: 7px;
  font-size: 13px;
  margin-bottom: 14px;
}
.ac-modal-response--ok   { background: #dcfce7; color: #15803d; }
.ac-modal-response--fail { background: #fee2e2; color: #dc2626; }
@media (max-width: 480px) {
  /* border-box or the 18px padding is added to the max-width and the dialog
     sits 6px off each edge of a 320px screen, clipped rather than scrollable
     because it is fixed. */
  .ac-modal { padding: 22px 18px; max-width: calc(100% - 24px); box-sizing: border-box; }
  .ac-modal__fields { grid-template-columns: 1fr; }
  /* 16px so iOS Safari does not zoom the page the moment a field is focused,
     which inside a fixed-position dialog leaves the visitor scrolled away from
     the form they were filling in. Phone widths only: the desktop modal is
     dense on purpose and nothing there zooms. */
  .ac-wrap .ac-modal__field input,
  .ac-modal__field input,
  .ac-wrap .ac-modal__field select,
  .ac-modal__field select,
  .ac-wrap .ac-modal__field textarea,
  .ac-modal__field textarea { font-size: 16px; }
}

/* ─── Card hidden (filter) ───────────────────────────────────── */
.ac-card--hidden { display: none !important; }

/* ─── Admin-only hint (visible to logged-in admins only) ───── */
/* Renders in place of the Reserve button when no booking URL    */
/* is configured. Helps diagnose missing-button reports without  */
/* having to open browser dev tools or check the admin manually. */
.ac-admin-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #92400e;
  background: #fef3c7;
  border: 1px dashed #f59e0b;
  border-radius: var(--ac-btn-radius, 8px);
  text-decoration: none;
  line-height: 1.3;
  cursor: help;
  transition: background .15s, border-color .15s;
}
.ac-admin-hint:hover {
  background: #fde68a;
  border-color: #d97706;
  text-decoration: none;
  color: #78350f;
}
/* Its colour above is (0,1,0) and loses to a theme's `.kit a` (0,1,1), which
   left this amber-on-amber at 1.94:1. Only admins see it, but an unreadable
   warning is worse than none. */
.ac-wrap a.ac-admin-hint,
.ac-wrap a.ac-admin-hint:link,
.ac-wrap a.ac-admin-hint:visited {
  color: #92400e;
}
.ac-wrap a.ac-admin-hint:hover {
  color: #78350f;
}
.ac-admin-hint__cta {
  font-weight: 700;
  color: #b45309;
  white-space: nowrap;
}

/* ─── Urgency badge ────────────────────────────────────────── */
/* "Only X left" pill. Renders an attention-grabbing red/amber */
/* gradient with a soft pulsing dot, inherits border-radius    */
/* from the plugin's design tokens so it feels on-brand.       */
/* A CTA must never be clipped by the edge of its card, whatever the look or
   how little room the price column leaves. */
.ac-wrap .ac-btn { max-width: 100%; }
/* Classic keeps its own inline footer markup, where the badge and the button
   are siblings of the price block. The row already wraps; this stops the
   button itself being compressed to an unreadable width first. */
.ac-wrap .ac-card__foot > .ac-btn { flex: 0 0 auto; }
.ac-wrap .ac-card__foot > .ac-urgency-badge,
.ac-wrap .ac-card__foot > .ac-avail-chip { flex: 0 0 auto; }

.ac-urgency-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(135deg, #dc2626 0%, #cc4d0a 100%);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
  white-space: nowrap;
  vertical-align: middle;
  margin-bottom: 4px;
}

.ac-urgency-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  display: inline-block;
  animation: sxPulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes sxPulse {
  0%, 100% { opacity: 0.5; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.1);  }
}

/* When count gets really tight (1 or 2), dial up the urgency — */
/* pure red, slightly bigger, faster pulse.                     */
.ac-urgency-badge[data-count="1"],
.ac-urgency-badge[data-count="2"] {
  background: #dc2626;
  box-shadow: 0 2px 12px rgba(220, 38, 38, 0.4);
}

.ac-urgency-badge[data-count="1"] .ac-urgency-badge__dot,
.ac-urgency-badge[data-count="2"] .ac-urgency-badge__dot {
  animation-duration: 1s;
}

/* Respect users who've asked not to see motion (accessibility). */
@media (prefers-reduced-motion: reduce) {
  .ac-urgency-badge__dot { animation: none; opacity: 1; }
}

/* Position inside single-unit card so it sits next to the      */
/* status badge without crowding the title.                     */
.ac-card--single .ac-urgency-badge { margin-left: 8px; }

/* ─── Multi-site selector tabs ─────────────────────────────── */
/* Minimal text-based filter tabs above the unit grid. No pills, */
/* no card container — just clean labels with a subtle underline */
/* on the active one and a thin baseline across the whole row.   */
/*                                                               */
/* NOTE: Selectors are scoped under .ac-wrap and some visual     */
/* resets use !important to defeat aggressive WordPress-theme    */
/* button styling (Elementor / Astra / Divi / etc. all ship      */
/* global button styles with higher specificity than a plain     */
/* class selector). We only use !important on the properties     */
/* themes commonly override; behaviour and layout stay free for  */
/* child-theme overrides.                                        */

.ac-wrap .ac-site-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  border-bottom: 1px solid #e5e7eb !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
  list-style: none !important;
}

.ac-wrap .ac-site-tabs::-webkit-scrollbar {
  display: none;
}

/* Scroll affordance: when the location tabs overflow, fade the right
   edge and show a chevron so users know there are more locations. */
.ac-wrap .ac-site-tabs-wrap {
  position: relative !important;
  margin: 0 0 24px !important;
}
.ac-wrap .ac-site-tabs-wrap .ac-site-tabs {
  margin: 0 !important;
}
.ac-wrap .ac-site-tabs-wrap::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 1px !important;
  width: 56px !important;
  pointer-events: none !important;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.96)) !important;
  opacity: 0 !important;
  transition: opacity .15s ease !important;
}
.ac-wrap .ac-site-tabs-wrap.ac-site-tabs--scrollable:not(.ac-site-tabs--end)::after {
  opacity: 1 !important;
}
.ac-wrap .ac-site-tabs__more {
  position: absolute !important;
  top: 0 !important;
  bottom: 1px !important;
  right: 0 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  color: #0f172a !important;
  cursor: pointer !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
}
.ac-wrap .ac-site-tabs-wrap.ac-site-tabs--scrollable:not(.ac-site-tabs--end) .ac-site-tabs__more {
  display: inline-flex !important;
}
.ac-style--dark .ac-site-tabs-wrap::after {
  background: linear-gradient(to right, rgba(15,23,42,0), rgba(15,23,42,0.96)) !important;
}
.ac-style--dark .ac-site-tabs__more { color: #e2e8f0 !important; }

/* Hard-reset the button to a clean slate — themes apply heavy  */
/* defaults to <button>, so we need to override them explicitly. */
.ac-wrap .ac-site-tab {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 2px !important;
  margin: 0 16px -1px 0 !important;     /* gap between tabs + overlap baseline */
  min-height: 0 !important;
  height: auto !important;
  width: auto !important;
  max-width: none !important;

  font-family: var(--ac-font, inherit) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-align: left !important;
  text-decoration: none !important;

  color: #64748b !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;

  cursor: pointer !important;
  white-space: nowrap !important;
  transition: color .15s ease, border-color .15s ease !important;
  outline: none !important;
  transform: none !important;
  opacity: 1 !important;
}

.ac-wrap .ac-site-tab:hover {
  color: #0f172a !important;
  background: transparent !important;
  border-bottom-color: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}

.ac-wrap .ac-site-tab:focus,
.ac-wrap .ac-site-tab:focus-visible {
  outline: 2px solid var(--ac-primary, #0066ff) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
  background: transparent !important;
}

.ac-wrap .ac-site-tab--active,
.ac-wrap .ac-site-tab--active:hover {
  color: var(--ac-primary, #0066ff) !important;
  background: transparent !important;
  border-bottom-color: var(--ac-primary, #0066ff) !important;
  transform: none !important;
  box-shadow: none !important;
}

.ac-wrap .ac-site-tab__icon { display: none !important; }

.ac-wrap .ac-site-tab__label {
  display: inline-block !important;
  color: inherit !important;
}

.ac-wrap .ac-site-tab__count {
  display: inline-block !important;
  color: #94a3b8 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  height: auto !important;
  box-shadow: none !important;
}

.ac-wrap .ac-site-tab--active .ac-site-tab__count {
  color: var(--ac-primary, #0066ff) !important;
  opacity: 0.7;
}

/* Card is hidden (filtered out by site tab) */
.ac-card--site-hidden { display: none !important; }
.ac-card--size-hidden { display: none !important; }
/* Outside the possession band the visitor named in the hero. Removable from
   the chip above the grid, so this never becomes a filter with no way out. */
.ac-card--band-hidden { display: none !important; }

/* ── Size tabs (exclusive Small/Medium/Large — mirrors .ac-site-tab) ── */
/*
 * The location line above the size chooser.
 *
 * Scoped under .ac-wrap like every other rule in this file so a theme's own
 * .ac-location-head, if it ever has one, is not captured. Sized and coloured
 * as a label rather than a heading: it answers "which branch is this?" and
 * must not compete with the page's own H1, which on a location page is
 * already the place name.
 */
.ac-wrap .ac-location-head {
	display: flex;
	gap: 7px;
	align-items: center;
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.4;
	color: #4b5563;
}

.ac-wrap .ac-location-head svg {
	flex-shrink: 0;
	color: var(--ac-primary, #0066ff);
}

.ac-wrap .ac-location-head strong {
	font-weight: 600;
	color: #111827;
}

/*
 * The other-locations row, directly under the location line it answers.
 *
 * Pills rather than a plain sentence of links, because on a phone a run of
 * inline links wraps into lines that are hard to hit one at a time, and every
 * pill here is 44px tall for exactly that reason even though it reads as text.
 * Pulled up 6px so it belongs to the location line above it rather than to the
 * size bands below, which are the visitor's other question.
 *
 * Deliberately quiet: this is an escape hatch, not an offer. A visitor who is
 * on the right page should be able to ignore it, so it borrows the label colour
 * from .ac-location-head and only takes the brand colour on hover.
 */
.ac-wrap .ac-locsw {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	align-items: center;
	margin: -6px 0 18px;
	font-size: 14px;
	line-height: 1.4;
}

.ac-wrap .ac-locsw__label {
	color: #6b7280;
}

.ac-wrap .ac-locsw__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ac-wrap .ac-locsw__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ac-wrap .ac-locsw__item::before,
.ac-wrap .ac-locsw__item::marker {
	content: none;
}

.ac-wrap .ac-locsw__link,
.ac-wrap .ac-locsw__all {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 13px;
	border: 1px solid #e5e7eb;
	border-radius: 999px;
	background: #fff;
	color: #374151;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.ac-wrap .ac-locsw__link:hover,
.ac-wrap .ac-locsw__link:focus-visible,
.ac-wrap .ac-locsw__all:hover,
.ac-wrap .ac-locsw__all:focus-visible {
	border-color: var(--ac-primary, #0066ff);
	color: var(--ac-primary, #0066ff);
	background: #fff;
	text-decoration: none;
}

.ac-wrap .ac-locsw__all {
	border-style: dashed;
	color: #6b7280;
}

@media (max-width: 560px) {
	/*
	 * The label stops sharing a line with the pills: at this width it was
	 * taking two thirds of the first row and leaving one pill beside it.
	 */
	.ac-wrap .ac-locsw {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
}

.ac-wrap .ac-size-tabs-wrap {
  margin: 0 0 24px !important;
}
.ac-wrap .ac-size-tabs {
  display: flex !important;
  justify-content: center !important;
  gap: 40px !important;
  margin: 0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.ac-wrap .ac-size-tab {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 14px 4px !important;
  margin: 0 0 -1px 0 !important;
  min-height: 0 !important;
  height: auto !important;
  width: auto !important;
  max-width: none !important;

  font-family: var(--ac-font, inherit) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-align: left !important;
  text-decoration: none !important;

  color: #64748b !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;

  cursor: pointer !important;
  white-space: nowrap !important;
  transition: color .15s ease, border-color .15s ease !important;
  outline: none !important;
  transform: none !important;
  opacity: 1 !important;
}
.ac-wrap .ac-size-tab:hover {
  color: #0f172a !important;
  background: transparent !important;
  border-bottom-color: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}
.ac-wrap .ac-size-tab:focus {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.ac-wrap .ac-size-tab:focus-visible {
  outline: 2px solid var(--ac-primary, #0066ff) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
.ac-wrap .ac-size-tab--active,
.ac-wrap .ac-size-tab--active:hover {
  color: var(--ac-primary, #0066ff) !important;
  background: transparent !important;
  border-bottom-color: var(--ac-primary, #0066ff) !important;
  transform: none !important;
  box-shadow: none !important;
}
.ac-wrap .ac-size-tab__label {
  display: inline-block !important;
  color: inherit !important;
}
.ac-wrap .ac-size-tab__count {
  display: inline-block !important;
  color: #475569 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  height: auto !important;
  box-shadow: none !important;
}
.ac-wrap .ac-size-tab--active .ac-size-tab__count {
  color: var(--ac-primary, #0066ff) !important;
  opacity: 1 !important;
}
.ac-style--dark .ac-size-tabs { border-bottom-color: rgba(255,255,255,.14) !important; }

/* ── Possession row (band_tabs) ───────────────────────────────
   Pills, not underline tabs. The bucket row above can be underline tabs
   because "Small / Medium / Large" is three short words on one line; these
   labels are sentences with a square-foot range under them, and five of them
   on one nowrap line either overflow or shrink to unreadable. So: a wrapping
   row of pills, each two lines, which is also the shape every operator we
   measured against uses for this exact question.

   !important throughout for the same reason the bucket row needs it: these
   are <button> elements inside a theme that has its own opinion about buttons,
   and a theme's button rule is usually more specific than a plugin's. */
.ac-wrap .ac-band-tabs-wrap {
  margin: 0 0 24px !important;
}
.ac-wrap .ac-band-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
.ac-wrap .ac-band-tab {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  min-height: 44px !important;
  height: auto !important;
  width: auto !important;
  max-width: none !important;

  font-family: var(--ac-font, inherit) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-align: left !important;
  text-decoration: none !important;

  color: #0f172a !important;
  background: #fff !important;
  background-image: none !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  text-shadow: none !important;

  cursor: pointer !important;
  /* Wrapping, unlike the bucket row: the labels are sentences, and a phone
     narrower than the longest of them has to be able to break it rather than
     scroll the row sideways past it. */
  white-space: normal !important;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease !important;
  outline: none !important;
  transform: none !important;
  opacity: 1 !important;
}
.ac-wrap .ac-band-tab:hover {
  color: #0f172a !important;
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  transform: none !important;
  box-shadow: none !important;
}
.ac-wrap .ac-band-tab:focus {
  outline: none !important;
  box-shadow: none !important;
}
.ac-wrap .ac-band-tab:focus-visible {
  outline: 2px solid var(--ac-primary, #0066ff) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
.ac-wrap .ac-band-tab--active,
.ac-wrap .ac-band-tab--active:hover {
  color: #fff !important;
  background: var(--ac-primary, #0066ff) !important;
  border-color: var(--ac-primary, #0066ff) !important;
  transform: none !important;
  box-shadow: none !important;
}
.ac-wrap .ac-band-tab__label {
  display: block !important;
  color: inherit !important;
}
/* The square-foot range. Kept, because "A studio flat" is a guess until it
   says what it means in the unit the rest of the page is measured in, and
   dropped to a whisper, because the possession is the question and the
   number is the footnote. */
.ac-wrap .ac-band-tab__hint {
  display: block !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}
.ac-wrap .ac-band-tab--active .ac-band-tab__hint {
  color: rgba(255,255,255,.85) !important;
}
.ac-wrap .ac-band-tab__count {
  display: block !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  font-variant-numeric: tabular-nums;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  height: auto !important;
  box-shadow: none !important;
}
.ac-wrap .ac-band-tab--active .ac-band-tab__count {
  color: #fff !important;
  opacity: 1 !important;
}
/* Muted, not disabled: see the note on .ac-size-tab--empty. */
.ac-wrap .ac-band-tab--empty { opacity: 0.55 !important; }
.ac-wrap .ac-band-tab--empty.ac-band-tab--active { opacity: 1 !important; }
.ac-style--dark .ac-band-tab {
  color: #f1f5f9 !important;
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.14) !important;
}
.ac-style--dark .ac-band-tab:hover {
  color: #fff !important;
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,255,255,.24) !important;
}
.ac-style--dark .ac-band-tab__hint,
.ac-style--dark .ac-band-tab__count { color: #cbd5e1 !important; }
.ac-style--dark .ac-band-tab--active .ac-band-tab__hint { color: rgba(255,255,255,.85) !important; }
.ac-style--dark .ac-band-tab--active .ac-band-tab__count { color: #fff !important; }

/* On a phone the row goes full width, one pill per line: five pills of
   sentence length at 320px otherwise wrap into a ragged block whose rows are
   different heights and whose reading order is not obvious. */
@media (max-width: 480px) {
  .ac-wrap .ac-band-tabs {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  .ac-wrap .ac-band-tab {
    width: 100% !important;
    padding: 10px 12px !important;
  }
}

/* Hidden state-sync buttons used by size_tabs. Needs !important because
   the base .ac-size-btns rule sets display:inline-flex !important, which
   would otherwise beat an inline style="display:none". */
.ac-wrap .ac-size-btns--sync,
.ac-wrap .ac-size-btns--sync .ac-size-btn { display: none !important; }

/* ── Size guide ──────────────────────────────────────────────── */
.ac-size-guide {
  margin: 0 0 18px;
}
.ac-size-guide__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  font-family: var(--ac-font, inherit);
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.ac-size-guide__toggle:hover { border-color: #cbd5e1; background: #f8fafc; }
.ac-size-guide__chevron { font-size: 11px; transition: transform .2s ease; }
.ac-size-guide--open .ac-size-guide__chevron { transform: rotate(180deg); }
.ac-size-guide__panel {
  margin-top: 10px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}
.ac-size-guide__hint {
  margin: 0 0 12px;
  font-size: 12px;
  color: #64748b;
}
.ac-size-guide__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}
.ac-size-guide__opt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  text-align: left;
  font-family: var(--ac-font, inherit);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.ac-size-guide__opt:hover {
  border-color: var(--ac-btn-bg, #0066ff);
  box-shadow: 0 1px 3px rgba(15,23,42,0.08);
}
.ac-size-guide__opt:active { transform: translateY(1px); }
.ac-size-guide__opt-title { font-size: 13px; font-weight: 600; color: #1e293b; }
.ac-size-guide__opt-sub   { font-size: 11px; color: #64748b; }
.ac-style--dark .ac-size-guide__toggle,
.ac-style--dark .ac-size-guide__panel,
.ac-style--dark .ac-size-guide__opt { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.ac-style--dark .ac-size-guide__opt-title { color: #f1f5f9; }
.ac-style--dark .ac-size-guide__hint,
.ac-style--dark .ac-size-guide__opt-sub { color: #94a3b8; }

/* Empty-state when filters leave nothing */
.ac-site-empty {
  padding: 40px 20px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
  background: var(--ac-secondary, #f5f7fa);
  border-radius: var(--ac-radius, 12px);
  margin: 0;
  grid-column: 1 / -1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ac-wrap .ac-site-tab { transition: none !important; }
}

/* Mobile */
@media (max-width: 640px) {
  .ac-wrap .ac-site-tabs {
    -webkit-overflow-scrolling: touch;
  }
  .ac-wrap .ac-site-tab {
    font-size: 13px !important;
    margin-right: 12px !important;
  }
}

/* The size strip is three tabs, centred, with a 40px gap, and it did not
   shrink. At 320px it wanted 309px inside a 266px container and overflowed
   both ways at once: Small began 16px off the left of the screen and Large
   ended 16px past the right, with every ancestor overflow-x: visible, so
   neither could be reached by scrolling and nothing said they were there.
   The gap and the padding come down so three tabs fit a 320px screen, and
   the strip is made scrollable as the safety net for a longer set of labels
   or a translation. 'safe center' is what makes that net work: under plain
   'center' an overflowing flex line is centred past the scroll origin, so
   scrollLeft 0 still cannot reach the first tab. Declared twice so a browser
   that does not know the keyword keeps the centring it does know. */
@media (max-width: 480px) {
  .ac-wrap .ac-size-tabs {
    justify-content: center !important;
    justify-content: safe center !important;
    gap: 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ac-wrap .ac-size-tabs::-webkit-scrollbar {
    display: none;
  }
  .ac-wrap .ac-size-tab {
    font-size: 14px !important;
    padding: 14px 2px !important;
  }

  /* Finger-sized controls. Measured on a 320px phone the axis buttons came
     out 30px tall, "Change location" 33px and the postcode field 43px,
     against the 44px that both Apple and the WCAG target-size criterion ask
     for. The text stays the size it was; only the box grows, so nothing
     reflows on a wider screen. min-height rather than more padding because
     the padding is shared with the desktop rule. */
  .ac-wrap .ac-axis {
    padding: 2px !important;
  }
  .ac-wrap .ac-axis__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
  }
  .ac-wrap .ac-locbar__back {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
  }
  .ac-wrap .ac-locfind__input {
    min-height: 44px !important;
  }
  /* The location and size tabs are the two controls the visitor touches
     most and the location tabs measured 39px on a 375px screen. They are
     underline tabs sharing one baseline, so only the box grows: the border
     they overlap stays where it is and nothing reflows above them. */
  .ac-wrap .ac-site-tab,
  .ac-wrap .ac-size-tab {
    min-height: 44px !important;
  }
}

/* ============================================================
   Storefront layout "looks" (v1.5.0) — scoped skins.
   Classic uses the existing card styles (no overrides needed).
   ============================================================ */

/* ── Compact List ─────────────────────────────────────────── */
.ac-wrap.ac-look--compact .ac-grid { display: flex; flex-direction: column; gap: 10px; }
.ac-wrap.ac-look--compact .ac-card--compact {
	display: flex; align-items: center; gap: 16px;
	padding: 14px 16px; background: #fff;
	border: 1px solid #e7eef7; border-radius: var(--ac-radius, 12px);
	box-shadow: 0 1px 3px rgba(10,30,60,.05);
	transition: box-shadow .18s ease, border-color .18s ease;
}
.ac-wrap.ac-look--compact .ac-card--compact:hover { box-shadow: 0 6px 20px rgba(10,30,60,.10); border-color: #d3e0f0; }
.ac-wrap.ac-look--compact .ac-cx__thumb { flex: 0 0 68px; width: 68px; height: 68px; border-radius: 8px; overflow: hidden; background: #f4f8fe; }
.ac-wrap.ac-look--compact .ac-cx__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-wrap.ac-look--compact .ac-cx__main { flex: 1 1 auto; min-width: 0; }
.ac-wrap.ac-look--compact .ac-cx__id { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ac-wrap.ac-look--compact .ac-card__title { font-size: 16px; margin: 0; font-weight: 700; color: #0c2038; line-height: 1.2; }
.ac-wrap.ac-look--compact .ac-cx__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; font-size: 13px; color: #566a83; }
.ac-wrap.ac-look--compact .ac-cx__size { font-weight: 600; color: #33455c; }
.ac-wrap.ac-look--compact .ac-cx__dim { color: #7a8aa0; }
.ac-wrap.ac-look--compact .ac-cx__site { display: inline-flex; align-items: center; gap: 4px; }
.ac-wrap.ac-look--compact .ac-cx__end { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; }
.ac-wrap.ac-look--compact .ac-price { display: flex; align-items: baseline; gap: 3px; text-align: right; }
/* Same stacking as the finder look: badge above the button so neither is
   squeezed and the CTA keeps its natural width. flex-shrink is 0 for the
   same reason — a nowrap button inside a shrinkable container clips its
   own label instead of wrapping, so the container must hold its natural
   width and let flex-wrap on the card push it to its own line instead. */
.ac-wrap.ac-look--compact .ac-cx__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 6px;
	flex: 0 0 auto;
}
@media (max-width: 620px) {
	.ac-wrap.ac-look--compact .ac-card--compact { flex-wrap: wrap; }
	.ac-wrap.ac-look--compact .ac-cx__end { width: 100%; justify-content: space-between; border-top: 1px solid #eef2f7; padding-top: 10px; }
}

/* ── Space Finder ─────────────────────────────────────────── */
.ac-wrap.ac-look--finder .ac-card--finder {
	display: flex; flex-direction: column; height: 100%;
	background: #fff; border: 1px solid #e7eef7; overflow: hidden;
	border-radius: var(--ac-radius, 14px);
	box-shadow: 0 2px 6px rgba(10,30,60,.06);
	transition: transform .18s ease, box-shadow .18s ease;
}
.ac-wrap.ac-look--finder .ac-card--finder:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -18px rgba(10,30,60,.35); }
.ac-wrap.ac-look--finder .ac-fn__media { position: relative; aspect-ratio: 16 / 10; background: #f4f8fe; }
.ac-wrap.ac-look--finder .ac-fn__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-wrap.ac-look--finder .ac-fn__promo { position: absolute; top: 10px; left: 10px; background: var(--ac-accent, #ff5500); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 100px; }
.ac-wrap.ac-look--finder .ac-fn__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 18px; flex: 1; }
.ac-wrap.ac-look--finder .ac-fn__site { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #7a8aa0; }
.ac-wrap.ac-look--finder .ac-fn__hero { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ac-wrap.ac-look--finder .ac-fn__size { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--ac-primary, #0066ff); line-height: 1.1; }
.ac-wrap.ac-look--finder .ac-fn__dim { font-size: 13px; font-weight: 600; color: #7a8aa0; }
.ac-wrap.ac-look--finder .ac-fn__name { font-size: 14px; font-weight: 600; color: #33455c; margin: 0; }
.ac-wrap.ac-look--finder .ac-fn__fits { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ac-wrap.ac-look--finder .ac-fn__fits li { display: flex; align-items: flex-start; gap: 7px; font-size: 13.5px; color: #445566; line-height: 1.4; }
.ac-wrap.ac-look--finder .ac-fn__fits li svg { flex: none; color: var(--ac-primary, #0066ff); margin-top: 2px; }
.ac-wrap.ac-look--finder .ac-fn__foot { margin-top: auto; padding-top: 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ac-wrap.ac-look--finder .ac-fn__from { font-size: 12px; color: #7a8aa0; margin-right: 2px; }
.ac-wrap.ac-look--finder .ac-price__amount { font-size: 20px; font-weight: 800; color: #0c2038; }
/* Price column must be allowed to shrink, or a long promo line ("£40.00 first
   2 months") forces the actions out past the edge of the card. */
.ac-wrap.ac-look--finder .ac-fn__price { flex: 1 1 auto; min-width: 0; }
/* Availability badge stacked ABOVE the button, not beside it. Side by side they
   competed for one line and pushed the CTA outside the card — which only began
   to show once real availability data existed and the badge started rendering. */
.ac-wrap.ac-look--finder .ac-fn__actions {
	flex: 0 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}


/* Feature / group filter chips (auto-derived) - segmented control, mirrors .ac-size-btn so host themes cannot restyle it */
.ac-wrap .ac-feat-btns {
	display: inline-flex !important;
	flex-wrap: wrap !important;
	gap: 0 !important;
	padding: 2px !important;
	background: #f1f5f9 !important;
	border-radius: 6px !important;
	border: none !important;
}
.ac-wrap .ac-feat-btn {
	padding: 5px 12px !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 4px !important;
	background: transparent !important;
	font-family: var(--ac-font, inherit) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: #64748b !important;
	cursor: pointer !important;
	transition: color .15s ease, background-color .15s ease !important;
	box-shadow: none !important;
	text-shadow: none !important;
	min-height: 0 !important;
	height: auto !important;
	transform: none !important;
}
.ac-wrap .ac-feat-btn:hover {
	color: #0f172a !important;
	background: rgba(255,255,255,0.6) !important;
}
.ac-wrap .ac-feat-btn--active,
.ac-wrap .ac-feat-btn--active:hover {
	background: #fff !important;
	color: #0f172a !important;
	box-shadow: 0 1px 2px rgba(15,23,42,0.06) !important;
	transform: none !important;
}
.ac-card--feat-hidden { display: none !important; }

/* Neater "Not sure what size?" toggle - resist themes turning it into a loud block */
.ac-wrap .ac-size-guide__toggle {
	background: #fff !important;
	border: 1px solid #e2e8f0 !important;
	color: #475569 !important;
	padding: 7px 12px !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	border-radius: 8px !important;
	box-shadow: none !important;
}
.ac-wrap .ac-size-guide__toggle:hover {
	border-color: #cbd5e1 !important;
	background: #f8fafc !important;
	color: #334155 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Amax Connect — filter redesign v3 (multi-select, chips, drawer)
   ═══════════════════════════════════════════════════════════════════ */

/* Availability filter now uses its own composable hidden class */
.ac-wrap .ac-card--avail-hidden { display: none !important; }

/* ── Active-filter chips row (always visible in the results view) ── */
.ac-wrap .ac-active-filters {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px 10px !important;
  margin: 0 0 18px 0 !important;
  padding: 12px 0 0 0 !important;
  border-top: 1px solid #eef2f7 !important;
}
.ac-wrap .ac-active-filters .ac-filter-count {
  margin: 0 !important;
  font-size: 13px !important;
  color: #475569 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
.ac-wrap .ac-active-filters .ac-filter-count #ac-visible-count {
  color: #0f172a !important;
  font-variant-numeric: tabular-nums !important;
}
.ac-wrap .ac-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.ac-wrap .ac-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  padding: 4px 5px 4px 11px !important;
  border-radius: 100px !important;
  line-height: 1.4 !important;
}
.ac-wrap .ac-chip__cat { font-style: normal !important; color: #64748b !important; font-weight: 600 !important; }
/* 24px, up from 19px, which is WCAG 2.5.8 Target Size (Minimum) exactly.

   This is the one control in the plugin that deliberately does NOT reach the
   44px floor used everywhere else, and the chip row's own geometry is why. The
   chip is about 27px tall (12px text at 1.4, 4px padding, 1px borders) and the
   row sets gap: 7px with flex-wrap: wrap. A 44px target on a 24px dot spills
   10px past each side, which is wider than the 7px gap, so it would sit on top
   of the neighbouring chip's own remove button and steal its taps. Swapping a
   small target for a wrong one is the worse defect, so the dot stops at the
   24px minimum instead. Raising it does grow the chip to about 34px tall. */
.ac-wrap .ac-chip__x {
  appearance: none !important;
  box-sizing: border-box !important;
  border: 0 !important;
  cursor: pointer !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  background: #e2e8f0 !important;
  color: #475569 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  transition: background .14s ease, color .14s ease !important;
}
.ac-wrap .ac-chip__x:hover { background: var(--ac-accent, #ff5500) !important; color: #fff !important; }
.ac-wrap .ac-clear-all {
  appearance: none !important;
  border: 0 !important;
  background: none !important;
  font-family: var(--ac-font, inherit) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  cursor: pointer !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  padding: 2px 4px !important;
  margin-left: auto !important;
}
.ac-wrap .ac-clear-all:hover { color: var(--ac-accent, #ff5500) !important; }

/* ── Empty state after filtering ── */
.ac-wrap .ac-filter-empty {
  grid-column: 1 / -1 !important;
  text-align: center !important;
  color: #64748b !important;
  font-size: 14px !important;
  padding: 32px 20px !important;
  border: 1px dashed #e2e8f0 !important;
  border-radius: 12px !important;
  margin: 0 !important;
}

/* The specific empty state: two lines and the switch, so the sentence naming
   the nearest location does not run into the one naming this one. */
.ac-wrap .ac-filter-empty__line { display: block !important; }
.ac-wrap .ac-filter-empty__line + .ac-filter-empty__line { margin-top: 4px !important; color: #334155 !important; }
.ac-wrap .ac-filter-empty__go {
  appearance: none;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  margin-top: 14px !important;
  padding: 10px 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ac-primary, #0066ff) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer;
}
.ac-wrap .ac-filter-empty__go:hover { filter: brightness(1.08); }

/* A band with nothing in it. Muted, never disabled: it stays focusable and
   clicking it is how a visitor reaches the message above. */
.ac-wrap .ac-size-tab--empty { opacity: 0.5 !important; }
.ac-wrap .ac-size-tab--empty.ac-size-tab--active { opacity: 1 !important; }

/* Text for a screen reader only. Clipped rather than display:none, because a
   hidden live region is not announced at all. */
/* The enquiry form's honeypot. Out of the layout rather than display:none,
   because some automated fillers skip what is display:none, and out of the
   accessibility tree via aria-hidden on the wrapper, which is the difference
   between this and .ac-sr-only below: a screen-reader user must never be
   offered the trap.
 *
 * No .ac-wrap ancestor, and that is the whole point of this comment. This rule
 * first shipped as `.ac-wrap .ac-modal__hp`, copied from the screen-reader rule
 * below it, and matched nothing: the enquiry modal renders outside .ac-wrap, so
 * on a live site the trap appeared as a 460x42 text box labelled "Leave this
 * empty" at the top of the form, above Full Name. The selector has to be
 * reachable from the element rather than named after the neighbourhood it sits
 * in, so it is a bare class with !important on every property, which is what
 * survives a theme that resets form children.
 */
.ac-modal__hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.ac-wrap .ac-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── Size-guide "Ask us" lead-capture line ── */
.ac-wrap .ac-size-guide__ask { margin: 12px 0 2px 0 !important; font-size: 12.5px !important; color: #64748b !important; }
.ac-wrap .ac-size-guide__ask-link {
  appearance: none !important;
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
  font-family: var(--ac-font, inherit) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--ac-primary, #0066ff) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.ac-wrap .ac-size-guide__ask-link:hover { text-decoration: underline !important; }

/* ── Harden the size-guide option cards so host themes can't restyle them ── */
.ac-wrap .ac-size-guide__opt {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  text-align: left !important;
  align-items: flex-start !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #1e293b !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.3 !important;
  min-height: 0 !important;
  height: auto !important;
  transform: none !important;
  transition: border-color .14s ease, background .14s ease !important;
  font-family: var(--ac-font, inherit) !important;
}
.ac-wrap .ac-size-guide__opt:hover { border-color: var(--ac-primary, #0066ff) !important; background: #f8fafc !important; }
.ac-wrap .ac-size-guide__opt-title { font-size: 13px !important; font-weight: 600 !important; color: #1e293b !important; }
.ac-wrap .ac-size-guide__opt-sub { font-size: 11px !important; color: #64748b !important; font-weight: 500 !important; }

/* ── Filters panel: inline on desktop; mobile bits hidden ── */
.ac-wrap .ac-filters-panel { display: block !important; }
.ac-wrap .ac-filters-trigger,
.ac-wrap .ac-filters-panel__head,
.ac-wrap .ac-filters-panel__foot,
.ac-wrap .ac-filters-scrim { display: none !important; }

/* ── Dark style variants ── */
.ac-style--dark .ac-chip { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; }
.ac-style--dark .ac-chip__cat { color: #94a3b8 !important; }
.ac-style--dark .ac-chip__x { background: #334155 !important; color: #cbd5e1 !important; }
.ac-style--dark .ac-active-filters { border-top-color: #243043 !important; }
.ac-style--dark .ac-active-filters .ac-filter-count { color: #cbd5e1 !important; }
.ac-style--dark .ac-active-filters .ac-filter-count #ac-visible-count { color: #f1f5f9 !important; }
.ac-style--dark .ac-filter-empty { border-color: #334155 !important; color: #94a3b8 !important; }
.ac-style--dark .ac-filter-empty__line + .ac-filter-empty__line { color: #e2e8f0 !important; }
.ac-style--dark .ac-size-guide__opt { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; }
.ac-style--dark .ac-size-guide__opt-title { color: #f1f5f9 !important; }
.ac-style--dark .ac-size-guide__opt-sub { color: #94a3b8 !important; }

/* ─────────────────────────────  MOBILE  ───────────────────────────── */
@media (max-width: 720px) {
  .ac-wrap .ac-filters-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 11px 14px !important;
    margin: 0 0 14px 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #0f172a !important;
    cursor: pointer !important;
    font-family: var(--ac-font, inherit) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
  }
  .ac-wrap .ac-filters-trigger__badge {
    background: var(--ac-primary, #0066ff) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    min-width: 18px !important;
    height: 18px !important;
    border-radius: 100px !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 5px !important;
  }
  .ac-wrap .ac-filters-trigger__badge--on { display: inline-flex !important; }

  .ac-wrap .ac-filters-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 100000 !important;
    background: #fff !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -18px 50px -12px rgba(0,0,0,.4) !important;
    max-height: 84vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    transform: translateY(101%) !important;
    transition: transform .28s cubic-bezier(.22,.61,.36,1) !important;
    padding: 0 16px !important;
    margin: 0 !important;
  }
  .ac-wrap .ac-filters-panel.ac-filters-panel--open { transform: translateY(0) !important; }
  .ac-wrap .ac-filters-panel__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: sticky !important;
    top: 0 !important;
    background: #fff !important;
    padding: 16px 0 12px 0 !important;
    border-bottom: 1px solid #eef2f7 !important;
    z-index: 2 !important;
  }
  .ac-wrap .ac-filters-panel__title { font-size: 16px !important; font-weight: 800 !important; color: #0f172a !important; }
  /* 44px, not 32px. This rule lives inside a max-width query, so the drawer
     and its close button exist only on narrow screens: there is no mouse case
     to excuse a 32px target here, every visitor who sees it is tapping it. */
  .ac-wrap .ac-filters-panel__close {
    appearance: none !important;
    box-sizing: border-box !important;
    border: 0 !important;
    background: #f1f5f9 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    font-size: 20px !important;
    line-height: 1 !important;
    color: #475569 !important;
    padding: 0 !important;
  }
  .ac-wrap .ac-filters-panel__foot {
    display: block !important;
    position: sticky !important;
    bottom: 0 !important;
    background: #fff !important;
    padding: 12px 0 16px 0 !important;
    border-top: 1px solid #eef2f7 !important;
  }
  .ac-wrap .ac-filters-panel__apply {
    display: block !important;
    width: 100% !important;
    appearance: none !important;
    border: 0 !important;
    background: var(--ac-btn-bg, var(--ac-primary, #0066ff)) !important;
    color: var(--ac-btn-text, #fff) !important;
    font-family: var(--ac-font, inherit) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    padding: 14px !important;
    border-radius: 11px !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: normal !important;
  }
  .ac-wrap .ac-filters-scrim {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(6,12,24,.5) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .25s ease !important;
    z-index: 99999 !important;
  }
  .ac-wrap.ac-filters-drawer-open .ac-filters-scrim { opacity: 1 !important; pointer-events: auto !important; }

  /* Inside the drawer, stack each facet label above its options */
  .ac-wrap .ac-filters-panel .ac-filter-bar { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; padding-top: 14px !important; }
  .ac-wrap .ac-filters-panel .ac-filter-group { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .ac-wrap .ac-filters-panel .ac-filter-label { width: auto !important; }
  .ac-wrap .ac-filters-panel .ac-avail-btns,
  .ac-wrap .ac-filters-panel .ac-size-btns,
  .ac-wrap .ac-filters-panel .ac-feat-btns { flex-wrap: wrap !important; }
  .ac-wrap .ac-filters-panel .ac-sort-select { width: 100% !important; }

  .ac-style--dark .ac-filters-panel,
  .ac-style--dark .ac-filters-panel__head,
  .ac-style--dark .ac-filters-panel__foot { background: #0f172a !important; }
  .ac-style--dark .ac-filters-panel__head { border-bottom-color: #243043 !important; }
  .ac-style--dark .ac-filters-panel__foot { border-top-color: #243043 !important; }
  .ac-style--dark .ac-filters-trigger { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; }
  .ac-style--dark .ac-filters-panel__close { background: #334155 !important; color: #cbd5e1 !important; }
}


/* ── Features filter: high-visibility pills (scoped to the features group so
   other pages' sort/size/show filters are untouched). Faint default made the
   active state nearly invisible, which read as 'only one selectable'. ── */
.ac-wrap .ac-filter-group--feat { align-items: flex-start !important; gap: 12px !important; }
.ac-wrap .ac-filter-group--feat .ac-filter-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  padding-top: 9px !important;
}
.ac-wrap .ac-filter-group--feat .ac-feat-btns {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  border: none !important;
}
.ac-wrap .ac-filter-group--feat .ac-feat-btn {
  padding: 8px 16px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 999px !important;
  background-color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  box-shadow: none !important;
}
.ac-wrap .ac-filter-group--feat .ac-feat-btn:hover {
  color: #0f172a !important;
  border-color: var(--ac-accent, #e8750a) !important;
  background-color: #ffffff !important;
}
.ac-wrap .ac-filter-group--feat .ac-feat-btn--active,
.ac-wrap .ac-filter-group--feat .ac-feat-btn--active:hover {
  background-color: var(--ac-accent, #e8750a) !important;
  border-color: var(--ac-accent, #e8750a) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(232,117,10,.30) !important;
}
.ac-wrap .ac-filter-group--feat .ac-feat-btn--active .ac-opt-count { color: #ffffff !important; opacity: .85 !important; }
.ac-wrap .ac-filter-group--feat .ac-opt--empty { opacity: .45 !important; }



/* ---- Homepage size guide: compact cards + clickable location tags ---- */
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-fn__media { height: 132px !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-fn__media img { width:100% !important; height:100% !important; object-fit:cover !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-fn__body { padding: 12px 14px 14px !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-fn__hero { margin-bottom: 6px !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-fn__foot { margin-top: 8px !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) a.ac-btn--reserve { padding: 7px 14px !important; font-size: 12px !important; }
.ac-wrap .ac-sg__locs { display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:6px !important; margin:0 !important; }
.ac-wrap .ac-sg__locs-label { font-size:10.5px !important; font-weight:700 !important; color:#94a3b8 !important; text-transform:uppercase !important; letter-spacing:.04em !important; margin-right:1px !important; }
.ac-wrap a.ac-sg__loc, .ac-wrap a.ac-sg__loc:link, .ac-wrap a.ac-sg__loc:visited { display:inline-block !important; padding:3px 9px !important; font-size:12px !important; font-weight:600 !important; line-height:1.3 !important; color:#334155 !important; background:#f1f5f9 !important; border:1px solid #e2e8f0 !important; border-radius:999px !important; text-decoration:none !important; box-shadow:none !important; transition:background-color .15s ease, border-color .15s ease, color .15s ease !important; }
.ac-wrap a.ac-sg__loc:hover { background:var(--ac-accent,#e8750a) !important; border-color:var(--ac-accent,#e8750a) !important; color:#ffffff !important; }
.ac-wrap a.ac-sg__loc--more, .ac-wrap a.ac-sg__loc--more:link, .ac-wrap a.ac-sg__loc--more:visited { background:transparent !important; border-color:transparent !important; color:#64748b !important; font-weight:700 !important; }
.ac-wrap a.ac-sg__loc--more:hover { color:var(--ac-accent,#e8750a) !important; background:transparent !important; }


/* ---- Size guide v2: uncropped image, tighter spacing, all locations inline ---- */
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-card--sizeguide { overflow:hidden !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-fn__media { height:154px !important; background:#ffffff !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:6px !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-fn__media img { width:100% !important; height:100% !important; object-fit:contain !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-fn__body { padding:11px 16px 13px !important; gap:6px !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-fn__hero { margin:0 !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-fn__foot { margin:4px 0 0 !important; padding:0 !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) a.ac-btn--reserve { padding:8px 16px !important; font-size:12.5px !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-sg__locs { display:block !important; line-height:1.55 !important; margin:0 !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-sg__locs-label { display:inline !important; margin:0 5px 0 0 !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) a.ac-sg__loc, .ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) a.ac-sg__loc:link, .ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) a.ac-sg__loc:visited { display:inline !important; padding:0 !important; background:transparent !important; border:none !important; border-radius:0 !important; font-size:12.5px !important; font-weight:600 !important; line-height:1.55 !important; color:#475569 !important; box-shadow:none !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-sg__sep { color:#cbd5e1 !important; font-weight:400 !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) a.ac-sg__loc:hover { color:var(--ac-accent,#e8750a) !important; background:transparent !important; }

.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-sg__locs { overflow-wrap:break-word !important; word-break:normal !important; }


/* ---- Size guide v3: premium card polish ---- */
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-grid { gap:18px !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-card--sizeguide { padding:0 !important; background:#ffffff !important; border:1px solid #e7ebf1 !important; border-radius:16px !important; overflow:hidden !important; box-shadow:0 1px 2px rgba(16,24,40,.05) !important; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important; display:flex !important; flex-direction:column !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-card--sizeguide:hover { transform:translateY(-4px) !important; box-shadow:0 16px 34px rgba(16,24,40,.13) !important; border-color:#d7dee8 !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-fn__media { height:150px !important; background:#f6f8fb !important; border-bottom:1px solid #eef1f6 !important; padding:12px !important; display:flex !important; align-items:center !important; justify-content:center !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-fn__media img { width:100% !important; height:100% !important; object-fit:contain !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-fn__body { padding:14px 16px 16px !important; gap:9px !important; display:flex !important; flex-direction:column !important; flex:1 !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-fn__hero { margin:0 !important; display:flex !important; align-items:baseline !important; gap:9px !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-fn__size { font-size:21px !important; font-weight:800 !important; color:#0f172a !important; letter-spacing:-.02em !important; line-height:1 !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-fn__dim { font-size:12px !important; font-weight:600 !important; color:#5b6675 !important; background:#f1f5f9 !important; padding:3px 8px !important; border-radius:6px !important; line-height:1.4 !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-sg__locs { display:flex !important; align-items:flex-start !important; gap:6px !important; margin:0 !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-sg__pin { flex:0 0 auto !important; margin-top:2px !important; display:block !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-sg__locs-list { flex:1 1 auto !important; line-height:1.5 !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) a.ac-sg__loc, .ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) a.ac-sg__loc:link, .ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) a.ac-sg__loc:visited { display:inline !important; padding:0 !important; background:transparent !important; border:none !important; font-size:12.5px !important; font-weight:600 !important; color:#475569 !important; box-shadow:none !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) a.ac-sg__loc:hover { color:var(--ac-accent,#e8750a) !important; background:transparent !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-sg__sep { color:#cbd5e1 !important; font-weight:400 !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-fn__foot { display:block !important; margin:auto 0 0 !important; padding:0 !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-fn__price { display:none !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-fn__actions { width:100% !important; margin-top:13px !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) a.ac-btn--reserve { display:flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; width:100% !important; text-align:center !important; background:var(--ac-accent,#e8750a) !important; border:1px solid var(--ac-accent,#e8750a) !important; color:#ffffff !important; padding:10px 14px !important; font-size:13px !important; font-weight:700 !important; border-radius:10px !important; letter-spacing:.01em !important; box-shadow:0 2px 6px rgba(232,117,10,.22) !important; transition:background-color .15s ease, transform .15s ease, box-shadow .15s ease !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) a.ac-btn--reserve::after { content:'\2192' !important; font-size:14px !important; line-height:1 !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) a.ac-btn--reserve:hover { background:#cf6708 !important; border-color:#cf6708 !important; transform:translateY(-1px) !important; box-shadow:0 6px 14px rgba(232,117,10,.32) !important; color:#fff !important; }

/* size-tab hide must beat the card display:flex (specificity).
   Deliberately NOT scoped away from .ac-sg--compact, unlike the presentational
   overrides around it: these five drive the size/site/feature/band filtering,
   so they have to keep working on the compact card too. The generic
   .ac-card--band-hidden above is not enough here: this look sets
   display:flex !important on the card itself with higher specificity, so a
   band-filtered card stayed visible on the size guide while the counts said
   it was gone. */
.ac-wrap.ac-look--sizeguide .ac-card--sizeguide.ac-card--size-hidden,
.ac-wrap.ac-look--sizeguide .ac-card--sizeguide.ac-card--hidden,
.ac-wrap.ac-look--sizeguide .ac-card--sizeguide.ac-card--site-hidden,
.ac-wrap.ac-look--sizeguide .ac-card--sizeguide.ac-card--band-hidden,
.ac-wrap.ac-look--sizeguide .ac-card--sizeguide.ac-card--feat-hidden { display:none !important; }

/* size guide: whiten the renders' light-grey studio bg */
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-fn__media { background:#ffffff !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-fn__media img { filter:brightness(1.12) contrast(1.02) !important; mix-blend-mode:multiply !important; }


/* size guide v4: big size hero + relatable label */
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-fn__body { gap:10px !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-sg__top { display:flex !important; align-items:baseline !important; justify-content:space-between !important; gap:8px !important; margin:0 !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-sg__size { display:inline-flex !important; align-items:baseline !important; gap:5px !important; font-size:13px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.03em !important; color:#94a3b8 !important; line-height:1 !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-sg__num { font-size:34px !important; font-weight:800 !important; color:#0f172a !important; letter-spacing:-.02em !important; text-transform:none !important; line-height:.9 !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-sg__dim { align-self:center !important; font-size:12px !important; font-weight:600 !important; color:#5b6675 !important; background:#f1f5f9 !important; padding:3px 8px !important; border-radius:6px !important; white-space:nowrap !important; }
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-sg__label { display:inline-block !important; align-self:flex-start !important; font-size:11.5px !important; font-weight:800 !important; letter-spacing:.05em !important; text-transform:uppercase !important; color:var(--ac-accent,#e8750a) !important; background:rgba(232,117,10,.10) !important; padding:4px 10px !important; border-radius:6px !important; line-height:1.2 !important; }

/* ═══════════════════════════════════════════════════════════════
   LAYOUT × LOOK COMPLETION
   ═══════════════════════════════════════════════════════════════
   Card size (full / compact / list) previously only worked for the
   classic card: every .ac-layout-* rule targeted .ac-card__* internals,
   which the compact and finder cards do not have. Picking any other
   combination either did nothing or rendered badly.

   The model, applied consistently to all three looks:
     full    the look's natural card, in an N-column grid
     compact the same card, denser, in an N-column grid
     list    one full-width horizontal row per line

   Layout classes sit on .ac-grid, look classes on .ac-wrap, so
   .ac-wrap.ac-look--X .ac-grid.ac-layout-Y is (0,4,0) and beats the
   base rules without needing !important.
   ═══════════════════════════════════════════════════════════════ */

/* ── Compact look ──────────────────────────────────────────────
   Its base rule forces .ac-grid to a single flex column, which is why
   the columns control appeared to do nothing. That is right for list
   and wrong for the other two, so grid behaviour is restored there. */

.ac-wrap.ac-look--compact .ac-grid.ac-layout-full,
.ac-wrap.ac-look--compact .ac-grid.ac-layout-compact {
	display: grid;
	gap: 14px;
}

/* In a column the row card has nowhere near the width it has across the
   page, so the price and CTA drop to their own line rather than being
   squeezed against the text.

   Explicit grid areas rather than flex wrapping: with flex, the thumb,
   text and price each resolve their own basis and the result depends on
   content length, which put the thumb alone on one line and clipped the
   price off the card. Named areas place all three deterministically at
   any column width. */
.ac-wrap.ac-look--compact .ac-grid.ac-layout-full .ac-card--compact,
.ac-wrap.ac-look--compact .ac-grid.ac-layout-compact .ac-card--compact {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"thumb main"
		"end   end";
	align-items: center;
	row-gap: 12px;
	column-gap: 14px;
}

.ac-wrap.ac-look--compact .ac-grid.ac-layout-full .ac-cx__thumb,
.ac-wrap.ac-look--compact .ac-grid.ac-layout-compact .ac-cx__thumb {
	grid-area: thumb;
}

.ac-wrap.ac-look--compact .ac-grid.ac-layout-full .ac-cx__main,
.ac-wrap.ac-look--compact .ac-grid.ac-layout-compact .ac-cx__main {
	grid-area: main;
	min-width: 0;
}

.ac-wrap.ac-look--compact .ac-grid.ac-layout-full .ac-cx__end,
.ac-wrap.ac-look--compact .ac-grid.ac-layout-compact .ac-cx__end {
	grid-area: end;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-width: 0;
}

.ac-wrap.ac-look--compact .ac-grid.ac-layout-full .ac-cx__actions .ac-btn,
.ac-wrap.ac-look--compact .ac-grid.ac-layout-compact .ac-cx__actions .ac-btn {
	white-space: nowrap;
}

/* Denser variant: smaller thumb, drop the secondary dimension line. */
.ac-wrap.ac-look--compact .ac-grid.ac-layout-compact .ac-card--compact {
	padding: 10px 12px;
	gap: 12px;
}

.ac-wrap.ac-look--compact .ac-grid.ac-layout-compact .ac-cx__thumb {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
}

.ac-wrap.ac-look--compact .ac-grid.ac-layout-compact .ac-cx__dim {
	display: none;
}

/* ── Finder look ───────────────────────────────────────────────
   full already worked. compact had no rules at all, so it rendered
   identically to full. list inherited the global one-column rule while
   keeping a 16/10 media box, so the image stretched to the full page
   width and produced one enormous card. */

.ac-wrap.ac-look--finder .ac-grid.ac-layout-compact .ac-fn__media {
	aspect-ratio: 16 / 9;
}

.ac-wrap.ac-look--finder .ac-grid.ac-layout-compact .ac-fn__body {
	padding: 12px 13px 14px;
	gap: 6px;
}

.ac-wrap.ac-look--finder .ac-grid.ac-layout-compact .ac-fn__fits {
	display: none;
}

.ac-wrap.ac-look--finder .ac-grid.ac-layout-compact .ac-fn__size {
	font-size: 19px;
}

/* list: turn the card on its side and give the media a fixed track, so
   it can never scale with the page width again. */
.ac-wrap.ac-look--finder .ac-grid.ac-layout-list .ac-card--finder {
	flex-direction: row;
	align-items: stretch;
}

.ac-wrap.ac-look--finder .ac-grid.ac-layout-list .ac-fn__media {
	flex: 0 0 clamp(140px, 22%, 260px);
	aspect-ratio: auto;
	min-height: 100%;
}

.ac-wrap.ac-look--finder .ac-grid.ac-layout-list .ac-fn__body {
	flex: 1 1 auto;
	min-width: 0;
	padding: 16px 18px;
}

/* In a grid the foot is pushed down so cards in a row align, but a list
   row has no neighbour to align with and the gap just makes it tall. */
.ac-wrap.ac-look--finder .ac-grid.ac-layout-list .ac-fn__foot {
	margin-top: 6px;
}

/* ── Responsive ────────────────────────────────────────────────
   Every combination collapses to a single column on a phone. The
   side-by-side list cards stack rather than squeezing a 140px image
   against the text. */

@media (max-width: 860px) {
	.ac-wrap.ac-look--compact .ac-grid.ac-layout-full,
	.ac-wrap.ac-look--compact .ac-grid.ac-layout-compact,
	.ac-wrap.ac-look--finder .ac-grid.ac-layout-full,
	.ac-wrap.ac-look--finder .ac-grid.ac-layout-compact {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 560px) {
	.ac-wrap.ac-look--finder .ac-grid.ac-layout-list .ac-card--finder {
		flex-direction: column;
	}

	.ac-wrap.ac-look--finder .ac-grid.ac-layout-list .ac-fn__media {
		flex: 0 0 auto;
		aspect-ratio: 16 / 9;
		min-height: 0;
	}

	.ac-wrap.ac-look--compact .ac-card--compact {
		flex-wrap: wrap;
		row-gap: 10px;
	}

	.ac-wrap.ac-look--compact .ac-cx__end {
		flex: 1 0 100%;
		justify-content: space-between;
	}
}


/* Inline SVG icon set (replaces emoji UI icons). Sizes to font-size and
   inherits currentColor, so it works on any card style or colour scheme. */
.ac-ico{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.13em;flex:none}

/* ─── Size guide, compact card ────────────────────────────────────────────
   Used by the size-first flow, where a card is a navigation choice rather
   than a product being sold in place. Its own markup (.ac-sgc) rather than
   the finder card's, because the finder card stacks a banner image, a size
   block, a label, a price and an action into five separate rows, which is
   most of why thirteen sizes ran to ~1200px.

   Three deliberate departures from the roomier variant:
   - The render is a thumbnail beside the text, not a banner above it. It is
     recognisable at 72px and costs ~90px less per card.
   - Availability is carried by the button, not a separate badge. A solid
     button reads as bookable and an outlined one does not, so the state is
     legible at a glance and does not need a row of its own.
   - Options are chips, so they cannot collide with the price. */

/* Spacing runs on a 4px scale: 6 within a chip group, 10 between the size and
   its label, 14 between the card's two halves, 16 as card padding, 20 between
   cards. The first pass used 2-4px everywhere, which read as cramped. */
.ac-sg--compact .ac-grid {
	gap: 20px;
}

.ac-look--sizeguide .ac-sgc {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 15px;
	background: #fff;
	border: 1px solid #e7ebf1;
	border-radius: var(--ac-radius, 16px);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
	overflow: hidden;
}

.ac-sgc__main {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	min-width: 0;
}

.ac-sgc__thumb {
	flex: 0 0 auto;
	width: 72px;
	height: 54px;
	border-radius: 10px;
	background: #f1f5f9;
	overflow: hidden;
}

/* `contain`, not `cover`: these are studio renders on a light background and
   cropping them loses the shape that makes a size recognisable. */
.ac-wrap .ac-sgc__thumb img,
.ac-sgc__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.ac-sgc__info {
	flex: 1 1 auto;
	min-width: 0;
}

.ac-sgc__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

/* The scanning anchor. Everything else on the card is supporting detail. */
.ac-sgc__size {
	font-size: 28px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	color: #0f172a;
	white-space: nowrap;
}

.ac-sgc__unit {
	margin-left: 4px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #5b6675;
}

.ac-sgc__dim {
	flex: 0 0 auto;
	padding: 4px 9px;
	border-radius: 6px;
	background: #f1f5f9;
	color: #5b6675;
	font-size: 11.5px;
	white-space: nowrap;
}

.ac-sgc__label {
	display: inline-block;
	margin-top: 9px;
	padding: 4px 9px;
	border-radius: 6px;
	background: rgba(232, 117, 10, .10);
	background: color-mix(in srgb, var(--ac-accent, #e8750a) 10%, transparent);
	/* The accent at full strength on its own 10% tint measures 2.71:1, which
	   fails AA for 10.5px text. Darkening the TEXT only keeps the badge
	   unmistakably the brand colour while making it readable; the accent
	   itself is untouched, so the operator's palette is unchanged. */
	color: #ae5808;
	color: color-mix(in srgb, var(--ac-accent, #e8750a) 75%, #000);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* Card-level, not inside .ac-sgc__info: in the narrow column beside the
   thumbnail there were only ~169px, so three chips wrapped to two lines and
   made that whole grid row taller. Across the card they get the full width. */
.ac-sgc__opts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: -2px;
}

.ac-sgc__opt {
	padding: 4px 9px;
	border-radius: 5px;
	background: #f1f5f9;
	color: #475569;
	font-size: 10.5px;
	line-height: 1.5;
	white-space: nowrap;
}

.ac-sgc__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* Always two rows: price, then a full-width button. Letting it wrap only
	   when needed made the layout depend on label length, so "Join waitlist"
	   sat inline while "Check availability" dropped below, and no two cards
	   matched. The widest case (from £525/mo + Check availability = 281px)
	   cannot fit 254px of content anyway. */
	flex-wrap: wrap;
	gap: 9px 12px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid #e7ebf1;
}

.ac-sgc__price {
	flex: 0 0 auto;
	font-size: 12px;
	color: #5b6675;
	white-space: nowrap;
}

.ac-wrap .ac-sgc__price strong,
.ac-sgc__price strong {
	font-size: 18px;
	font-weight: 800;
	color: #0c2038;
	margin: 0 1px 0 3px;
}

/* This button is an <a>, rendered inside whatever theme the operator runs, so
   its colour has to out-specify that theme's global link colour. Elementor's
   `.elementor-kit-N a` is (0,1,1) and beat a plain `.ac-sgc__cta` (0,1,0),
   which left the label rendering in the theme's link orange ON the orange
   button at 1.39:1 — invisible. Every state is qualified with the wrapper and
   the element (0,3,1) so it wins without resorting to !important, and :visited
   is included because themes routinely restyle it. */
.ac-wrap.ac-look--sizeguide a.ac-sgc__cta,
.ac-wrap.ac-look--sizeguide a.ac-sgc__cta:link,
.ac-wrap.ac-look--sizeguide a.ac-sgc__cta:visited,
.ac-wrap.ac-look--sizeguide button.ac-sgc__cta {
	flex: 1 0 100%;
	text-align: center;
	padding: 9px 14px;
	border: 1.5px solid var(--ac-accent, #e8750a);
	border-radius: var(--ac-btn-radius, 10px);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: filter .15s ease, background-color .15s ease;
	/* The size guide has always used the accent colour for its CTA, not the
	   generic --ac-btn-bg (an operator can have a blue booking button and an
	   orange storefront). */
	background: var(--ac-accent, #e8750a);
	color: #fff;
	/* The waitlist CTA is a <button> when it opens the lead form, so neutralise
	   the UA button defaults the anchor never had. */
	font-family: inherit;
	line-height: 1.2;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.ac-wrap.ac-look--sizeguide a.ac-sgc__cta:hover,
.ac-wrap.ac-look--sizeguide a.ac-sgc__cta:focus,
.ac-wrap.ac-look--sizeguide button.ac-sgc__cta:hover,
.ac-wrap.ac-look--sizeguide button.ac-sgc__cta:focus {
	color: #fff;
	filter: brightness(.94);
	text-decoration: none;
}

/* Outlined, so "you cannot book this today" is visible without reading. */
.ac-wrap.ac-look--sizeguide a.ac-sgc__cta--waitlist,
.ac-wrap.ac-look--sizeguide a.ac-sgc__cta--waitlist:link,
.ac-wrap.ac-look--sizeguide a.ac-sgc__cta--waitlist:visited,
.ac-wrap.ac-look--sizeguide button.ac-sgc__cta--waitlist {
	background: #fff;
	color: var(--ac-primary, #1a2e4a);
	border-color: #cbd5e1;
}

.ac-wrap.ac-look--sizeguide a.ac-sgc__cta--waitlist:hover,
.ac-wrap.ac-look--sizeguide a.ac-sgc__cta--waitlist:focus,
.ac-wrap.ac-look--sizeguide button.ac-sgc__cta--waitlist:hover,
.ac-wrap.ac-look--sizeguide button.ac-sgc__cta--waitlist:focus {
	background: #f8fafc;
	color: var(--ac-primary, #1a2e4a);
	filter: none;
}

.ac-wrap.ac-look--sizeguide a.ac-sgc__cta:focus-visible,
.ac-wrap.ac-look--sizeguide button.ac-sgc__cta:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(26, 46, 74, .25);
}

/* Two per row on phones, one below 380px. The card carries no wide content,
   so it does not need to become full width as early as the finder card. */
@media (max-width: 640px) {
	.ac-sgc__thumb { width: 60px; height: 48px; }
	.ac-sgc__size { font-size: 24px; }
	/* Touch target. At the desktop padding this button measured 37px, under
	   the 44px minimum, and it is the only control on the card. */
	.ac-wrap.ac-look--sizeguide a.ac-sgc__cta,
	.ac-wrap.ac-look--sizeguide button.ac-sgc__cta {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

@media (max-width: 420px) {
	.ac-sgc__foot { flex-wrap: wrap; }
	.ac-sgc__cta { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.ac-sgc__cta { transition: none; }
}

/* ─── Size guide: locations on a multi-location card ──────────────────────
   The single-location guide uses the chip row for feature options; a guide
   spanning several sites uses it for the locations that have this size. Same
   slot, because in each context that is what separates one card from the next.

   These are <a> elements inside a card, so their colour has to out-specify the
   host theme's global link colour or they render in the theme's link colour,
   which on a themed site was measured at 2.16:1. */
.ac-sgc__locs {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	margin-top: -2px;
}

.ac-wrap.ac-look--sizeguide a.ac-sgc__loc,
.ac-wrap.ac-look--sizeguide a.ac-sgc__loc:link,
.ac-wrap.ac-look--sizeguide a.ac-sgc__loc:visited,
.ac-sgc__loc {
	display: inline-block;
	padding: 4px 9px;
	border-radius: 5px;
	background: #eef2f7;
	color: #334155;
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.ac-wrap.ac-look--sizeguide a.ac-sgc__loc:hover,
.ac-wrap.ac-look--sizeguide a.ac-sgc__loc:focus {
	background: var(--ac-primary, #1a2e4a);
	color: #fff;
	text-decoration: none;
}

.ac-wrap.ac-look--sizeguide a.ac-sgc__loc:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(26, 46, 74, .25);
}

@media (prefers-reduced-motion: reduce) {
	.ac-sgc__loc { transition: none; }
}

/* ── Dead-end notice ──────────────────────────────────────────────────
   Shown when a visitor reaches a booking page that cannot be completed:
   a stale link, a size taken since the page was cached, an unreachable
   API. It has to read as part of the site rather than as an error, and
   it always offers somewhere to go next. */
.ac-notice {
	max-width: 34rem;
	margin: 0 auto;
	padding: 1.5rem;
	text-align: center;
	background: var(--ac-secondary, #f5f7fa);
	border-radius: var(--ac-radius, 12px);
}
/* Parent-scoped, so the rule is one specificity step above the theme's own
   "h1 inside content" rules. These three now take whichever tag the shortcode
   was told to use, and a bare class loses to any `.entry-content h1`. */
.ac-notice .ac-notice__title {
	margin: 0 0 .5rem;
	font-size: 1.25rem;
	font-weight: 700;
}
.ac-notice__msg {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.55;
}
.ac-notice__cta {
	display: inline-block;
	margin-top: 1rem;
	padding: .7rem 1.4rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--ac-btn-text, #fff);
	background: var(--ac-btn-bg, var(--ac-primary, #0066ff));
	border-radius: var(--ac-btn-radius, 8px);
}
/* The operator's own diagnostic. Deliberately unlike the rest of the
   block, so it is never mistaken for something a customer should read. */
.ac-notice__admin {
	margin: 1.25rem 0 0;
	padding-top: .875rem;
	font-size: .8125rem;
	line-height: 1.5;
	text-align: left;
	color: #6b7280;
	border-top: 1px dashed rgba(0, 0, 0, .15);
}

/* ══ "Compare" look ═══════════════════════════════════════════════════
   One row per unit with the columns aligned across every row. Laid out
   with CSS grid rather than a <table>, because the wrapper is shared with
   every other look; the ARIA roles in the markup are what make it a table
   to a screen reader. Column widths live here, once, so the heading row
   and the unit rows cannot drift apart. */
.ac-look--compare .ac-grid {
	display: grid;
	grid-template-columns:
		minmax(9rem, 1.4fr)   /* unit  */
		minmax(6rem, .8fr)    /* size  */
		minmax(8rem, 1.6fr)   /* good for */
		minmax(7rem, .9fr)    /* availability */
		minmax(6rem, .9fr)    /* price */
		auto;                 /* action */
	gap: 0;
	align-items: stretch;
}
/* The row is a grid item that must place its own cells on the parent's
   columns, which is exactly what display:contents does. A filtered-out
   card still hides, because display:none wins over display:contents. */
.ac-look--compare .ac-card {
	display: contents;
}
.ac-look--compare .ac-cmp__cell {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	padding: .85rem .75rem;
	border-bottom: 1px solid var(--ac-line, #e6e9ef);
	font-size: .9375rem;
	min-width: 0;
}
.ac-look--compare .ac-cmp__head .ac-cmp__cell {
	padding-top: .5rem;
	padding-bottom: .5rem;
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ac-muted, #6b7280);
	border-bottom-width: 2px;
}
.ac-cmp__name { font-weight: 650; line-height: 1.3; }
.ac-cmp__site,
.ac-cmp__none { font-size: .8125rem; color: var(--ac-muted, #6b7280); }
.ac-cmp__fits { color: var(--ac-muted, #4b5563); line-height: 1.4; }
.ac-cmp__in   { color: #15803d; font-weight: 600; font-size: .875rem; }
.ac-cmp__low  { color: #b45309; font-weight: 600; font-size: .875rem; }
.ac-cmp__out  { color: var(--ac-muted, #6b7280); font-weight: 600; font-size: .875rem; }
.ac-cmp__promo { font-size: .75rem; color: var(--ac-accent, #b45309); font-weight: 600; }
.ac-look--compare .ac-cmp__action { padding-right: 0; }
.ac-look--compare .ac-cmp__action .ac-btn { width: 100%; white-space: nowrap; }

/* Below the width where six columns can hold a readable line, each row
   becomes a stacked block again and the heading row has nothing to head. */
@media (max-width: 860px) {
	.ac-look--compare .ac-grid { grid-template-columns: 1fr; }
	.ac-look--compare .ac-card {
		display: block;
		padding: .9rem 0;
		border-bottom: 1px solid var(--ac-line, #e6e9ef);
	}
	/*
	 * Two columns rather than one, because a single stack turned each row
	 * into a 210px card and 35 units into 7,400px of scrolling, which throws
	 * away the one thing this look is for. Paired left and right instead:
	 * name beside size, availability beside price, then the button.
	 */
	.ac-look--compare .ac-card {
		display: grid;
		/*
		 * Both tracks must be able to shrink. With `1fr auto` the right column
		 * sized to its longest content, which is a promo price like
		 * "£145.00 first 2 months then £290.00 /mo". That squeezed the name
		 * column to 97px and wrapped "160Sq.Ft With Power" down 276px.
		 */
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		gap: 1px .75rem;
		align-items: baseline;
	}
	.ac-look--compare .ac-cmp__cell {
		padding: .1rem 0;
		border-bottom: 0;
		flex-direction: row;
		gap: .4rem;
		align-items: baseline;
		min-width: 0;
		/*
		 * The desktop rule uses justify-content:center to centre a cell's
		 * contents VERTICALLY, which is what it means in a column flexbox.
		 * These cells are rows, where the same declaration centres
		 * HORIZONTALLY, so availability sat in the middle of its column
		 * instead of lining up under the unit name.
		 */
		justify-content: flex-start;
	}
	.ac-look--compare .ac-cmp__size   { grid-column: 1; }
	.ac-look--compare .ac-cmp__dim    { grid-column: 2; justify-content: flex-end; }
	.ac-look--compare .ac-cmp__avail  { grid-column: 1; }
	/*
	 * Block, not flex. A promotional price is two spans, "£35.00 first 2
	 * months" and "then £70.00 /mo". As flex items each wrapped on its own and
	 * the phrase interleaved on screen, reading "£35.00 first / then 2 months
	 * / £70.00 /mo". As inline text in a block it wraps as one sentence.
	 */
	.ac-look--compare .ac-cmp__price {
		grid-column: 2;
		display: block;
		text-align: right;
	}
	.ac-look--compare .ac-cmp__price > * { display: inline; }
	/* Block, not flex: the inherited flex context sized the button to its
	   content instead of the row, so width:100% did nothing. */
	.ac-look--compare .ac-cmp__action {
		grid-column: 1 / -1;
		display: block;
		padding-top: .55rem;
	}
	.ac-look--compare .ac-cmp__action .ac-btn {
		display: block;
		width: 100%;
		text-align: center;
	}
	/*
	 * The "good for" sentence is the longest thing in the row and the least
	 * useful when scanning a list. It is on the unit's own page, and it costs
	 * a third of the row height here.
	 */
	.ac-look--compare .ac-cmp__fits { display: none; }
	/*
	 * break-word, not anywhere. `anywhere` breaks mid-word even when the line
	 * would otherwise fit, which is what turned a unit name into a vertical
	 * column of characters. This only breaks a word that genuinely cannot fit.
	 */
	.ac-look--compare .ac-cmp__name { overflow-wrap: break-word; }
	/* Stack the name above the site rather than beside it, so a long name has
	   the full column width before it has to wrap at all. */
	.ac-look--compare .ac-cmp__size { flex-direction: column; align-items: flex-start; gap: 0; }

	.ac-look--compare .ac-cmp__head:where(.ac-card) { display: none; }
}

/* ══ "Scale" look ═════════════════════════════════════════════════════
   No photography. The footprint is drawn to a scale shared by every card,
   so the shapes are comparable across the grid. */
.ac-card--scale {
	display: flex;
	flex-direction: column;
	padding: 1rem;
	background: #fff;
	border: 1px solid var(--ac-line, #e6e9ef);
	border-radius: var(--ac-radius, 12px);
}
.ac-sl__site {
	font-size: .75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ac-muted, #6b7280);
}
/* A fixed-height stage. Without it the cards would be as tall as their own
   unit is big, and the grid would stagger. */
.ac-sl__plot {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	/* Taller than it was. Every shape is now sized from this height, so it
	   sets how big the largest unit can draw and therefore how legible the
	   smallest one is beside it. */
	height: 150px;
	margin: .5rem 0 .9rem;
}
.ac-sl__floor {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 100%;
	/* A faint grid, so the drawn shape reads as a floor plan and gives the
	   eye a constant reference between one card and the next. */
	background-image:
		linear-gradient(to right, rgba(0,0,0,.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(0,0,0,.06) 1px, transparent 1px);
	background-size: 12px 12px;
	background-position: center bottom;
	border-bottom: 2px solid var(--ac-line, #e6e9ef);
}
/* Square, always. The inline style sets height as a percentage of the stage;
   aspect-ratio supplies the matching width. Sizing from the card width instead
   let a large unit draw taller than the stage and overlap the text below. */
.ac-sl__unit {
	position: relative;
	align-self: flex-end;
	aspect-ratio: 1 / 1;
	width: auto;
	max-height: 100%;
	background: color-mix(in srgb, var(--ac-primary, #0066ff) 12%, transparent);
	border: 2px solid var(--ac-primary, #0066ff);
	border-radius: 3px;
}
/* The opening, so the shape reads as a unit rather than a plain square. */
.ac-sl__door {
	position: absolute;
	left: 50%;
	bottom: -2px;
	width: 38%;
	height: 3px;
	transform: translateX(-50%);
	background: #fff;
	border-left: 2px solid var(--ac-primary, #0066ff);
	border-right: 2px solid var(--ac-primary, #0066ff);
}
.ac-sl__hero { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.ac-sl__name { font-size: 1.0625rem; line-height: 1.25; }
.ac-sl__dim {
	font-size: .8125rem;
	color: var(--ac-muted, #6b7280);
	white-space: nowrap;
}
.ac-sl__fits {
	margin: .35rem 0 0;
	font-size: .875rem;
	line-height: 1.45;
	color: var(--ac-muted, #4b5563);
}
.ac-sl__points {
	margin: .5rem 0 0;
	padding: 0;
	list-style: none;
	font-size: .8125rem;
	color: var(--ac-muted, #4b5563);
}
.ac-wrap .ac-sl__points li,
.ac-sl__points li { padding-left: .9rem; position: relative; line-height: 1.5; }
.ac-sl__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--ac-primary, #0066ff);
}
/* Pushed to the bottom so the CTAs line up across a row of cards whose
   text runs to different lengths. */
.ac-sl__foot { margin-top: auto; padding-top: .9rem; }
.ac-sl__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.ac-sl__from { font-size: .8125rem; color: var(--ac-muted, #6b7280); }
.ac-sl__low {
	font-size: .75rem;
	font-weight: 600;
	color: #b45309;
	flex-basis: 100%;
}
.ac-card--scale .ac-btn { width: 100%; }

@media (prefers-reduced-motion: reduce) {
	.ac-card--scale { transition: none; }
}

/* ── Browse axis: by size / by location ───────────────────────────
   Two ways into the same estate. The toggle is a segmented control
   rather than a dropdown so both options, and which one is active,
   are readable without opening anything. */
.ac-wrap .ac-axis {
  display: inline-flex !important;
  padding: 3px !important;
  margin: 0 0 14px !important;
  gap: 2px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 999px !important;
  background: #f8fafc !important;
}
.ac-wrap .ac-axis__btn {
  appearance: none;
  border: 0 !important;
  background: transparent !important;
  padding: 7px 16px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #64748b !important;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.ac-wrap .ac-axis__btn:hover { color: #0f172a !important; }
.ac-wrap .ac-axis__btn--active,
.ac-wrap .ac-axis__btn--active:hover {
  background: #fff !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12) !important;
}
.ac-wrap .ac-axis__btn:focus-visible {
  outline: 2px solid var(--ac-primary, #2563eb);
  outline-offset: 2px;
}

/* The location counts and the size-band counts below them measure
   different populations and cannot sum. Saying so costs one line and
   removes the only reading in which the page looks broken. */
.ac-wrap .ac-tabs-note {
  margin: -16px 0 22px !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: #64748b !important;
}

/* ── Location-first view ─────────────────────────────────────────── */
.ac-wrap .ac-locpick { margin: 0 0 8px !important; }
.ac-wrap .ac-locpick__lead {
  margin: 0 0 12px !important;
  font-size: 14px !important;
  color: #475569 !important;
}
/* ── Find my nearest ─────────────────────────────────────────────── */
.ac-wrap .ac-locfind { margin: 0 0 14px !important; }
.ac-wrap .ac-locfind__label {
  display: block !important;
  margin: 0 0 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
}
/* Wraps rather than scrolls. On a narrow phone the input keeps a usable
   width and the buttons drop under it, instead of all three being squeezed
   into one unusable row. */
.ac-wrap .ac-locfind__row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: stretch !important;
}
.ac-wrap .ac-locfind__input {
  /* A basis, not a width: it takes the row when there is room and gives way
     to the buttons when there is not. min-width keeps a postcode readable
     at the point it wraps. */
  flex: 1 1 180px !important;
  min-width: 140px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 12px !important;
  /* 16px so iOS Safari does not zoom the page when the field is focused,
     which on a phone looks like the layout breaking. */
  font-size: 16px !important;
  line-height: 1.3 !important;
  color: #0f172a !important;
  background: #fff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
}
.ac-wrap .ac-locfind__input:focus {
  outline: 2px solid var(--ac-primary, #2563eb) !important;
  outline-offset: 1px !important;
}
.ac-wrap .ac-locfind__go,
.ac-wrap .ac-locfind__clear {
  /* 44px tall, so both are a comfortable tap target rather than something
     you have to aim at. */
  min-height: 44px !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.ac-wrap .ac-locfind__go {
  color: #fff !important;
  background: var(--ac-primary, #2563eb) !important;
  border: 1px solid var(--ac-primary, #2563eb) !important;
}
.ac-wrap .ac-locfind__go[disabled] { opacity: .6 !important; cursor: default !important; }
.ac-wrap .ac-locfind__clear {
  color: #475569 !important;
  background: #fff !important;
  border: 1px solid #cbd5e1 !important;
}
.ac-wrap .ac-locfind__said {
  margin: 8px 0 0 !important;
  font-size: 13px !important;
  color: #475569 !important;
  overflow-wrap: anywhere !important;
}

.ac-wrap .ac-locpick__grid {
  display: grid !important;
  /* min() rather than a bare 190px: inside a narrow column or a phone with
     a large text size, a fixed track minimum is wider than the container and
     the grid pushes the whole page sideways. Capping the minimum at 100%
     makes the track shrink instead of overflowing. */
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)) !important;
  gap: 10px !important;
}
.ac-wrap .ac-locpick__card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  padding: 14px 16px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--ac-card-radius, 12px) !important;
  background: #fff !important;
  text-align: left !important;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ac-wrap .ac-locpick__card:hover {
  border-color: var(--ac-primary, #2563eb) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .08) !important;
  transform: translateY(-1px);
}
.ac-wrap .ac-locpick__card:focus-visible {
  outline: 2px solid var(--ac-primary, #2563eb);
  outline-offset: 2px;
}
.ac-wrap .ac-locpick__name {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}
.ac-wrap .ac-locpick__name .ac-site-tab__icon { color: #94a3b8; flex: 0 0 auto; }
/* Branch names are the operator's, not ours, and some are long enough to
   overflow a card on a phone. Wrapping is the only safe default; the pin
   icon is flex: 0 0 auto above so it never shrinks to make room. */
.ac-wrap .ac-locpick__name { flex-wrap: wrap !important; overflow-wrap: anywhere !important; }
.ac-wrap .ac-locpick__meta { font-size: 12.5px !important; color: #64748b !important; }
/* A branch with nothing free is still offered, and still says so before it is
   opened. Muted rather than disabled, for the reason the empty size bands are:
   it is a real location and its waitlist is a real destination. */
.ac-wrap .ac-locpick__card--none .ac-locpick__meta { color: #b45309 !important; }
.ac-wrap .ac-locpick__card--none { opacity: 0.72 !important; }
.ac-wrap .ac-locpick__card--none:hover,
.ac-wrap .ac-locpick__card--none:focus-visible { opacity: 1 !important; }
.ac-wrap .ac-locpick__from {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ac-primary, #2563eb) !important;
}
/* Distance from the branch the visitor already chose, written in by the
   browser. Quiet by design: it orders the list, it is not the headline. */
.ac-wrap .ac-locpick__dist {
  font-size: 12.5px !important;
  color: #64748b !important;
  overflow-wrap: anywhere !important;
}
/* Once a location is chosen the picker is replaced by a bar that says
   which one, with the way back next to it. A chosen filter with no
   visible way to clear it is the commonest dead end in a faceted UI. */
.ac-wrap .ac-locbar:not([hidden]) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 0 18px !important;
  padding: 10px 14px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--ac-card-radius, 12px) !important;
  background: #f8fafc !important;
}
.ac-wrap .ac-locbar__name { font-size: 14px !important; font-weight: 700 !important; color: #0f172a !important; }
.ac-wrap .ac-locbar__back {
  appearance: none;
  border: 1px solid #cbd5e1 !important;
  background: #fff !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  cursor: pointer;
}
.ac-wrap .ac-locbar__back:hover { border-color: var(--ac-primary, #2563eb) !important; color: #0f172a !important; }

/* The chosen-location bar and the band row were once styled as one panel: the
   bar lost its lower edge and its lower corners, the band row lost its upper
   edge and kept a shared background, so the two read as a header over its row.
   Those rules are gone, because the shape they drew became unreachable the
   moment the bar moved inside .ac-controls. The two are now siblings in a
   wrapping flex row with an 8px row gap, so they sit side by side and can
   never meet, and half a box each is worse than a whole box each. See the
   .ac-controls .ac-locbar rule for what replaced them. */
/* Pills wrap here rather than scroll: there are at most a handful of bands,
   and a left-aligned row under the location name reads as its filter. */
.ac-wrap.ac-axis--location .ac-size-tabs {
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  border-bottom: 0 !important;
  overflow: visible !important;
}
.ac-wrap.ac-axis--location .ac-size-tab {
  padding: 7px 14px !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 999px !important;
}
.ac-wrap.ac-axis--location .ac-size-tab:hover {
  color: #0f172a !important;
  background: #fff !important;
  border-color: var(--ac-primary, #2563eb) !important;
}
.ac-wrap.ac-axis--location .ac-size-tab--active,
.ac-wrap.ac-axis--location .ac-size-tab--active:hover {
  color: #fff !important;
  background: var(--ac-primary, #0066ff) !important;
  border-color: var(--ac-primary, #0066ff) !important;
}
.ac-wrap.ac-axis--location .ac-size-tab__count { font-size: 12px !important; }
.ac-wrap.ac-axis--location .ac-size-tab--active .ac-size-tab__count { color: #fff !important; }
.ac-wrap.ac-axis--location .ac-size-tab:focus-visible { border-radius: 999px !important; }
@media (max-width: 480px) {
  /* The pills are the tap target for the band filter, so they keep the 44px
     floor the axis buttons already have. */
  .ac-wrap.ac-axis--location .ac-size-tab {
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
  }
  .ac-wrap.ac-axis--location .ac-size-tabs { gap: 8px !important; }
}

/* A size that exists at the chosen location but cannot be sold there.
   The card stays in the grid, because "we have this size, not right
   now, and here is where it is free" is a better answer than hiding
   it and leaving the visitor to conclude the size does not exist. */
.ac-wrap .ac-sgc__alt {
  margin: 6px 0 0 !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
  color: #b91c1c !important;
}
/* Red, not amber. Amber was read as a caution about the card rather than an
   answer about the space: asked what it meant, people said "something to
   check". Available and not available is a yes/no question, and a visitor
   already expects green and red for it. */
.ac-wrap .ac-card.ac-sgc--sold-here { border-color: #fca5a5 !important; }
/* Sold out everywhere it exists, seen from All Locations. Same treatment as
   sold-here, because to the visitor it is the same fact one scope wider, and
   giving it a second colour would imply a difference that does not exist. */
.ac-wrap .ac-card.ac-sgc--sold-all { border-color: #fca5a5 !important; }

/* ── "Available only", in the size guide ──
   The same segmented control the unit grid uses, but there it lives inside a
   filters drawer and here it stands on its own under the size bands, so it
   needs its own placement and its own tap target. The grid's rule pins
   min-height to 0, which is fine for a row inside a drawer and below the 44px
   floor everything else in this section keeps. */
.ac-look--sizeguide .ac-avail-btns {
  margin: 0 0 20px !important;
}
.ac-look--sizeguide.ac-axis--location .ac-avail-btns {
  margin: -4px 0 20px !important;
}
@media (max-width: 480px) {
  .ac-look--sizeguide .ac-avail-btns { display: flex !important; width: 100% !important; }
  .ac-look--sizeguide .ac-avail-btn {
    flex: 1 1 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    font-size: 13.5px !important;
  }
}


/* ═══ Size guide: can I have this size, and where ════════════════════════
   A row of nine place names answers "where does this size exist". The
   visitor is asking "can I have it", and on an estate this size that answer
   has to arrive before they start reading place names - so the count comes
   first, then the locations, each carrying its own yes or no.

   Colour is never the only carrier: every chip has a tick or a cross and a
   screen-reader phrase, because around one man in twelve cannot separate
   green from red and a printed page has no colour at all. */
.ac-wrap .ac-sgc__avail,
.ac-wrap .ac-sg__avail {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-top: -2px !important;
}
.ac-wrap .ac-sgc__availsum,
.ac-wrap .ac-sg__availsum {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #15803d !important;
}
.ac-wrap .ac-sgc__availsum--none,
.ac-wrap .ac-sg__availsum--none { color: #b91c1c !important; }
.ac-wrap .ac-sg__availsum .ac-sg__pin { flex: 0 0 auto !important; }

/* The chips. Base shape is set further up the file; these give each one its
   verdict, and win over the generic hover that turned every chip navy. */
.ac-wrap.ac-look--sizeguide a.ac-sgc__loc,
.ac-wrap.ac-look--sizeguide a.ac-sg__loc {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.ac-wrap.ac-look--sizeguide a.ac-sgc__loc--yes,
.ac-wrap.ac-look--sizeguide a.ac-sgc__loc--yes:link,
.ac-wrap.ac-look--sizeguide a.ac-sgc__loc--yes:visited {
  background: #ecfdf5 !important;
  color: #166534 !important;
  box-shadow: inset 0 0 0 1px #a7f3d0 !important;
}
.ac-wrap.ac-look--sizeguide a.ac-sgc__loc--yes:hover,
.ac-wrap.ac-look--sizeguide a.ac-sgc__loc--yes:focus {
  background: #d1fae5 !important;
  color: #14532d !important;
}
.ac-wrap.ac-look--sizeguide a.ac-sgc__loc--no,
.ac-wrap.ac-look--sizeguide a.ac-sgc__loc--no:link,
.ac-wrap.ac-look--sizeguide a.ac-sgc__loc--no:visited {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  box-shadow: inset 0 0 0 1px #fecaca !important;
}
.ac-wrap.ac-look--sizeguide a.ac-sgc__loc--no:hover,
.ac-wrap.ac-look--sizeguide a.ac-sgc__loc--no:focus {
  background: #fee2e2 !important;
  color: #991b1b !important;
}
.ac-wrap .ac-sgc__loc-mk,
.ac-wrap .ac-sg__loc-mk {
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* The finder card flattens its chips to a plain run-on line, so there the
   verdict is carried by the mark and the text colour alone. */
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) a.ac-sg__loc--yes,
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) a.ac-sg__loc--yes:link,
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) a.ac-sg__loc--yes:visited {
  color: #166534 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) a.ac-sg__loc--no,
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) a.ac-sg__loc--no:link,
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) a.ac-sg__loc--no:visited {
  color: #b91c1c !important;
  background: transparent !important;
  box-shadow: none !important;
}
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-sg__locs-list a.ac-sg__loc {
  margin-right: 8px !important;
}

/* ── One location chosen ──
   The summary and the whole row are replaced, not added to: with a location
   picked they are answers to a question the visitor has stopped asking. */
.ac-wrap .ac-sgc__here {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}
.ac-wrap .ac-sgc__verdict {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}
.ac-wrap .ac-sgc__verdict--yes { color: #15803d !important; }
.ac-wrap .ac-sgc__verdict--no  { color: #b91c1c !important; }
.ac-wrap .ac-sgc__verdict-mk {
  font-size: 11px !important;
  line-height: 1 !important;
}
.ac-wrap .ac-sgc__types-lab {
  margin: 1px 0 0 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
  line-height: 1.4 !important;
}
.ac-wrap ul.ac-sgc__types {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.ac-wrap li.ac-sgc__type {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 3px 8px !important;
  border-radius: 5px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  list-style: none !important;
}
.ac-wrap li.ac-sgc__type::before,
.ac-wrap li.ac-sgc__type::marker { content: none !important; }
.ac-wrap li.ac-sgc__type--yes {
  background: #ecfdf5 !important;
  color: #166534 !important;
  box-shadow: inset 0 0 0 1px #a7f3d0 !important;
}
.ac-wrap li.ac-sgc__type--no {
  background: #f8fafc !important;
  color: #64748b !important;
  box-shadow: inset 0 0 0 1px #e2e8f0 !important;
}
.ac-wrap .ac-sgc__type-mk { font-size: 9.5px !important; line-height: 1 !important; }
.ac-wrap .ac-sgc__type-note {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  opacity: .85 !important;
}
.ac-wrap .ac-sgc__elsewhere {
  margin: 1px 0 0 !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
  color: #475569 !important;
}

/* On a phone the chips are the tap target for a whole location, so they get
   the 44px floor the rest of the section keeps. The unit-type chips are not
   links and stay compact. */
@media (max-width: 480px) {
  .ac-wrap.ac-look--sizeguide a.ac-sgc__loc {
    min-height: 32px !important;
    padding: 6px 10px !important;
    font-size: 11.5px !important;
  }
  .ac-wrap .ac-sgc__availsum,
  .ac-wrap .ac-sg__availsum { font-size: 12px !important; }
}

/* The finder card's generic chip hover paints every location the accent
   colour, which would throw away the verdict on the way past. Each state
   keeps its own hue and just deepens. */
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) a.ac-sg__loc--yes:hover,
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) a.ac-sg__loc--yes:focus {
  color: #14532d !important;
  background: transparent !important;
  text-decoration: underline !important;
}
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) a.ac-sg__loc--no:hover,
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) a.ac-sg__loc--no:focus {
  color: #991b1b !important;
  background: transparent !important;
  text-decoration: underline !important;
}
/* The pin no longer sits inside the chip row - it moved up into the count
   line - so the row is a single run of text and needs no flex gap. */
.ac-wrap.ac-look--sizeguide:not(.ac-sg--compact) .ac-sg__locs {
  display: block !important;
}

/* ── Hiding, once, for everything the JS hides ────────────────────── */
/* A location tab with nothing free. The amber is the picker card's, so the
   two places that state the same fact look like the same fact, and the label
   is muted the way an empty size tab is. Both are left off the active tab:
   once it is the filter doing the work it needs to look chosen, and the
   message in the grid is carrying the fact by then. */
.ac-wrap .ac-site-tab--none:not(.ac-site-tab--active) .ac-site-tab__label { opacity: 0.68 !important; }
.ac-wrap .ac-site-tab--none:not(.ac-site-tab--active) .ac-site-tab__count { color: #b45309 !important; }

/* ============================================================
   Nearest-store finder [amax_connect_find]
   ============================================================ */
.ac-wrap.ac-find { margin: 0 0 24px !important; }
.ac-wrap .ac-find__title {
  margin: 0 0 6px !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  color: #0c2038 !important;
}
.ac-wrap .ac-find__lead {
  margin: 0 0 14px !important;
  font-size: 15px !important;
  color: #475569 !important;
}
.ac-wrap .ac-find__label {
  display: block !important;
  margin: 0 0 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
}
/* Wraps rather than scrolls: on a narrow phone the input keeps a usable
   width and the button drops under it. */
.ac-wrap .ac-find__row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: stretch !important;
}
/* The second question, under the postcode rather than beside it. Beside it
   the two controls compete for one narrow row and the postcode, which is the
   one that must be filled, ends up the smaller of the two. */
.ac-wrap .ac-find__size { margin: 10px 0 0 !important; }
.ac-wrap .ac-find__band {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  /* 44px, and 16px text so iOS Safari does not zoom the page on focus. */
  min-height: 44px !important;
  padding: 10px 12px !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  color: #0f172a !important;
  background: #fff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
}
.ac-wrap .ac-find__band:focus {
  outline: 2px solid var(--ac-primary, #2563eb) !important;
  outline-offset: 1px !important;
}
.ac-wrap .ac-find__input {
  flex: 1 1 200px !important;
  min-width: 140px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 12px !important;
  /* 16px so iOS Safari does not zoom the page on focus, which on a phone
     reads as the layout breaking. */
  font-size: 16px !important;
  line-height: 1.3 !important;
  color: #0f172a !important;
  background: #fff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
}
.ac-wrap .ac-find__input:focus {
  outline: 2px solid var(--ac-primary, #2563eb) !important;
  outline-offset: 1px !important;
}
.ac-wrap .ac-find__go,
.ac-wrap .ac-find__geo {
  /* 44px, so both are a tap target rather than something to aim at. */
  min-height: 44px !important;
  padding: 10px 16px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
}
.ac-wrap .ac-find__go {
  color: #fff !important;
  background: var(--ac-primary, #2563eb) !important;
  border: 1px solid var(--ac-primary, #2563eb) !important;
  white-space: nowrap !important;
}
.ac-wrap .ac-find__geo {
  display: block !important;
  margin: 8px 0 0 !important;
  color: var(--ac-primary, #2563eb) !important;
  background: #fff !important;
  border: 1px solid #cbd5e1 !important;
}
.ac-wrap .ac-find__go[disabled],
.ac-wrap .ac-find__geo[disabled] { opacity: .6 !important; cursor: default !important; }
.ac-wrap .ac-find__said {
  margin: 10px 0 0 !important;
  font-size: 14px !important;
  color: #475569 !important;
}

/* Results. An ordered list, unnumbered: the sequence is the answer, but a
   visitor reads "1." as a rank they have to interpret, and the distance on
   each row already says it. */
.ac-wrap .ac-find__results {
  list-style: none !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.ac-wrap .ac-find__result { margin: 0 !important; padding: 0 !important; }
/* The whole row is the link, so there is nothing to aim at: the target is
   the card. It wraps, so a long branch name never squeezes the price. */
.ac-wrap .ac-find__link {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px 12px !important;
  min-height: 44px !important;
  padding: 14px 16px !important;
  text-decoration: none !important;
  background: #fff !important;
  border: 1px solid #e7eef7 !important;
  border-radius: var(--ac-radius, 12px) !important;
  box-shadow: 0 1px 3px rgba(10, 30, 60, .05) !important;
}
.ac-wrap .ac-find__link:hover,
.ac-wrap .ac-find__link:focus {
  border-color: #d3e0f0 !important;
  box-shadow: 0 6px 20px rgba(10, 30, 60, .10) !important;
}
.ac-wrap .ac-find__name {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0c2038 !important;
}
.ac-wrap .ac-find__km {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  white-space: nowrap !important;
}
/* The two facts take a line of their own, because they are the reason to
   click and a row that squeezes them onto the end of the name buries them. */
.ac-wrap .ac-find__facts {
  flex: 1 1 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 14px !important;
  font-size: 14px !important;
  color: #475569 !important;
}
/* Whether the size they named is free here, in the same green-and-red the
   booking grid uses, so one colour means one thing across the flow. The word
   carries the answer on its own; the colour and the dot only make it quicker
   to scan, which is what keeps it readable to somebody who cannot tell the
   two hues apart. */
.ac-wrap .ac-find__sizes--fits,
.ac-wrap .ac-find__sizes--none {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  font-weight: 600 !important;
}
.ac-wrap .ac-find__sizes--fits::before,
.ac-wrap .ac-find__sizes--none::before {
  content: "" !important;
  flex: 0 0 auto !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  /* Baseline-aligned text would sit the dot on the line; nudge it to the
     middle of the x-height instead. */
  transform: translateY(-1px) !important;
}
.ac-wrap .ac-find__sizes--fits { color: #15803d !important; }
.ac-wrap .ac-find__sizes--fits::before { background: #16a34a !important; }
/* Muted rather than alarming: "not that size here" is an answer, not an
   error, and the row still carries a price worth reading. */
.ac-wrap .ac-find__sizes--none { color: #b91c1c !important; }
.ac-wrap .ac-find__sizes--none::before { background: #dc2626 !important; }
.ac-wrap .ac-find__from { font-weight: 600 !important; color: #0c2038 !important; }
.ac-wrap .ac-find__cta {
  flex: 0 0 auto !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ac-primary, #2563eb) !important;
  text-decoration: underline !important;
}
.ac-wrap .ac-find__all { margin: 12px 0 0 !important; font-size: 14px !important; }

@media (max-width: 480px) {
  /* The CTA moves under the facts rather than sitting at the end of a row
     it has to share with a price. */
  .ac-wrap .ac-find__cta { flex: 1 1 100% !important; }
}

/* ---- float="bottom": the same finder, pinned to the foot of the window ----

   Anchored at bottom: 0 with no height of its own, so it grows upward as
   results arrive rather than pushing the input off the bottom of the screen.
   The results cap at 42vh and scroll: a branch list is an answer, not a
   takeover, and a visitor must always be able to see the page it is sitting
   over.

   z-index 59 sits one under the booking bar's 60. The two are never on a page
   together - find_float_footer() refuses where the booking shortcode is - but
   a builder that renders the booking form some other way would put them on the
   same edge, and if that happens the price must be the one on top. */
.ac-wrap.ac-find--float {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  z-index: 59 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  /* The right gutter is a token because a theme's own floating button - a
     WhatsApp bubble, a chat launcher - lives in that corner and this bar would
     sit under it. A site with one sets this to clear it. */
  padding: 10px max(14px, var(--ac-find-float-gap, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) 14px !important;
  background: #fff !important;
  border-top: 1px solid #e5e7eb !important;
  box-shadow: 0 -2px 14px rgba(15, 23, 42, .14) !important;
}

/* Sized and placed so the close control is a 44px target that never lands on
   another control, and so a long branch name in the list below cannot run
   under it.

   Out of flow, so its place has to be kept clear rather than taken. That was
   half done: the title reserves room for it and the form did not, so on a wide
   bar - where the row does not wrap and the geolocate button is the rightmost
   thing on it - the X sat on that button's last 30px. Measured on the dev
   footer bar at 1440px: close x 1396-1440, geolocate x 1212-1426, and the
   close is painted second. A visitor aiming at "use my current location" and
   landing 20px from its right edge closed the bar instead. The form now
   reserves the width below, which is the half that was missing.

   Anchored to the float gap rather than to the viewport edge, because that
   token exists to clear a theme's own corner button - a chat launcher, a
   WhatsApp bubble - and a close control left at right: 0 would be the one part
   of the bar still underneath it.

   Pulled down by the container's own top padding so it centres on the search
   row instead of on the bar. At right: 0/top: 0 in a 66px bar it rode 10px
   high, which reads as a stray glyph in the corner rather than this bar's
   close button. */
.ac-wrap.ac-find--float .ac-find__close {
  position: absolute !important;
  top: 10px !important;
  right: var(--ac-find-float-gap, 0px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #475569 !important;
  cursor: pointer !important;
}
.ac-wrap.ac-find--float .ac-find__close:hover,
.ac-wrap.ac-find--float .ac-find__close:focus {
  background: none !important;
  color: #0c2038 !important;
}
.ac-wrap.ac-find--float .ac-find__close:focus-visible {
  outline: 2px solid var(--ac-primary, #2563eb) !important;
  outline-offset: -2px !important;
}
.ac-wrap.ac-find--float .ac-find__close-x {
  font-size: 26px !important;
  line-height: 1 !important;
}

/* The label is off-screen here, and `.ac-wrap .ac-find__label` is declared
   later in this file than `.ac-wrap .ac-sr-only` at the same specificity, so
   its margin would win and undo half the clip. Restated at 0,3,0. */
.ac-wrap.ac-find--float .ac-find__label.ac-sr-only { margin: -1px !important; }

/* A title is optional here and usually empty - the footer bar passes none -
   but a page that pins its own finder may set one, and in a bar it is a line
   of text, not a section heading. */
.ac-wrap.ac-find--float .ac-find__title {
  margin: 0 0 6px !important;
  padding-right: 44px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* The close button is out of flow over this row, not above it: with no title
   the bar is one row tall and "above" is the same 44px. So the row gives up
   the width the close occupies, which is the only way a control on it cannot
   end up underneath. 44px is the close's own width; the gap token cannot make
   this smaller, only the close further from the edge, so one value covers
   every setting of it. */
.ac-wrap.ac-find--float .ac-find__form {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding-right: 44px !important;
}
/* The input and Search keep their own row so they never separate, and that
   row takes whatever width is left once the geolocate button has its. */
.ac-wrap.ac-find--float .ac-find__row { flex: 1 1 260px !important; }
.ac-wrap.ac-find--float .ac-find__go { flex: 0 0 auto !important; }
.ac-wrap.ac-find--float .ac-find__said { flex: 1 1 100% !important; }

/* Inline rather than a block of its own: in a bar the two controls belong on
   one line, and on a narrow phone the row wraps and it drops under the input
   the same way Search does. */
.ac-wrap.ac-find--float .ac-find__geo {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

.ac-wrap.ac-find--float .ac-find__said { margin: 0 !important; }

.ac-wrap.ac-find--float .ac-find__results {
  max-height: 42vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin: 10px 0 0 !important;
  gap: 8px !important;
}

/* Tighter rows than the in-page finder: the bar is borrowing the visitor's
   screen and gives it back sooner. */
.ac-wrap.ac-find--float .ac-find__link {
  padding: 10px 12px !important;
  box-shadow: none !important;
  background: #f8fafc !important;
}
.ac-wrap.ac-find--float .ac-find__name { font-size: 15px !important; }

@media (max-width: 480px) {
  /* The geolocate button has no room beside a 16px input and a Search button,
     so it takes the line under them rather than squeezing all three. */
  .ac-wrap.ac-find--float .ac-find__geo { flex: 1 1 100% !important; }
  .ac-wrap.ac-find--float .ac-find__results { max-height: 38vh !important; }
}

/* Put away, not gone. Closing the bar used to set `hidden` on it, and the only
   way back was a page load: a visitor who says "not now" was answered with
   "never". Collapsed is a state of the same container instead, so one class
   decides whether the visitor sees the bar or the pill, and the pill cannot be
   hidden by the bar being hidden because it is inside it. */
.ac-wrap.ac-find--float.ac-find--collapsed {
  left: 14px !important;
  right: auto !important;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  width: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

.ac-wrap.ac-find--float.ac-find--collapsed .ac-find__title,
.ac-wrap.ac-find--float.ac-find--collapsed .ac-find__form,
.ac-wrap.ac-find--float.ac-find--collapsed .ac-find__said,
.ac-wrap.ac-find--float.ac-find--collapsed .ac-find__results,
.ac-wrap.ac-find--float.ac-find--collapsed .ac-find__all,
.ac-wrap.ac-find--float.ac-find--collapsed .ac-find__close {
  display: none !important;
}

/* Scoped to :not([hidden]) on purpose. `.ac-wrap [hidden][hidden]` at the foot
   of this file is 0,3,0 and this selector would be 0,3,1, so an unconditional
   display here would beat the guard and the pill would be unhideable - the
   exact failure that rule exists to prevent. Written this way, the guard wins
   because no display of mine applies while the attribute is there. */
.ac-wrap.ac-find--float .ac-find__reopen:not([hidden]) {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 11px 17px !important;
  background: var(--ac-accent, #1f6feb) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 12px rgba(15, 23, 42, .22) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  text-align: left !important;
  text-transform: none !important;
  text-decoration: none !important;
  color: #fff !important;
  cursor: pointer !important;
}

/* Declared again for the states, because a base reset does not carry into a
   state the theme also paints: `.elementor-kit-11 button:hover` is 0,2,1 and
   sets its own background, radius and padding, so a pill that only reset the
   base turns into the theme's button under a thumb. */
.ac-wrap.ac-find--float .ac-find__reopen:not([hidden]):hover,
.ac-wrap.ac-find--float .ac-find__reopen:not([hidden]):focus,
.ac-wrap.ac-find--float .ac-find__reopen:not([hidden]):active {
  background: var(--ac-accent, #1f6feb) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 11px 17px !important;
  color: #fff !important;
  font-size: 14px !important;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow: 0 3px 16px rgba(15, 23, 42, .3) !important;
}

.ac-wrap.ac-find--float .ac-find__reopen:not([hidden]):focus-visible {
  outline: 2px solid #101828 !important;
  outline-offset: 2px !important;
}

/* The dot is decoration with aria-hidden on it; it carries no meaning the text
   does not already carry. */
.ac-wrap.ac-find--float .ac-find__reopen-pin {
  flex: 0 0 auto !important;
  font-size: 10px !important;
  line-height: 1 !important;
  opacity: .85 !important;
}

.ac-wrap.ac-find--float .ac-find__reopen-text {
  white-space: nowrap !important;
}

/* Bottom left, deliberately. A floating chat or WhatsApp button is bottom
   right on nearly every site that has one, and two round things overlapping in
   the same corner is worse than either. --ac-find-float-gap is still honoured
   for a site whose own furniture is on the left. */
@media (max-width: 480px) {
  .ac-wrap.ac-find--float.ac-find--collapsed {
    left: max(12px, var(--ac-find-float-gap, 0px)) !important;
  }

  .ac-wrap.ac-find--float .ac-find__reopen:not([hidden]) {
    padding: 11px 15px !important;
  }
}

/* ── The size-help tile ──
   A grid item that is not a unit. It carries no .ac-card class on purpose, so
   the filter layer never counts, hides or sorts it as something bookable, which
   also means it has no --hidden states to inherit and needs its own box. Pinned
   last with order, because sorting detaches the cards and re-appends them and
   would otherwise leave the tile stranded at the front of the grid. */
.ac-help-tile {
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  border: 1px dashed var(--ac-border);
  border-radius: var(--ac-radius);
  background: var(--ac-secondary);
}
.ac-help-tile__title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ac-text);
}
.ac-help-tile__body {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ac-text-muted);
}
.ac-help-tile__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 2px solid var(--ac-btn-bg);
  border-radius: var(--ac-btn-radius);
  background: var(--ac-btn-bg);
  color: var(--ac-btn-text);
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  transition: var(--ac-transition);
}
.ac-help-tile__btn:hover,
.ac-help-tile__btn:focus-visible { filter: brightness(0.94); }
/* The second action is quieter than the first without dropping to a bare link:
   it keeps the same box and tap target, so on a phone the two read as two
   choices rather than a button with a caption under it. */
.ac-help-tile__btn--quiet {
  background: transparent;
  color: var(--ac-btn-bg);
}
.ac-style--dark .ac-help-tile {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
}
.ac-style--dark .ac-help-tile__title { color: #fff; }
.ac-style--dark .ac-help-tile__body { color: rgba(255, 255, 255, 0.76); }
.ac-style--dark .ac-help-tile__btn--quiet { color: #fff; border-color: rgba(255, 255, 255, 0.4); }

/* A tile in a one-column grid is a full-width band, so its buttons stretch to
   match rather than sitting as two odd stubs against the left edge. */
@media (max-width: 600px) {
  .ac-help-tile { padding: 20px; }
  .ac-help-tile__btn { width: 100%; }
}

/* ── The sq ft / m² switch ───────────────────────────────────────────────── */
/* A reading preference, not a filter, so it is styled as a quiet segmented pair
   above the grid rather than as one of the filter buttons. It sits on its own row
   and right-aligns, which keeps it out of the way of the count line it shares the
   space above the units with. */
.ac-unitsw {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; margin: 0 0 12px;
  font-size: 13px; color: var(--ac-text-muted);
}
.ac-unitsw__btns { display: inline-flex; border: 1px solid var(--ac-border); border-radius: var(--ac-btn-radius); overflow: hidden; }
.ac-unitsw__btn {
  min-height: 44px; padding: 0 14px;
  border: 0; background: transparent; color: var(--ac-text-muted);
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: var(--ac-transition);
}
.ac-unitsw__btn + .ac-unitsw__btn { border-left: 1px solid var(--ac-border); }
.ac-unitsw__btn:hover { color: var(--ac-text); }
.ac-unitsw__btn--active { background: var(--ac-btn-bg); color: var(--ac-btn-text); }
.ac-unitsw__btn:focus-visible { outline: 2px solid var(--ac-btn-bg); outline-offset: -2px; }
.ac-style--dark .ac-unitsw__btn--active { background: var(--ac-btn-bg); color: var(--ac-btn-text); }

@media (max-width: 600px) {
  /* The label is the one thing that can go: "sq ft | m²" says what it does, and
     a phone would rather have the row than the sentence. */
  .ac-unitsw { justify-content: center; margin-bottom: 14px; }
  .ac-unitsw__label { display: none; }
  .ac-unitsw__btns { flex: 1 1 auto; }
  .ac-unitsw__btn { flex: 1 1 50%; }
}

/* ── The fold: "See all 10 units" ───────────────────────────────────────── */
/* A folded card is still one of the visible units: it counts, it sorts, and it
   is in the markup a crawler reads. Only this rule takes it off the screen, and
   it deliberately does not join the --hidden family, whose members are excluded
   from the sorted set and from the counts. */
.ac-card--folded { display: none; }

.ac-fold {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
.ac-fold__btn {
  min-height: 44px;
  padding: 12px 28px;
  border: 2px solid var(--ac-btn-bg);
  border-radius: var(--ac-btn-radius);
  background: transparent;
  color: var(--ac-btn-bg);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: var(--ac-transition);
}
.ac-fold__btn:hover,
.ac-fold__btn:focus-visible {
  background: var(--ac-btn-bg);
  color: var(--ac-btn-text);
}
.ac-style--dark .ac-fold__btn { border-color: var(--ac-btn-bg); color: var(--ac-btn-text); }
.ac-style--dark .ac-fold__btn:hover,
.ac-style--dark .ac-fold__btn:focus-visible { background: var(--ac-btn-bg); color: var(--ac-btn-text); }

@media (max-width: 600px) {
  .ac-fold { margin-top: 20px; }
  .ac-fold__btn { width: 100%; }
}

/* ── "Unified" look ────────────────────────────────────────────────────────
   One card that answers the whole spine: which branch, how big in everyday
   terms, what it costs and whether it is actually there.

   The three colours here are the storefront's settled ones, not a fourth
   scheme: red for nothing to sell, amber for nearly gone, green for there.
   That matters because the availability markup is borrowed from the booking
   rail, where "waitlist only" is deliberately AMBER (a waitlist is a real
   destination on a page a visitor has already committed to) and "only 2 left"
   is red. On a grid the visitor is still choosing, and the storefront's own
   convention, which the location list and the branch pills already use, is
   the opposite: red is the thing you cannot have. So both are restyled here,
   scoped to this look, rather than either vocabulary being forked in PHP.
   One state name, one set of words, one threshold, one operator label. */
.ac-wrap.ac-look--unified .ac-un__media { position: relative; aspect-ratio: 16 / 10; background: #f4f8fe; }
.ac-wrap.ac-look--unified .ac-un__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-wrap.ac-look--unified .ac-un__promo {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--ac-accent, #ff5500); color: #fff;
  font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 100px;
}
.ac-wrap.ac-look--unified .ac-un__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 18px; flex: 1; }
.ac-wrap.ac-look--unified .ac-un__site { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #7a8aa0; }
.ac-wrap.ac-look--unified .ac-un__site svg { flex: none; }
.ac-wrap.ac-look--unified .ac-un__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ac-wrap.ac-look--unified .ac-un__name {
  margin: 0; font-size: 22px; font-weight: 800; line-height: 1.1;
  letter-spacing: -.02em; color: var(--ac-primary, #0066ff);
}
.ac-wrap.ac-look--unified .ac-un__dim {
  font-size: 12px; font-weight: 600; color: #5b6675;
  background: #f1f5f9; padding: 3px 8px; border-radius: 6px; line-height: 1.4;
}
/* The possession line, which is the same wording the band tabs filter on. */
.ac-wrap.ac-look--unified .ac-un__band { margin: 0; font-size: 14px; font-weight: 600; color: #33455c; }
.ac-wrap.ac-look--unified .ac-un__feats { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ac-wrap.ac-look--unified .ac-un__feats li {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: #445566; line-height: 1.3;
  background: #f6f8fb; border: 1px solid #eef1f6; border-radius: 6px; padding: 4px 8px;
}
.ac-wrap.ac-look--unified .ac-un__feats li svg { flex: none; color: var(--ac-primary, #0066ff); }
.ac-wrap.ac-look--unified .ac-un__foot {
  margin-top: auto; padding-top: 12px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.ac-wrap.ac-look--unified .ac-un__money { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ac-wrap.ac-look--unified .ac-un__actions { flex: 0 0 auto; }
.ac-wrap.ac-look--unified .ac-un__actions .ac-btn { width: 100%; }

/* Availability, in the storefront's three colours. */
.ac-wrap.ac-look--unified .ac-un__avail .ac-avail-flag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; line-height: 1.2; white-space: nowrap;
}
.ac-wrap.ac-look--unified .ac-un__avail .ac-avail-flag__dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: currentColor;
}
.ac-wrap.ac-look--unified .ac-un__avail .ac-avail-flag--ok {
  background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857;
}
.ac-wrap.ac-look--unified .ac-un__avail .ac-avail-flag--none {
  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
}
/* Nearly gone is amber here, and still, because red now means "gone" and a
   grid of ten pulsing dots is noise rather than urgency. */
.ac-wrap.ac-look--unified .ac-un__avail .ac-urgency-badge {
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
  box-shadow: none; margin-bottom: 0;
  text-transform: none; letter-spacing: 0; font-size: 11.5px; padding: 4px 10px;
}
.ac-wrap.ac-look--unified .ac-un__avail .ac-urgency-badge__dot { background: currentColor; animation: none; opacity: 1; }

.ac-style--dark.ac-look--unified .ac-un__band { color: #dbe6f4; }
.ac-style--dark.ac-look--unified .ac-un__dim { background: rgba(255,255,255,.08); color: #dbe6f4; }
.ac-style--dark.ac-look--unified .ac-un__feats li { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #c7d6ea; }

@media (max-width: 600px) {
  .ac-wrap.ac-look--unified .ac-un__foot { flex-direction: column; align-items: stretch; }
  .ac-wrap.ac-look--unified .ac-un__actions { width: 100%; }
  .ac-wrap.ac-look--unified .ac-un__actions .ac-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .ac-wrap.ac-look--unified .ac-un__name { font-size: 20px; }
}

/* ── The journey spine ────────────────────────────────────────

   Four questions, and which of them is answered. No answer text: the branch is
   already named by the active site tab and the size by the band tab and the
   "Storing" chip, so repeating them here would make three controls on one
   screen say the same two things.

   The connecting line is drawn on the item, not under the row, so it stops at
   the last step instead of running off the end of it. ::after on every step
   but the last, which is what :not(:last-child) is doing here rather than a
   border on a wrapper that would have to know how many steps there are.

   Colour never carries the state on its own: a done step also shows a tick and
   a current step also carries aria-current and a screen-reader word. That is
   the same rule the availability chips follow, and for the same reason. */
.ac-wrap .ac-spine {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.3;
}
.ac-wrap .ac-spine__step {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b7a90;
  white-space: nowrap;
}
.ac-wrap .ac-spine__step:not(:last-child)::after {
  content: "";
  flex: 1 1 12px;
  min-width: 12px;
  height: 1px;
  margin: 0 12px;
  background: #d8e0ea;
}
.ac-wrap .ac-spine__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  border: 1px solid #d8e0ea;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: #6b7a90;
}
.ac-wrap .ac-spine__step--done { color: #1f2d3d; }
.ac-wrap .ac-spine__step--done .ac-spine__mark {
  background: #1f7a4d;
  border-color: #1f7a4d;
  color: #fff;
}
.ac-wrap .ac-spine__step--current { color: #1f2d3d; font-weight: 600; }
.ac-wrap .ac-spine__step--current .ac-spine__mark {
  background: var(--ac-accent, #1f2d3d);
  border-color: var(--ac-accent, #1f2d3d);
  color: #fff;
}

.ac-style--dark .ac-spine__step { color: #8fa3bd; }
.ac-style--dark .ac-spine__step:not(:last-child)::after { background: rgba(255,255,255,.16); }
.ac-style--dark .ac-spine__mark { background: transparent; border-color: rgba(255,255,255,.2); color: #8fa3bd; }
.ac-style--dark .ac-spine__step--done,
.ac-style--dark .ac-spine__step--current { color: #f2f6fb; }

/* On the finder the strip sits under the branches it belongs to, so it is
   separated from them rather than from whatever follows the finder. */
.ac-wrap .ac-find__spine { margin: 14px 0 0; }
.ac-wrap .ac-find__spine .ac-spine { margin-bottom: 0; }

/* On a phone the four labels do not fit on one line. Measured on /dev at 375px:
   the four words need 407px of a 355px track, and shrinking the type does not
   rescue it either, because even at 10px, which is past readable for a label,
   the row still wants 357px. So one row is not available at any usable size and
   the only question is what to give up.

   It used to be the words: every step but the current one kept its mark and lost
   its label, and the strip read "1 Location 2 3 4". That tells a visitor how many
   questions are left but not what any of them is, which is the half that actually
   answers "how much more of this is there". Two rows of two give every step its
   word back at the full 14px, with no overflow and nothing clipped, measured at
   375px and again at 320px, the narrowest phone worth carrying. It costs 36px of
   height, which is the right trade for four named steps over three bare numbers.

   Reading order survives the wrap because the rows are read the way the row was:
   left to right, then down. An odd number of steps leaves the last row half
   full, which is a ragged edge and not a broken one.

   The connector is dropped on every second step because at the end of a row it
   points at nothing: the step it used to join is now underneath it, so the line
   ran to the right edge of the strip and stopped. Lead mode is left alone
   entirely: it is folded into the booking form's own panel stepper, whose row it
   has to match, so it must not start wrapping on its own. */
@media (max-width: 560px) {
  .ac-wrap .ac-spine:not(.ac-spine--lead) {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .ac-wrap .ac-spine:not(.ac-spine--lead) .ac-spine__step {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .ac-wrap .ac-spine:not(.ac-spine--lead) .ac-spine__step:nth-child(2n)::after { display: none; }
  .ac-wrap .ac-spine--lead {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .ac-wrap .ac-spine--lead::-webkit-scrollbar { display: none; }
  .ac-wrap .ac-spine__step:not(:last-child)::after { margin: 0 8px; flex-basis: 8px; min-width: 8px; }
  .ac-wrap .ac-spine__mark { width: 26px; height: 26px; flex-basis: 26px; }
}


/* ── One filter bar ──────────────────────────────────────────────────────── */
/* Seven stacked bands used to sit between the heading and the first card, four
   of them tab-like and each with its own idea of what "selected" looks like. A
   visitor reading down them met four competing questions and no answer about
   which one was the main filter. Everything that narrows the grid now sits on
   one line in one grammar; the rows it replaces stay in the markup, hidden,
   because they hold the state the filter engine reads.

   Every declaration below that touches an element this file already styles
   carries !important, and the selectors start at .ac-wrap. That is not
   defensive habit: the blocks above set .ac-wrap .ac-size-tab, .ac-wrap
   .ac-axis and .ac-wrap .ac-avail-btns with !important on every property, to
   survive an Elementor global kit, so a plain rule appended after them loses
   whatever its specificity. The first version of this bar was written without
   it and shipped visibly wrong: on the live storefront .ac-axis and
   .ac-avail-btns stayed on the bar at their old size, and the size chips kept
   their 20px underline styling, because .ac-wrap .ac-size-tab { background:
   transparent !important } outranked .ac-controls .ac-size-tab. Only
   .ac-site-tabs-wrap, which has no !important rule, actually hid. Marking
   these important puts them level with the rules they supersede, and being
   later in the file settles the tie. */
.ac-wrap .ac-controls {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important;
  gap: 8px 10px !important;
  padding: 10px 12px !important; margin: 0 0 20px !important;
  background: var(--ac-surface-2, #f7f7f5) !important;
  border: 1px solid var(--ac-border) !important; border-radius: var(--ac-card-radius, 12px) !important;
}
/* Superseded rows. Hidden, never removed: .ac-site-tab carries the selected
   location, the live per-branch counts and the long screen-reader labels, and
   .ac-avail-btn is what the filter chips and the reset button click to clear
   themselves. Taking them out would mean teaching forty call sites a new shape
   to change how one row looks. */
.ac-wrap .ac-controls .ac-axis,
.ac-wrap .ac-controls .ac-site-tabs-wrap,
.ac-wrap .ac-controls .ac-avail-btns { display: none !important; }

/* Location: a select, because ten branches overflowed the row that used to
   hold them. */
.ac-wrap .ac-locsel { display: inline-flex !important; align-items: center !important; gap: 8px !important; order: 1 !important; margin: 0 !important; }
.ac-wrap .ac-locsel__label { font-size: 12px !important; font-weight: 600 !important; color: var(--ac-text-muted) !important; margin: 0 !important; }
.ac-wrap .ac-locsel__box {
  position: relative !important; display: inline-flex !important; align-items: center !important; gap: 7px !important;
  padding: 0 34px 0 11px !important; min-height: 40px !important;
  background: var(--ac-surface, #fff) !important; border: 1px solid var(--ac-border) !important;
  border-radius: var(--ac-btn-radius) !important; box-shadow: none !important;
}
.ac-wrap .ac-locsel__box:focus-within { border-color: var(--ac-btn-bg) !important; box-shadow: 0 0 0 2px var(--ac-btn-bg) !important; }
.ac-wrap .ac-locsel__box > .ac-site-tab__icon { flex: 0 0 auto !important; color: var(--ac-text-muted) !important; }
/* The select sits transparent inside the box, so the control keeps one look
   across browsers while the real element stays the thing that is focused,
   typed into and read out. A theme's own select styling is the reason every
   one of these is important. */
.ac-wrap .ac-locsel__sel {
  appearance: none !important; -webkit-appearance: none !important;
  background: transparent !important; background-image: none !important;
  border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important;
  height: auto !important; min-height: 38px !important; width: auto !important; max-width: 15em !important;
  font-family: var(--ac-font, inherit) !important; font-size: 14px !important; font-weight: 600 !important;
  line-height: 1.3 !important; text-transform: none !important; letter-spacing: normal !important;
  color: var(--ac-text) !important; box-shadow: none !important; cursor: pointer !important;
}
.ac-wrap .ac-locsel__sel:focus { outline: none !important; box-shadow: none !important; }
.ac-wrap .ac-locsel__chev { position: absolute !important; right: 11px !important; pointer-events: none !important; color: var(--ac-text-muted) !important; }

/* The chosen-location bar, once a branch has been picked. It is a control on
   the bar, not a panel header, and it takes the slot .ac-locsel vacates in
   this mode: acAxisSync() hides the select and shows this in its place, so
   without an explicit order it fell to the flex default of 0 and jumped ahead
   of every sibling, every one of which is ordered 1 to 6.

   Measured on /dev at 1280px before this rule: the bar sat at x=33 with
   border-bottom 0 and border-radius 12px 12px 0 0, the band row beside it at
   x=342.6 with no border at all, square top corners, rounded bottom ones and a
   #f8fafc fill. Two complementary half-boxes, 9px apart, neither completing
   the other. The bar was 56.8px tall against its row-mates' 40px, so it set
   the row height and the whole bar measured 78.8px instead of 60px.

   The "one filter over one population" the old panel was drawn to say is now
   said by the bar itself: these controls are visibly in one box already. */
.ac-wrap .ac-controls .ac-locbar:not([hidden]) {
  order: 1 !important;
  flex: 0 1 auto !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 6px 0 12px !important;
  border: 1px solid var(--ac-border) !important;
  border-radius: var(--ac-btn-radius) !important;
  background: var(--ac-surface, #fff) !important;
}
.ac-wrap .ac-controls .ac-locbar__name { font-size: 14px !important; font-weight: 600 !important; color: var(--ac-text) !important; white-space: nowrap !important; }
/* Sized to sit inside the 40px track rather than set it. */
.ac-wrap .ac-controls .ac-locbar__back {
  min-height: 0 !important; height: 28px !important;
  padding: 0 11px !important; font-size: 12.5px !important; line-height: 1 !important;
  white-space: nowrap !important;
}

/* Size: chips, at the same weight as everything else on the bar. They used to
   be the loudest thing on the page at 20px, while being a secondary filter
   under the location row they depend on. */
.ac-wrap .ac-controls .ac-size-tabs-wrap,
.ac-wrap .ac-controls .ac-band-tabs-wrap { order: 2 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: visible !important; }
.ac-wrap .ac-controls .ac-size-tabs,
.ac-wrap .ac-controls .ac-band-tabs {
  display: flex !important; flex-wrap: wrap !important; gap: 6px !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; justify-content: flex-start !important;
}
.ac-wrap .ac-controls .ac-size-tab,
.ac-wrap .ac-controls .ac-band-tab {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  min-height: 40px !important; height: auto !important; padding: 0 14px !important; margin: 0 !important;
  font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important;
  color: var(--ac-text-muted) !important;
  background: var(--ac-surface, #fff) !important; background-image: none !important;
  border: 1px solid var(--ac-border) !important;
  border-radius: 999px !important; cursor: pointer !important;
  transition: var(--ac-transition) !important;
}
.ac-wrap .ac-controls .ac-size-tab:hover,
.ac-wrap .ac-controls .ac-band-tab:hover { color: var(--ac-text) !important; background: var(--ac-surface, #fff) !important; border-color: var(--ac-text-muted) !important; }
.ac-wrap .ac-controls .ac-size-tab--active,
.ac-wrap .ac-controls .ac-size-tab--active:hover,
.ac-wrap .ac-controls .ac-band-tab--active,
.ac-wrap .ac-controls .ac-band-tab--active:hover {
  color: var(--ac-btn-text) !important; background: var(--ac-btn-bg) !important; border-color: var(--ac-btn-bg) !important;
}
.ac-wrap .ac-controls .ac-size-tab--empty,
.ac-wrap .ac-controls .ac-band-tab--empty { opacity: 0.55 !important; }
.ac-wrap .ac-controls .ac-size-tab__label,
.ac-wrap .ac-controls .ac-band-tab__label { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; }
.ac-wrap .ac-controls .ac-size-tab__count,
.ac-wrap .ac-controls .ac-band-tab__count { font-size: 12px !important; font-weight: 700 !important; opacity: 0.75 !important; color: inherit !important; background: transparent !important; padding: 0 !important; }
/* The band hint is a sentence, and a sentence does not fit on a chip. It is
   still in the markup for the screen reader and for the wider layouts the
   bands are also used in. */
.ac-wrap .ac-controls .ac-band-tab__hint { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }

/* Sold out: one checkbox, because it asks one yes-or-no question. */
.ac-wrap .ac-availchk { display: inline-flex !important; align-items: center !important; gap: 7px !important; order: 3 !important; cursor: pointer !important; min-height: 40px !important; margin: 0 !important; }
.ac-wrap .ac-availchk__box { width: 16px !important; height: 16px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; accent-color: var(--ac-btn-bg) !important; cursor: pointer !important; appearance: auto !important; -webkit-appearance: checkbox !important; }
.ac-wrap .ac-availchk__text { font-size: 14px !important; font-weight: 600 !important; color: var(--ac-text-muted) !important; }
.ac-wrap .ac-availchk:hover .ac-availchk__text { color: var(--ac-text) !important; }

/* The unit switch moves onto the bar and pushes to its far end. */
.ac-wrap .ac-controls .ac-unitsw { order: 4 !important; margin: 0 0 0 auto !important; }
/* Two classes, not one. A single class loses to .elementor-kit-NN button,
   which is a global accent fill on most of the sites this plugin runs on, and
   that rule painted the unselected half the same solid colour as the selected
   one: the control rendered as two live buttons rather than a choice. */
.ac-wrap .ac-unitsw__btns .ac-unitsw__btn { background: transparent !important; color: var(--ac-text-muted) !important; }
.ac-wrap .ac-unitsw__btns .ac-unitsw__btn--active { background: var(--ac-btn-bg) !important; color: var(--ac-btn-text) !important; }
/* Kill the theme's button border. The switcher's own `border: 0` is a class at
   0,1,0 and the theme's rule reaches this element through the `[type="button"]`
   branch of `[type=button],[type=submit],button`, which is an attribute selector
   at 0,1,0 too: a dead tie, broken by document order, and the theme bundle loads
   after the plugin sheet. Measured on /dev: 1px solid rgb(204,51,102), a crimson
   that reads as an error state next to the grey wrapper. The `button` branch of
   that group is 0,0,1 and loses, so two classes are enough here. The divider is
   restated because `border: 0` would otherwise take it with it. */
.ac-wrap .ac-unitsw__btns .ac-unitsw__btn { border: 0 !important; }
.ac-wrap .ac-unitsw__btns .ac-unitsw__btn + .ac-unitsw__btn { border-left: 1px solid var(--ac-border) !important; }
/* And the theme's capitalisation with it. The two labels are units, not words:
   `sq ft` is lower case because that is how the unit is written, and `m2` has a
   superscript two that `capitalize` leaves alone while upper-casing the m. The
   theme sets `text-transform: capitalize` on buttons, so the control rendered
   "Sq Ft" and "M2", a spelling that appears nowhere else on the page and sits
   next to card figures writing the same units correctly. Restated here rather
   than on the base class, because the base class is what the theme already
   outranks. */
.ac-wrap .ac-unitsw__btns .ac-unitsw__btn { text-transform: none !important; }
/* Compact on the bar. The standalone switcher is a 58px-tall pair under a
   "Show sizes in" caption, which is right for a section heading and wrong for a
   control sharing one 40px track with three others: at 1024px the caption plus
   the tall pair measured 286px, the four controls came to 997px in a 994px
   track, and the switcher wrapped to a line of its own. The caption goes to
   the screen reader rather than being deleted, because the two labels only read
   as a unit choice once you know they are one. */
.ac-wrap .ac-controls .ac-unitsw__label {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  white-space: nowrap !important; margin: 0 !important; padding: 0 !important;
}
.ac-wrap .ac-controls .ac-unitsw__btns { height: auto !important; min-height: 0 !important; padding: 2px !important; }
.ac-wrap .ac-controls .ac-unitsw__btn {
  min-height: 0 !important; height: 32px !important; width: auto !important; min-width: 0 !important;
  padding: 0 12px !important; font-size: 13px !important; line-height: 1 !important;
}

/* The two full-width rows under the bar. No display here on purpose: the
   location cards carry the hidden attribute, and a class rule that set display
   would beat it and show them permanently. */
.ac-wrap .ac-controls .ac-tabs-note { order: 5 !important; flex: 1 0 100% !important; margin: 2px 0 0 !important; font-size: 13px !important; }
.ac-wrap .ac-controls .ac-locpick { order: 6 !important; flex: 1 0 100% !important; margin: 6px 0 0 !important; }

@media (max-width: 782px) {
  /* Each control takes its own line rather than wrapping mid-group, and the
     size chips scroll sideways instead of stacking three rows deep. */
  .ac-wrap .ac-controls { gap: 10px !important; padding: 12px !important; }
  .ac-wrap .ac-locsel { order: 1 !important; flex: 1 0 100% !important; }
  /* Same full-width line the select it replaces gets, with the branch name and
     the way back at opposite ends. The back button keeps the 44px tap floor
     from the phone block above, so the line grows to fit it. */
  .ac-wrap .ac-controls .ac-locbar:not([hidden]) { order: 1 !important; flex: 1 0 100% !important; justify-content: space-between !important; padding: 4px 6px 4px 12px !important; }
  /* `flex: 1 0 100%` sets the basis to the line's width but does not hold the
     bar to it: a flex item's min-width defaults to `auto`, so a nowrap row of
     the branch name plus a 44px button pushes the box past its own line. At
     320px that measured 284.4px of box on a 240px line, putting the bar's
     right border 4.4px off the side of the screen. Allowing the row to wrap
     drops the button to a second line only on the widths where the two cannot
     sit together, so 375px keeps them side by side and nothing is clipped. */
  .ac-wrap .ac-controls .ac-locbar:not([hidden]) { min-width: 0 !important; flex-wrap: wrap !important; }
  .ac-wrap .ac-controls .ac-locbar__name { min-width: 0 !important; overflow-wrap: anywhere !important; }
  .ac-wrap .ac-controls .ac-locbar__back { height: auto !important; min-height: 44px !important; }
  .ac-wrap .ac-locsel__box { flex: 1 1 auto !important; }
  .ac-wrap .ac-locsel__sel { max-width: none !important; width: 100% !important; }
  /* `min-width: 0` is what makes the sideways scroll below actually happen.
     A flex item's min-width defaults to `auto`, meaning it will not go below
     its own min-content, and this row's min-content is the four chips laid out
     nowrap. So the wrapper ignored its 100% basis and inflated to the chips:
     measured on /dev at 375px it sat at 364px inside a 331px content box, and
     at 320px it stayed 364px. The strip inside it then filled that inflated
     box, so its content never exceeded it, its scrollWidth equalled its
     clientWidth, and `overflow-x: auto` had nothing to scroll. The chips simply
     hung out of the bar and were clipped further up: "Large 8" was cut at
     375px and sat 67px off-screen at 320px, unreachable, with the page itself
     reporting no overflow. A filter the visitor cannot see or scroll to is a
     filter they do not have.

     Declared on the wrapper because that is the flex item, and on the strip as
     well because the strip is the scroll container and must be free to be
     narrower than the chips it holds. With both at 0 the boxes hold the bar's
     width and the overflow lands inside the scroller, where it belongs. */
  .ac-wrap .ac-controls .ac-size-tabs-wrap,
  .ac-wrap .ac-controls .ac-band-tabs-wrap { flex: 1 0 100% !important; min-width: 0 !important; }
  .ac-wrap .ac-controls .ac-size-tabs,
  .ac-wrap .ac-controls .ac-band-tabs { flex-wrap: nowrap !important; min-width: 0 !important; overflow-x: auto !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; }
  .ac-wrap .ac-controls .ac-size-tabs::-webkit-scrollbar,
  .ac-wrap .ac-controls .ac-band-tabs::-webkit-scrollbar { display: none !important; }
  .ac-wrap .ac-controls .ac-size-tab,
  .ac-wrap .ac-controls .ac-band-tab { flex: 0 0 auto !important; }
  .ac-wrap .ac-availchk { order: 3 !important; }
  .ac-wrap .ac-controls .ac-unitsw { order: 4 !important; margin: 0 0 0 auto !important; }
  /* 44px on a touch screen. The compact sizes above are for a mouse sharing one
     desktop track; measured at 375px they came out 32px for the unit pair and
     38px for the select, under the target size used everywhere else in this
     plugin. The chips and the checkbox already clear it at 40px, so they are
     raised here too rather than leaving four different heights on one bar. */
  .ac-wrap .ac-controls .ac-unitsw__btn { height: 44px !important; padding: 0 16px !important; font-size: 14px !important; }
  .ac-wrap .ac-locsel__sel { min-height: 44px !important; height: 44px !important; }
  .ac-wrap .ac-controls .ac-size-tab,
  .ac-wrap .ac-controls .ac-band-tab { min-height: 44px !important; }
  .ac-wrap .ac-availchk { min-height: 44px !important; }
}

/* ── Last rule in the file. Keep it that way. ───────────────────────────────
   The block below was written to be last and says so in its own reasoning, and
   then 190 lines of filter-bar CSS were appended under it in a later release.
   Nothing broke, by luck rather than design: the deepest of those selectors is
   `.ac-wrap .ac-controls .ac-band-tabs` at 0,3,0, which TIES with the guard and
   would have won on source order, but the elements the JS actually hides all
   missed it - `.ac-locsel` is 0,2,0, `.ac-site-tabs-wrap` sets display:none
   anyway, and `.ac-tabs-note` and `.ac-size-tabs-wrap` set no display at all.
   The next 0,3,0 display rule appended here would not miss, and the failure is
   silent: the attribute lands, nothing happens, no error, nothing at the call
   site. So the guard goes back to the end, and anything new belongs ABOVE this
   banner. */
/* The [hidden] attribute's UA rule is display:none at specificity 0,1,0, so
   ANY author rule that sets display on a class beats it. The JS then sets
   hidden, the attribute lands, and nothing happens: no error, no warning,
   nothing at the call site. That is how a size-guide card came to show
   "Available at 1 of 3 locations" directly above "Not available at Molesey".

   Two things about this rule are deliberate, because the first attempt at it
   got both wrong and shipped a fix that did nothing:

   1. The attribute is doubled. `.ac-wrap [hidden]` is 0,2,0, which only TIES
      with `.ac-wrap .ac-sgc__availsum { display: flex !important }` further up
      this file, and a tie is settled by source order. `[hidden][hidden]` is
      0,3,0, so it wins outright and cannot be undone by a rule added later.
   2. It is last in the file, so order agrees with specificity rather than
      fighting it.

   Verifying this by injecting a stylesheet into a live page proves nothing:
   an injected <style> lands last in the cascade and therefore wins from a
   position the real rule does not have. Test it from the first child of
   <head>, where only specificity can save it. There is no hidden="until-found"
   anywhere in the plugin, which display:none would otherwise break. */
.ac-wrap [hidden][hidden] { display: none !important; }