/*
 * 55-integrations.css — third-party and legacy surfaces, adapted to the design system.
 *
 * These elements are injected at runtime by mu-plugins and plugins, so they never
 * appear in the page's block content and cannot be restyled by editing a page:
 *
 *   .eg-nl-footer / .eg-nl-*   wp-content/mu-plugins/eg-marketing.php   (wp_footer, 20)
 *   #eg-pop / .eg-pop-*        wp-content/mu-plugins/eg-exit-popup.php
 *   #wpsr-chat-widget-*        WP Social Ninja (Messenger bubble)
 *   #wc-sticky-cart-panel      WooCommerce sticky cart
 *   .generate-back-to-top      GeneratePress
 *   .slideout-overlay          GP Premium Menu Plus
 *
 * None of them ship their own CSS — their appearance came from the previous design's
 * ~38 KB custom-CSS post, which was deliberately not carried onto the new theme (see
 * docs/SETUP.md §3). Without these rules they render as unstyled forms with rounded
 * red buttons, which is what was visible below the footer after launch.
 *
 * Loads AFTER 50-responsive.css so it can win against third-party defaults, and
 * therefore carries its own media queries.
 */

/* ==========================================================================
   Newsletter — footer band and exit popup (eg-marketing / eg-exit-popup)
   ========================================================================== */

.eg-nl-footer{
  border-top:1px solid var(--color-divider);
  background:var(--color-surface);
  padding:var(--space-6) var(--space-4);
}

.eg-nl{
  max-width:var(--container);
  margin-inline:auto;
  display:grid;
  gap:var(--space-3);
}
.eg-nl h3{
  font-family:var(--font-heading);
  font-size:var(--type-h2-section);
  font-weight:600;
  margin:0;
}
.eg-nl p{ margin:0; font-size:14px; color:var(--color-muted); max-width:56ch; }

/* One row on desktop: email, consent, button. Stacks below 767 (see foot of file). */
.eg-nl-form{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-3);
}
.eg-nl-email{
  font:inherit;
  font-size:14px;
  padding:9px 11px;
  border:1px solid var(--color-divider);
  background:var(--color-bg);
  color:var(--color-text);
  min-width:min(300px,100%);
  flex:1 1 260px;
}
.eg-nl-consent{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  color:var(--color-muted);
  flex:1 1 auto;
}
.eg-nl-ck{ accent-color:var(--color-accent-700); }

/* §3.1 primary button, restated for markup we do not control. Colour is declared in
   every state — the same rule that fixed the prototype's dark-on-dark hover. */
.eg-nl-form button,
.eg-pop-form button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  padding:10px 18px;
  cursor:pointer;
  border:1px solid var(--color-accent-600);
  background:var(--color-accent-600);
  color:#fff;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.eg-nl-form button:hover,
.eg-pop-form button:hover{
  background:var(--color-accent-800);
  color:#fff;
  border-color:var(--color-accent-800);
}

.eg-nl-msg{ font-size:13px; flex-basis:100%; }
.eg-nl-msg.ok{ color:var(--color-accent-800); }
.eg-nl-msg.err{ color:var(--color-text); }

/* ---- Exit popup: a blueprint dialog on the page background (§3.4) ---- */

.eg-pop{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-4);
  background:var(--color-scrim);
}
.eg-pop[hidden]{ display:none; }

.eg-pop-card{
  position:relative;
  width:min(520px,100%);
  background:var(--color-bg);
  border:1px solid var(--color-divider);
  padding:34px;
  display:grid;
  gap:var(--space-3);
  max-height:86vh;
  overflow-y:auto;
}
.eg-pop-card h3{
  font-family:var(--font-heading);
  font-size:26px;
  font-weight:600;
  margin:0;
}
.eg-pop-card p{ margin:0; font-size:14px; color:var(--color-muted); }
.eg-pop-form{ display:grid; gap:var(--space-3); }
.eg-pop-email{
  font:inherit;
  font-size:14px;
  padding:9px 11px;
  border:1px solid var(--color-divider);
  background:var(--color-bg);
  color:var(--color-text);
  width:100%;
}
.eg-pop-consent{
  display:flex;
  align-items:flex-start;
  gap:7px;
  font-size:12px;
  color:var(--color-muted);
}
.eg-pop-ck{ accent-color:var(--color-accent-700); margin-top:2px; }
.eg-pop-msg{ font-size:13px; }

/* Square ✕, positioned inside the card's padding. */
.eg-pop-x{
  position:absolute;
  top:6px;
  right:6px;
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  line-height:1;
  border:0;
  background:transparent;
  color:var(--color-accent-800);
  cursor:pointer;
}
.eg-pop-x:hover{ background:var(--color-accent-100); color:var(--color-accent-900); }

/* ==========================================================================
   Floating widgets — keep them clear of the mobile tab bar
   ========================================================================== */

/*
 * §4.3 pins a 48px tab bar to the bottom on mobile. Anything else that pins itself
 * to the bottom lands on top of it: the Messenger bubble covered the Trip tab, and
 * Woo's sticky cart covered the whole bar. Lift both above it.
 */
@media (max-width:767px){
  #wpsr-chat-widget-2412,
  [id^="wpsr-chat-widget"]{
    bottom:calc(56px + env(safe-area-inset-bottom,0px)) !important;
  }
  #wc-sticky-cart-panel{
    bottom:calc(48px + env(safe-area-inset-bottom,0px)) !important;
  }
  /* The back-to-top's phone offset is NOT here — it has to be declared after the
     desktop rule to win the cascade. See below. */
}

/* GP's back-to-top: square, hairline, on-palette — and on the LEFT.
 *
 * It used to sit bottom-right, the same corner the Messenger bubble wants, so the two
 * stacked into a column and the bubble had to be lifted 110px to clear it. Two floating
 * controls in one corner is one too many: giving each its own side lets the bubble sit
 * where a chat bubble belongs and removes that offset entirely.
 *
 * `body` prefix and !important because GeneratePress prints its own back-to-top colours as
 * dynamic CSS AFTER this file — the previous single-class rule lost, and the button was
 * rendering as GP's default rgba(0,0,0,.4) rather than the on-palette tile intended here.
 */
body .generate-back-to-top{
  /* 44px, this design system's target floor. GeneratePress ships 40x42, which is
     under it — and this tile is now one of a stacked pair, where an undersized
     target is easiest to miss. */
  min-width:44px;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:0;
  background:var(--color-bg) !important;
  color:var(--color-accent-800) !important;
  border:1px solid var(--color-divider);
  right:auto !important;
  left:24px !important;
  /* Same 24px from the bottom as the Messenger bubble opposite, so the two read as
     one baseline across the foot of the window rather than two arbitrary offsets. */
  bottom:24px !important;
}
body .generate-back-to-top:hover,
body .generate-back-to-top:focus{
  background:var(--color-accent-100) !important;
  color:var(--color-accent-900) !important;
}

/*
 * The phone offset, deliberately placed AFTER the rule above rather than with the other
 * tab-bar offsets at the top of this section. Both are `body .generate-back-to-top` with
 * !important, so specificity ties and the CASCADE decides — declared earlier it lost to
 * the 24px desktop value and the button sat on top of the tab bar (measured at 390px).
 *
 * 49px bar + 31px, landing on the same 80px baseline the Messenger bubble uses on phones
 * (inc/chrome.php sets that inline, because the plugin positions itself from its own JS).
 */
@media (max-width:767px){
  body .generate-back-to-top{
    bottom:calc(80px + env(safe-area-inset-bottom,0px)) !important;
  }
}

/* ==========================================================================
   The bottom corners — one map for three floating controls (2026-09-08)

   Four things want the foot of the window, and until now three of them wanted
   the same corner:

     bottom LEFT    .generate-back-to-top   GeneratePress, appears when scrolled
                    .ocs-ccfab              cookie settings, mu-plugins/ocs-compliance.php
     bottom RIGHT   .wpsr-fm-chat-wrapper   Messenger (positioned from inc/chrome.php)
     full width     .eng-tabbar             primary navigation on phones — §4.3

   The cookie button is fixed at left:1.25rem bottom:1.25rem with z-index 99998,
   which put it exactly on top of the back-to-top tile (left 24, bottom 24,
   z-index 10) and won. The back-to-top was unclickable on every page, on every
   scroll, for anyone who had accepted cookies. On phones the consent sheet drops
   to bottom:0 and covered the tab bar outright.

   THE ORDER IS BY HOW OFTEN A CONTROL IS USED. Back-to-top keeps the corner: it
   is wanted repeatedly while reading. Cookie settings stacks above it — a
   compliance re-entry point most visitors touch once or never, so it takes the
   slot further from the thumb while staying visible and reachable. Nothing is
   hidden and nothing is moved off-screen; consent stays one tap away, which is
   the point of a persistent control.

   ocs-compliance.php is NOT edited. It prints its own CSS, so these rules carry
   !important for the same reason every other third-party override in this file
   does.
   ========================================================================== */

/* TWO STATES, because back-to-top is intermittent and the corner is not.
   GeneratePress toggles .generate-back-to-top__show as you scroll, and it sits
   before the cookie button in the body's children — so the sibling combinator
   reads that state and no JavaScript is needed.

   RESTING (page unscrolled, no back-to-top): the cookie button takes the corner
   on the same baseline as the Messenger bubble opposite. Two controls, one line
   across the foot of the window.

   DOCKED (back-to-top showing): it steps up out of the corner AND slides to the
   edge, leaving a 24px sliver — the minimised-tab idiom, and the reason it is a
   slide rather than a fade is that a compliance control may never simply vanish.
   24px is deliberate, not arbitrary: it is WCAG 2.2's minimum target size
   (2.5.8), so the docked sliver stays clickable on its own. Hover or keyboard
   focus brings the whole button back. */
body .ocs-ccfab{
  left:24px !important;
  bottom:24px !important;
}

body .generate-back-to-top__show ~ .ocs-ccfab{
  bottom:80px !important;
  transform:translateX(-24px);
}
/* :focus as well as :focus-visible, deliberately. The ring below is correctly
   limited to :focus-visible — a mouse user does not need it — but UNDOCKING is
   not decoration: if the browser withholds :focus-visible for any reason, a
   keyboard user is left operating a button that is half off-screen. Restoring on
   plain :focus costs a mouse user nothing, since clicking it opens the panel. */
body .generate-back-to-top__show ~ .ocs-ccfab:hover,
body .generate-back-to-top__show ~ .ocs-ccfab:focus,
body .generate-back-to-top__show ~ .ocs-ccfab:focus-visible{
  transform:translateX(0);
}

@media (max-width:767px){
  /* The tab bar is 49px. The consent sheet sat on top of it, so a first-time
     visitor could not navigate until they dismissed it — the sheet is lifted to
     rest ON the bar rather than over it. */
  body .ocs-cc{
    bottom:calc(49px + env(safe-area-inset-bottom,0px)) !important;
  }
  /* Resting: the phone baseline the Messenger bubble also uses. */
  body .ocs-ccfab{
    bottom:calc(80px + env(safe-area-inset-bottom,0px)) !important;
  }
  /* Docked: above the back-to-top, clear of the tab bar. */
  body .generate-back-to-top__show ~ .ocs-ccfab{
    bottom:calc(136px + env(safe-area-inset-bottom,0px)) !important;
  }
}

/* Both floating controls are keyboard-reachable and neither showed a focus ring:
   an icon-only button you cannot see focus on is a button a keyboard user loses. */
body .generate-back-to-top:focus-visible,
body .ocs-ccfab:focus-visible{
  outline:2px solid var(--color-accent-700);
  outline-offset:2px;
}

/* Woo's sticky cart panel is a commerce surface — same treatment as §4.3's strip. */
#wc-sticky-cart-panel{
  background:var(--color-bg);
  border-top:1px solid var(--color-text);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:767px){
  .eg-nl-footer{ padding:var(--space-6) var(--space-4); }
  .eg-nl-form{ display:grid; gap:var(--space-3); }
  .eg-nl-email{ min-width:0; width:100%; }
  .eg-nl-form button{ width:100%; min-height:44px; }
  .eg-pop-card{ padding:var(--space-4); }
  .eg-pop-form button{ min-height:44px; }
}

/* ==========================================================================
   Undo the fullscreen mu-plugin on pages that should keep their chrome.

   eg-dashboard-fullscreen.php prints unscoped `!important` rules hiding the header,
   footer and newsletter on its "fullscreen" pages. /become-a-provider/ is on that
   list but should not be — it is the public §6.8 pitch page, framed by the normal
   site chrome in the prototype.

   `body.eng-force-chrome .site-footer` is specificity 0-2-1 against the mu-plugin's
   0-1-0, so it wins even though both carry !important. The body class comes from
   eng_force_chrome_body_class() in inc/chrome.php, which also records the cleaner
   fix (editing the mu-plugin's page list) for whoever has filesystem access.
   ========================================================================== */

body.eng-force-chrome .site-footer,
body.eng-force-chrome .eg-nl-footer,
body.eng-force-chrome .eng-footer,
body.eng-force-chrome .generate-back-to-top{
  display:block !important;
}
body.eng-force-chrome .eng-tabbar{ display:grid !important; }

@media (min-width:768px){
  body.eng-force-chrome .eng-tabbar{ display:none !important; }
}

/* The mu-plugin also repaints the page grey and strips container padding. */
body.eng-force-chrome{ background:var(--color-bg) !important; }
body.eng-force-chrome .site-content,
body.eng-force-chrome #content{ padding-top:revert !important; padding-bottom:revert !important; }

/* ==========================================================================
   §6.9 Booking card — the site's own booking widget, restyled.

   Booking is NOT a third-party plugin here: it is a custom OCS system in
   wp-content/mu-plugins/eg-booking-frontend.php. It renders a month calendar, time
   slots, a guest counter and named-guest rows, and posts eg_book_date / eg_book_slot /
   eg_bf_gcount / eg_g[n][name]. Its validation refuses add-to-cart without them.

   We restyle it rather than replace it — the availability model, capacity checks and
   vendor wiring all live behind those field names.
   ========================================================================== */

.eg-bf{
  position:relative;
  border:1px solid var(--color-divider);
  background:transparent;
  padding:var(--space-4);
  display:grid;
  gap:var(--space-3);
}
.eg-bf-ttl{
  font-family:var(--font-heading);
  font-size:var(--type-h3-card);
  font-weight:600;
}
.eg-bf-none{ font-size:14px; color:var(--color-muted); margin:0; }
.eg-bf-hint{ font-size:12px; color:var(--color-muted); margin:0; }

/* Calendar */
.eg-bf-cal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  margin-bottom:var(--space-2);
}
.eg-bf-month{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:15px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.eg-bf-prev,
.eg-bf-next{
  width:34px;
  height:34px;
  border:1px solid var(--color-divider);
  background:transparent;
  color:var(--color-accent-800);
  cursor:pointer;
  font:inherit;
  line-height:1;
}
.eg-bf-prev:hover,
.eg-bf-next:hover{ background:var(--color-accent-100); color:var(--color-accent-900); }

.eg-bf-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:2px;
}
/*
 * Calendar cells are DIVs with state classes, not buttons:
 *   .eg-bf-cell.empty  leading blanks before the 1st
 *   .eg-bf-cell.off    date exists but has no slots
 *   .eg-bf-cell.avail  bookable
 *
 * Selectors verified against the live DOM. An earlier guess at a button element
 * styled nothing at all — the widget renders plain divs.
 */
.eg-bf-dow{
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--color-muted);
  text-align:center;
  padding:4px 0;
}
.eg-bf-cell{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  border:1px solid transparent;
}
.eg-bf-cell.off{ color:var(--color-muted); opacity:.45; }
.eg-bf-cell.avail{
  border-color:var(--color-divider);
  color:var(--color-text);
  cursor:pointer;
}
.eg-bf-cell.avail:hover{
  background:var(--color-accent-100);
  color:var(--color-accent-900);
  border-color:var(--color-accent-600);
}
/* The selected day is a filled object, matching the primary button (§12). */
.eg-bf-cell.avail.sel,
.eg-bf-cell.avail.is-selected,
.eg-bf-cell.avail.selected{
  background:var(--color-accent-600);
  color:#fff;
  border-color:var(--color-accent-600);
}

/* Time slots read as the segmented control from §3.4. */
.eg-bf-slots{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.eg-bf-slots button,
.eg-bf-slot{
  border:1px solid var(--color-divider);
  background:transparent;
  color:var(--color-accent-800);
  font:inherit;
  font-size:13px;
  padding:8px 12px;
  cursor:pointer;
  min-height:44px;
}
.eg-bf-slots button:hover,
.eg-bf-slot:hover{ background:var(--color-accent-100); color:var(--color-accent-900); }
.eg-bf-slots button.is-selected,
.eg-bf-slot.sel,
.eg-bf-slot.is-selected{
  background:var(--color-accent-600);
  color:#fff;
  border-color:var(--color-accent-600);
}

/* Guests */
.eg-bf-guests{ display:grid; gap:var(--space-2); }
.eg-bf-glabel{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-muted);
}
.eg-bf-gcount,
.eg-bf-glist input{
  font:inherit;
  font-size:14px;
  padding:9px 11px;
  border:1px solid var(--color-divider);
  background:var(--color-bg);
  color:var(--color-text);
  width:100%;
}
.eg-bf-glist{ display:grid; gap:var(--space-2); }

/* Total */
.eg-bf-total{
  border-top:1px solid var(--color-text);
  padding-top:var(--space-3);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--space-2);
}
.eg-bf-total-v{
  font-family:var(--font-heading);
  font-size:28px;
  font-weight:600;
}
.eg-bf-total-note{ font-size:12px; color:var(--color-muted); }

/*
 * §12: "ETDF: editorial posts only; never on booking/checkout surfaces."
 *
 * The booking widget prints its own ETDF line. The spec strips it from booking
 * surfaces deliberately (§6.3 notes it was "only stripped from booking surfaces"), so
 * it is hidden here and stays visible in editorial posts.
 *
 * ⚠ CONFIRM BEFORE LAUNCH: if the Environmental and Tourism Development Fee is a
 * required disclosure at point of sale, this rule must be removed and §12 revisited.
 * Hiding it is a design decision with a possible compliance dimension.
 */
.eg-bf-etdf{ display:none; }

/* Registration marks, so the booking card reads as a blueprint object (§3.2). */
.eg-bf::before,
.eg-bf::after{
  content:"";
  position:absolute;
  width:11px;
  height:11px;
  pointer-events:none;
  background:var(--registration-mark);
}
.eg-bf::before{ top:-6px; left:-6px; }
.eg-bf::after{ bottom:-6px; right:-6px; }

/*
 * Booking widget: the previous design left it on a near-white panel (#F7F9FA) with
 * #777 secondary text, which measured 4.24:1 — below WCAG AA and off-palette besides.
 * Bring both onto the design system's own background and muted tokens.
 */
.eg-bf,
.eg-bf-total,
.eg-bf-slots,
.eg-bf-guests{ background-color:var(--color-bg); }

.eg-bf-total-note,
.eg-bf-hint,
.eg-bf small{ color:var(--color-muted) !important; }

/*
 * The booking widget prints its own inline <style> in the body, with hardcoded
 * colours from the previous design:
 *
 *   .eg-bf-total      #003D4C   .eg-bf-total-v  #0E7C86
 *   .eg-bf-total-note #777      .eg-bf-etdf     #eef7ef / #cfe3d0 / #2f6d3a
 *
 * Because that block appears AFTER our linked stylesheet in document order, it wins at
 * equal specificity — hence !important here rather than a specificity contest we would
 * lose again the next time the widget is edited.
 *
 * §12 permits one accent and no second hue; the green ETDF panel and the blue total
 * are both off-palette.
 */
.eg-bf-total{ color:var(--color-text) !important; }
.eg-bf-total .eg-bf-total-v{ color:var(--color-accent-800) !important; }

.eg-bf select,
.eg-bf input[type="text"],
.eg-bf input[type="number"],
.eg-bf input[type="email"],
.eg-bf .eg-g-nat{
  color:var(--color-text) !important;
  border:1px solid var(--color-divider) !important;
  border-radius:0 !important;
  background:var(--color-bg) !important;
}
.eg-bf select:focus,
.eg-bf input:focus{ outline:2px solid var(--color-accent-700); outline-offset:2px; }

/* Guest-group panel: surface, square, hairline — not the old rounded tint. */
.eg-bf-glist > *{
  background:var(--color-surface) !important;
  border:1px solid var(--color-divider) !important;
  border-radius:0 !important;
}

/* Guest-group heading: the widget's inline style uses #0E7C86, which measures 4.13:1 on
   --color-surface. accent-800 clears AA at this size. */
.eg-bf-gh{
  color:var(--color-accent-800) !important;
  font-family:var(--font-heading);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:12px;
}

/*
 * WooCommerce PayPal Payments — the smart-button wrapper on the single product
 * page (.ppc-button-wrapper, injected by the plugin after the add-to-cart form)
 * ships with zero margins, so the cancellation note above it, the yellow PayPal
 * bar, and our Add to plan button below it all sat touching each other in one
 * jammed stack — measured gap of exactly 0px at 360px and 1400px alike. The bar
 * itself may stay column-wide (the booking form's own Book now is column-wide
 * too); what it needs is air, and a guard against ever exceeding its column.
 */
.summary .ppc-button-wrapper{
  margin:var(--space-3) 0 var(--space-4);
  max-width:100%;
}
/* The plugin renders into an iframe host that can carry its own stray height;
   keep the wrapper from collapsing over its neighbours when PayPal is slow to
   paint by reserving nothing but clearing floats either side. */
.summary .ppc-button-wrapper::after{ content:""; display:block; clear:both; }

/* ==========================================================================
   WP Social Ninja Messenger — position and full repaint (2026-09-06).

   Homepage only (client decision, 2026-09-01: on inner pages, mobile
   especially, the floating bubble covered real controls). inc/chrome.php
   dequeues the wpsr assets off the front page; this hides any markup that
   renders regardless.

   POSITION. The bubble now keeps its own corner — bottom right, 24px from
   each edge, matching the back-to-top's 24px on the left. The old 110px lift
   existed only to clear the back-to-top; that button has moved to the left
   side (above), so the lift is gone and the two controls no longer stack.

   REPAINT. The plugin ships Facebook's own palette: a #0084FF circular bubble
   with a drop shadow, a #00CED1 panel header, 10px radii. That is three
   different blues and a turquoise on a site whose accent is #0E8F9E. This
   file already repaints GP's back-to-top and Woo's sticky cart the same way,
   for the same reason — third-party chrome is still this site's chrome.

   !important throughout is not laziness: the plugin sets the header colour,
   the heading colour and the caption colour as INLINE styles on the elements
   (verified in the DOM), and an inline style cannot be beaten any other way.
   ========================================================================== */

body:not(.home) .wpsr-fm-chat-wrapper,
body:not(.home) [id^="wpsr-chat-widget"]{ display:none !important; }

/* The plugin's own position rule is a two-class selector loaded after this
   file, so the offset needs the plugin's class chain to outrank it. */
body.home .wpsr-fm-chat-wrapper.wpsr-fm-bubble-position-bottom-right,
body.home div.wpsr-fm-chat-wrapper{ top:auto !important; bottom:24px !important; right:24px !important; }
/* 24px edge + 55px bubble + 12px breathing room. */
body.home .wpsr-fm-chat-wrapper .wpsr-fm-chat-box,
body.home div.wpsr-fm-chat-box{ bottom:91px !important; top:auto !important; }

/* ---- radius: the one deliberate exception -------------------------------- */

/*
 * The design system is square everywhere (§12), and the first pass here was too.
 * The owner asked for a rounded widget (2026-09-06), which is a reasonable call
 * for this object specifically: a chat widget is a piece of borrowed furniture
 * that every visitor already recognises by its shape, and a hard-cornered one
 * reads as a system dialog rather than a conversation.
 *
 * Scoped to this widget and expressed once, so it stays an exception rather than
 * leaking into the site's own components — and so it is a single value to change.
 */
body.home .wpsr-fm-chat-wrapper{
  --eng-chat-radius:10px;
  /* The bubble is a circle, as a floating chat button is everywhere. Named rather
     than written 50% inline so tools/csscheck.mjs can tell this sanctioned
     exception from a stray radius creeping back into the design system. */
  --eng-chat-bubble-radius:50%;
}

/* ---- the bubble ---------------------------------------------------------- */

/* Flat, on-palette, and circular — the shape a floating chat button has
   everywhere, and the plugin's own. The Messenger glyph stays white and
   untouched: the channel has to stay recognisable, and that is the icon's job.
   What changes is the Facebook blue, which belonged to Facebook, not here. */
body.home .wpsr-fm-chat-bubble .wpsr-fm-bubble-btn,
body.home a.wpsr-fm-bubble-btn{
  background-color:var(--color-accent) !important;
  border-radius:var(--eng-chat-bubble-radius) !important;
  box-shadow:none !important;
  border:1px solid var(--color-accent-800) !important;
  transition:background-color .15s ease;
}
body.home a.wpsr-fm-bubble-btn:hover,
body.home a.wpsr-fm-bubble-btn:focus-visible{
  background-color:var(--color-accent-700) !important;
}

/* ---- the opened panel ---------------------------------------------------- */

/* A hairline instead of the plugin's 12px/20px drop shadow. The design system
   has no shadows; separation from the page comes from the rule, the way
   #wc-sticky-cart-panel does it above. */
body.home .wpsr-fm-chat-box{
  border-radius:var(--eng-chat-radius) !important;
  overflow:hidden;
  box-shadow:none !important;
  border:1px solid var(--color-text) !important;
  background:var(--color-bg) !important;
  font-family:var(--font-body);
  /*
   * The plugin ships margin-bottom:100px on the panel — its own way of clearing
   * its own launcher. We position the panel explicitly (bottom = edge + bubble +
   * gap), so that margin stacked on top of ours and left a 112px hole between
   * the panel and the bubble. Zeroed, the gap is the 12px the offset intends.
   */
  margin-bottom:0 !important;
  /*
   * Never taller than the room it has. Without this the panel grows with its
   * content and runs off the top of a short window or a landscape phone, which
   * is where a chat panel is least able to afford it.
   */
  max-height:calc(100vh - 175px);
  max-height:calc(100dvh - 175px);
  display:flex;
  flex-direction:column;
}
/* The header stays put and the conversation takes the overflow. */
body.home .wpsr-fm-chat-box .wpsr-fm-chat-room{
  overflow-y:auto;
  min-height:0;
}

body.home .wpsr-fm-chat-box .wpsr-fm-chat-header,
body.home #wpsr-chat-active-status{
  background-color:var(--color-accent-800) !important;
  /* Top corners only — the header meets the panel body squarely underneath. */
  border-radius:var(--eng-chat-radius) var(--eng-chat-radius) 0 0 !important;
}
body.home .wpsr-fm-group-details h3{
  font-family:var(--font-heading) !important;
  color:#fff !important;
  margin:0 0 2px !important;
}
/* The plugin prints the caption BLACK, inline, on its turquoise header — poor
   contrast there and unreadable on the deep accent. White held back with
   opacity (not a dimmed literal — §12 allows #fff and no other raw colour)
   keeps it clearly secondary to the name above it while staying legible. */
body.home .wpsr-fm-caption,
body.home .wpsr-fm-offline-caption{
  color:#fff !important;
  opacity:.82;
  font-size:13px !important;
}
/* The close control sits on the dark header, so it has to be light. */
body.home .wpsr-fm-chat-close{
  --wpsn-chat-close-btn-color:#fff !important;
  color:#fff !important;
}

/* The greeting reads as a quoted message: the surface tint, squared off. */
body.home .wpsr-fm-greeting-msg .wpsr-fm-msg-text,
body.home .wpsr-fm-msg-text{
  background:var(--color-surface) !important;
  color:var(--color-text) !important;
  border-radius:var(--eng-chat-radius) !important;
  padding:var(--space-3) var(--space-4) !important;
}

/* The one filled object in the panel, and the only thing to press. */
body.home .wpsr-fm-chat-btn-wrapper a{
  background-color:var(--color-accent) !important;
  color:#fff !important;
  border-radius:var(--eng-chat-radius) !important;
  box-shadow:none !important;
  min-height:44px !important;
  font-family:var(--font-heading) !important;
  font-size:16px !important;
  letter-spacing:.01em;
}
body.home .wpsr-fm-chat-btn-wrapper a:hover,
body.home .wpsr-fm-chat-btn-wrapper a:focus-visible{
  background-color:var(--color-accent-700) !important;
}

/* ==========================================================================
   ETDF "coming soon" notice (eg-etdf mu-plugin, rendered by JS into posts)
   ========================================================================== */
.etdf-coming-soon-notice-js{
  background:var(--color-bg);
  border:1px dashed var(--color-divider);
  padding:var(--space-3) var(--space-4);
}
.etdf-coming-soon-notice-js p{
  margin:0;
  font-size:.9em;
  color:var(--color-muted);
}

/* ==========================================================================
   §6.10 Real-estate module (wp-content/mu-plugins/eng-re*.php)

   The module ships its own <style> blocks — the previous site's look: navy
   #003D4C, 14px radii, hover shadows, pill badges. The theme declares
   add_theme_support('eng-re-styles') and the module then prints none of it,
   so everything below is the ONLY styling those components receive. Markup
   is the module's; the class names are fixed there.
   ========================================================================== */

/* Same container as every other page on the site. It was 1140px, which put the whole
   real-estate section 70px inside the header above it and aligned it with nothing.
   The token, not a repeated number, so a future container change carries here too. */
.eng-page{ max-width:var(--container); margin:0 auto; padding:var(--space-6) var(--space-4); }
.eng-h1{
  font-family:var(--font-heading);
  font-size:var(--type-h1-page);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--color-text);
  margin:0 0 var(--space-2);
  text-wrap:balance;
}
.eng-lede{ font-size:var(--type-body-article); color:var(--color-muted); max-width:68ch; margin:0 0 var(--space-6); }
.eng-crumb{ font-size:var(--type-meta); color:var(--color-muted); margin:0 0 var(--space-4); }
.eng-crumb a{ color:var(--color-accent-700); text-decoration:none; }
.eng-crumb a:hover{ text-decoration:underline; text-underline-offset:3px; }
.eng-sec-h{
  /* These headings are link targets — the real-estate hub's CTAs jump to #inquire, which
     IS one of them. Without an offset the sticky rail covers the heading you just asked
     for, so the jump looks like it did nothing. Same value .eng-splithero__anchor uses. */
  scroll-margin-top:calc(var(--rail-top) + var(--space-4));
  font-family:var(--font-heading);
  font-size:var(--type-h2-section);
  font-weight:600;
  line-height:1.1;
  color:var(--color-text);
  margin:var(--space-8) 0 var(--space-3);
}

/* Listing cards — the blueprint object: hairline, square, no fill, no shadow. */
.eng-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--space-4); }
.eng-card{
  position:relative;
  display:flex;
  flex-direction:column;
  border:1px solid var(--color-divider);
  background:transparent;
  overflow:hidden;
  transition:border-color .15s ease;
}
.eng-card:hover,
.eng-card:focus-within{ border-color:var(--color-accent-400); }
.eng-card-img,
a.eng-card-img{ display:block; aspect-ratio:4/3; background:var(--color-surface) center/cover no-repeat; }
.eng-card-b{ padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-2); flex:1; }
.eng-meta{ font-size:var(--type-meta); color:var(--color-muted); }
.eng-card-t{
  margin:0;
  font-family:var(--font-heading);
  font-size:var(--type-h3-card);
  font-weight:600;
  line-height:1.15;
}
.eng-card-t a,
.inside-article .eng-card-t a{ color:var(--color-text); text-decoration:none; }
.eng-card-t a:hover{ color:var(--color-accent-800); }
.eng-badges{ display:flex; gap:var(--space-2); flex-wrap:wrap; }
.eng-badge{
  display:inline-flex;
  align-items:center;
  font-size:12px;
  font-weight:600;
  padding:2px 8px;
  border:1px solid var(--color-divider);
  border-radius:0;
  letter-spacing:.02em;
}
.eng-b-titled{ background:var(--color-accent-100); color:var(--color-accent-900); border-color:var(--color-accent-300); }
.eng-b-tax{ background:var(--color-warning-bg); color:var(--color-warning); border-color:var(--color-warning); }
.eng-price{
  margin-top:auto;
  font-family:var(--font-heading);
  font-size:20px;
  font-weight:600;
  color:var(--color-accent-800);
}
.eng-ribbon{
  position:absolute;
  top:var(--space-3);
  left:var(--space-3);
  z-index:2;
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:0;
  color:#fff;
}
.eng-r-sold{ background:var(--color-danger); }
.eng-r-res{ background:var(--color-warning); }
.eng-sample{ background:var(--color-text); color:#fff; }
.eng-top{ display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center; margin:0 0 var(--space-3); }
.eng-top .eng-ribbon{ position:static; }

/* The module's call to action is the theme's primary button. a.-qualified for the
   same 0-1-1 reason as .eng-btn (GeneratePress's .inside-article a wins otherwise). */
.eng-cta,
a.eng-cta,
.inside-article a.eng-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 18px;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  border:1px solid var(--color-accent-600);
  border-radius:0;
  background:var(--color-accent-600);
  color:#fff;
  transition:background-color .15s ease,border-color .15s ease;
}
.eng-cta:hover,
.eng-cta:focus,
a.eng-cta:hover,
a.eng-cta:focus,
.inside-article a.eng-cta:hover{ background:var(--color-accent-800); border-color:var(--color-accent-800); color:#fff; }

/* Single listing */
.eng-gal{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--space-2); margin:0 0 var(--space-6); }
.eng-gal img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:0; display:block; }
.eng-gal-lead{ grid-column:1/-1; }
.eng-gal-lead img{ aspect-ratio:16/9; max-height:460px; }
.eng-narrative{ max-width:var(--measure-article); font-size:var(--type-body-article); line-height:1.6; }
table.eng-facts{ width:100%; border-collapse:collapse; margin:0 0 var(--space-6); font-size:15px; }
.eng-facts th,
.eng-facts td{ text-align:left; padding:var(--space-3) var(--space-3); border-bottom:1px solid var(--color-divider); vertical-align:top; }
.eng-facts th{ width:38%; color:var(--color-text); font-weight:600; background:var(--color-surface); }
.eng-facts tr:hover td{ background:var(--color-surface); }
#eng-re-map-front{ border-radius:0 !important; border-color:var(--color-divider) !important; }

.eng-empty{
  background:var(--color-surface);
  border:1px dashed var(--color-divider);
  padding:var(--space-8) var(--space-4);
  text-align:center;
  color:var(--color-muted);
}

/* Hub doors and steps */
.eng-doors{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--space-4); margin:var(--space-2) 0 var(--space-6); }
.eng-door,
a.eng-door,
.inside-article a.eng-door{
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
  border:1px solid var(--color-divider);
  background:transparent;
  padding:var(--space-4);
  text-decoration:none;
  color:var(--color-muted);
  font-size:15px;
  line-height:1.5;
  transition:border-color .15s ease;
}
.eng-door:hover,
a.eng-door:hover,
a.eng-door:focus,
.inside-article a.eng-door:hover{ border-color:var(--color-accent-400); color:var(--color-muted); }
.eng-door-k{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--color-accent-700); }
.eng-door strong{ font-family:var(--font-heading); font-size:var(--type-h3-card); font-weight:600; line-height:1.15; color:var(--color-text); }
.eng-steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-4); margin:var(--space-2) 0 var(--space-6); }
.eng-step{ border:1px solid var(--color-divider); background:transparent; padding:var(--space-4); font-size:15px; color:var(--color-muted); line-height:1.5; }
.eng-step-n{
  display:inline-flex;
  width:28px;
  height:28px;
  align-items:center;
  justify-content:center;
  margin:0 0 var(--space-2);
  background:var(--color-accent-100);
  color:var(--color-accent-900);
  font-family:var(--font-heading);
  font-weight:600;
}
.eng-step strong{ display:block; color:var(--color-text); margin:0 0 var(--space-1); }
.eng-checklist{ margin:0 0 var(--space-6); padding:0 0 0 20px; color:var(--color-muted); line-height:1.7; }

/* Notices: hairline, no thick side stripe, state colour from the palette. */
.eng-note{
  background:var(--color-warning-bg);
  border:1px solid var(--color-warning);
  color:var(--color-warning);
  padding:var(--space-3) var(--space-4);
  font-size:14px;
  line-height:1.55;
  margin:0 0 var(--space-6);
}
.eng-disclosure{
  background:var(--color-surface);
  border:1px solid var(--color-divider);
  color:var(--color-muted);
  padding:var(--space-3) var(--space-4);
  font-size:14px;
  line-height:1.5;
  margin:var(--space-4) 0;
}
.eng-disclosure strong{ color:var(--color-text); }
.eng-disclosure-foreign{ border-color:var(--color-warning); }

/* Forms — inquiry and seller submission share one field style with the theme. */
.eng-inq,
.eng-sub{ max-width:720px; margin:0 0 var(--space-6); }
.eng-inq-grid,
.eng-sub-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-4); }
.eng-fld{ display:flex; flex-direction:column; gap:var(--space-1); margin:0; }
.eng-col2{ grid-column:1/-1; }
.eng-fld label{ font-size:14px; font-weight:600; color:var(--color-text); }
.eng-fld input,
.eng-fld select,
.eng-fld textarea,
.eng-sub-locinput{
  width:100%;
  box-sizing:border-box;
  min-height:44px;
  padding:10px 12px;
  font:inherit;
  color:var(--color-text);
  background:var(--color-surface);
  border:1px solid var(--color-divider);
  border-radius:0;
}
.eng-fld input:focus,
.eng-fld select:focus,
.eng-fld textarea:focus,
.eng-sub-locinput:focus{ border-color:var(--color-accent-600); background:var(--color-bg); }
.eng-fld input[readonly]{ background:var(--color-bg); color:var(--color-muted); }
.eng-fld input[type=checkbox]{ width:auto; min-height:0; min-width:18px; flex:0 0 auto; accent-color:var(--color-accent-600); }
.eng-fld input[type=file]{ padding:8px; background:var(--color-bg); }
.eng-hp{ position:absolute; left:-9999px; height:0; overflow:hidden; }
.eng-consent{ margin:var(--space-4) 0 var(--space-3); font-size:14px; color:var(--color-muted); line-height:1.5; }
.eng-consent a{ color:var(--color-accent-700); }
.eng-consent input[type=checkbox]{ accent-color:var(--color-accent-600); }
.eng-inq-btn,
button.eng-inq-btn,
.eng-sub-locbtn,
button.eng-sub-locbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 22px;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:600;
  line-height:1.2;
  color:#fff;
  background:var(--color-accent-600);
  border:1px solid var(--color-accent-600);
  border-radius:0;
  cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease;
}
.eng-inq-btn:hover,
.eng-inq-btn:focus,
button.eng-inq-btn:hover,
.eng-sub-locbtn:hover,
button.eng-sub-locbtn:hover{ background:var(--color-accent-800); border-color:var(--color-accent-800); color:#fff; }
.eng-benefit{ color:var(--color-muted); font-size:13px; margin:var(--space-2) 0 0; }
.eng-inq-ok,
.eng-sub-ok{ background:var(--color-success-bg); border:1px solid var(--color-success); color:var(--color-success); padding:var(--space-4); margin:0 0 var(--space-4); }
.eng-inq-ok p,
.eng-sub-ok p{ margin:var(--space-1) 0 0; color:var(--color-success); }
.eng-sub-err{ background:var(--color-danger-bg); border:1px solid var(--color-danger-border); color:var(--color-danger); padding:var(--space-3) var(--space-4); margin:0 0 var(--space-4); }
.eng-sub-h{
  font-family:var(--font-heading);
  font-size:var(--type-h3-card);
  font-weight:600;
  color:var(--color-text);
  margin:var(--space-6) 0 var(--space-3);
  padding-bottom:var(--space-1);
  border-bottom:1px solid var(--color-divider);
}
.eng-sub-hint{ display:block; color:var(--color-muted); font-size:12px; font-weight:400; margin-top:2px; }
.eng-sub-chk{ display:flex; align-items:center; gap:var(--space-2); font-weight:400 !important; }
.eng-sub-map{ height:280px; border:1px solid var(--color-divider); border-radius:0; overflow:hidden; }
.eng-sub-locrow{ display:flex; gap:var(--space-2); margin:0 0 var(--space-2); }
.eng-sub-locinput{ flex:1; min-width:0; }
.eng-sub-locbtn{ flex:0 0 auto; }
.eng-sub-georesults{ display:flex; flex-direction:column; gap:var(--space-1); margin:0 0 var(--space-2); }
.eng-sub-georesult,
button.eng-sub-georesult{
  text-align:left;
  background:transparent;
  border:1px solid var(--color-divider);
  border-radius:0;
  padding:10px 12px;
  font:inherit;
  font-size:14px;
  color:var(--color-text);
  cursor:pointer;
  min-height:44px;
}
.eng-sub-georesult:hover,
.eng-sub-georesult:focus,
button.eng-sub-georesult:hover{ border-color:var(--color-accent-600); background:var(--color-accent-100); color:var(--color-accent-900); }
.eng-sub-locstatus{ margin:0 0 var(--space-2); font-size:14px; color:var(--color-success); }
.eng-sub-locstatus--err{ color:var(--color-danger); }
.eng-sub-clearpin,
button.eng-sub-clearpin{
  background:transparent;
  border:1px solid var(--color-accent-400);
  border-radius:0;
  padding:8px 14px;
  font:inherit;
  font-size:13px;
  font-weight:600;
  color:var(--color-accent-800);
  cursor:pointer;
  min-height:44px;
}
.eng-sub-clearpin:hover,
button.eng-sub-clearpin:hover{ background:var(--color-accent-100); color:var(--color-accent-900); border-color:var(--color-accent-600); }

/* Hub page (page 3477) — the hand-written blocks keep their markup; their
   inline <style> was removed and this is what they wear now. */
/* FULL WIDTH, deliberately — owner's call, 2026-09-08, comparing this page side by side
   with the Stays hub. The Stays hub fills .site-content with no cap of its own; this page
   was capping at 1280 inside a full-width template, so its hero and cards sat visibly
   narrower than the equivalent page one menu item away. The page gutter comes from
   .site-content; the var(--space-4) here keeps content off the container edge on phones. */
.engx{ max-width:none; margin:0 auto var(--space-6); padding:0 var(--space-4); color:var(--color-text); box-sizing:border-box; }
.engx *{ box-sizing:border-box; }
.engx h2{
  font-family:var(--font-heading);
  font-size:var(--type-h2-section);
  font-weight:600;
  line-height:1.1;
  color:var(--color-text);
  margin:0 0 var(--space-1);
}
.engx-sub{ color:var(--color-muted); margin:0 0 var(--space-4); }
.engx-sec{ margin:0 0 var(--space-8); }
.engx-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--space-4); }
.engx-grid-g{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.engx-card,
a.engx-card,
.inside-article a.engx-card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--color-divider);
  background:transparent;
  padding:var(--space-4);
  text-decoration:none;
  color:var(--color-muted);
  transition:border-color .15s ease;
}
a.engx-card:hover,
a.engx-card:focus,
.inside-article a.engx-card:hover{ border-color:var(--color-accent-400); color:var(--color-muted); }
.engx-card h3{ font-family:var(--font-heading); font-size:var(--type-h3-card); font-weight:600; line-height:1.15; color:var(--color-text); margin:0 0 var(--space-2); }
.engx-card p{ color:var(--color-muted); font-size:15px; line-height:1.5; margin:0; }
.engx-tag{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--color-accent-700); margin:0 0 var(--space-2); }
.engx-more{ color:var(--color-accent-800); font-weight:600; font-size:14px; margin:var(--space-3) 0 0; }
.engx-trust{ background:var(--color-surface); border:1px solid var(--color-divider); padding:var(--space-6) var(--space-4); }
.engx-tlist{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-4); margin:var(--space-4) 0 0; }
.engx-tlist h4{ font-family:var(--font-heading); font-size:18px; font-weight:600; color:var(--color-text); margin:0 0 var(--space-1); }
.engx-tlist p{ color:var(--color-muted); font-size:15px; line-height:1.5; margin:0; }
.engx-ans{ border:1px solid var(--color-divider); background:var(--color-surface); padding:var(--space-4) var(--space-6); max-width:var(--measure-article); }
.engx-ans p{ color:var(--color-text); line-height:1.6; margin:0 0 var(--space-3); }
.engx-ans p:last-child{ margin:0; }
/* The real-estate hub's "Browse the listings" CTA jumps to #eng-listings, an empty marker
   div authored in the page content immediately above the Featured listings section. It
   carries no class of its own, so the offset has to be hung on the id — without it the
   sticky rail covers the heading the visitor just asked to see. Same value .eng-sec-h and
   .eng-splithero__anchor use. */
#eng-listings{ scroll-margin-top:calc(var(--rail-top) + var(--space-4)); }
.engx-faq{ max-width:none; margin:var(--space-6) auto var(--space-8); padding:0 var(--space-4); }
.engx-faq h2{ margin:0 0 var(--space-4); }
.engx-faq details{ border-top:1px solid var(--color-divider); padding:var(--space-3) 0; margin:0; background:transparent; }
.engx-faq details:last-of-type{ border-bottom:1px solid var(--color-divider); }
.engx-faq summary{
  font-family:var(--font-heading);
  font-size:18px;
  font-weight:600;
  color:var(--color-text);
  cursor:pointer;
  list-style:none;
  position:relative;
  padding-right:32px;
  min-height:28px;
}
.engx-faq summary::-webkit-details-marker{ display:none; }
.engx-faq summary::after{ content:"+"; position:absolute; right:2px; top:-2px; color:var(--color-accent-700); font-size:22px; font-weight:400; }
.engx-faq details[open] summary::after{ content:"\2013"; }
.engx-faq .a{ color:var(--color-muted); line-height:1.6; font-size:15px; margin:var(--space-2) 0 0; max-width:var(--measure-article); }
@media (max-width:640px){
  .engx-btn,
  a.engx-btn{ width:100%; }
  .eng-page{ padding:var(--space-4); }
}

/* ==========================================================================
body §6.11 Accommodation booking widget (eg-accommodations.php, body product pages)

body A second booking widget from the same mu-plugin family as §6.9 (.eg-nb*, body not
body .eg-bf*): night calendar, body check-in/out display, body room and guest selects. Its
body inline CSS is the old look — 14px radius, body drop shadow, body navy fills, body grey text
body at 3.4:1. Restyled to the blueprint object here.
   ========================================================================== */

body .eg-nb{ border:1px solid var(--color-divider) !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important; padding:var(--space-4) !important; max-width:none !important; }
body .eg-nb-price{ font-family:var(--font-heading); font-size:22px; font-weight:600; color:var(--color-text); }
body .eg-nb-price span{ font-family:var(--font-body); font-size:14px; font-weight:400; color:var(--color-muted); }
body .eg-nb-disp{ border:1px solid var(--color-divider); border-radius:0; background:var(--color-surface); }
body .eg-nb-lab,
body .eg-nb-f span{ font-size:11px; letter-spacing:.1em; color:var(--color-muted); }
body .eg-nb-arw{ color:var(--color-muted); }
body .eg-nb-clear{ color:var(--color-accent-800); font-size:13px; min-height:44px; }
body .eg-nb-cal-head button{ width:34px; height:34px; border:1px solid var(--color-divider); border-radius:0; background:transparent; color:var(--color-accent-800); }
body .eg-nb-cal-head button:hover{ background:var(--color-accent-100); color:var(--color-accent-900); }
body #eg-nb-mon,
body .eg-nb-m h5{ font-family:var(--font-heading); font-weight:600; color:var(--color-text); letter-spacing:.04em; text-transform:uppercase; }
body .eg-nb-dw{ color:var(--color-muted); }
body .eg-nb-d{ border-radius:0; color:var(--color-text); }
body .eg-nb-d:hover:not(.off):not(.bk){ border-color:var(--color-accent-600); }
body .eg-nb-d.off{ color:var(--color-divider); }
body .eg-nb-d.bk{ color:var(--color-muted); background:var(--color-surface); }
body .eg-nb-d.in,
body .eg-nb-d.out{ background:var(--color-accent-700); color:#fff; }
body .eg-nb-d.mid{ background:var(--color-accent-100); color:var(--color-accent-900); }
body .eg-nb-key{ font-size:12px; color:var(--color-muted); }
body .eg-nb-key i{ border-radius:0; }
body .eg-nb-key .k-book{ background:var(--color-divider); }
body .eg-nb-key .k-sel{ background:var(--color-accent-700); }
body .eg-nb-f select{
  min-height:44px;
  padding:10px 12px;
  border:1px solid var(--color-divider);
  border-radius:0;
  background:var(--color-surface);
  color:var(--color-text);
}
body .eg-nb-calc{ border-top:1px solid var(--color-divider); color:var(--color-text); }
body .eg-nb-note,
body .eg-stay-note{ color:var(--color-muted); font-size:13px; }
body .eg-nb-err{ color:var(--color-danger); }

/* ==========================================================================
   §6.12 Stays directory (eg-accommodations.php, /book-a-stay/)

   Pill filter chips, rounded selects, a navy "on" state and a rounded host
   band with a navy button — all declared !important by the plugin, so the
   overrides carry the same weight. Square, hairline, one accent.
   ========================================================================== */

.eg-ac-hub{ max-width:var(--container); padding:var(--space-6) var(--space-4); }
body .eg-ac-h1{ font-family:var(--font-heading); font-size:var(--type-h1-page); font-weight:700; line-height:1.05; letter-spacing:-.02em; color:var(--color-text); }
body .eg-ac-sub{ color:var(--color-muted); font-size:var(--type-body-article); }
body .eg-ac-filters{ background:var(--color-bg); border-bottom:1px solid var(--color-divider); }
body .eg-ac-hub button.eg-ac-chip,
body button.eg-ac-chip{
  min-height:44px;
  border:1px solid var(--color-divider) !important;
  border-radius:0;
  background:transparent !important;
  color:var(--color-text) !important;
  font-weight:600;
}
body .eg-ac-hub button.eg-ac-chip:hover,
body button.eg-ac-chip:hover{ border-color:var(--color-accent-600) !important; background:var(--color-accent-100) !important; color:var(--color-accent-900) !important; }
body .eg-ac-hub button.eg-ac-chip.on,
body button.eg-ac-chip.on,
body .eg-ac-hub button.eg-ac-chip.on:hover,
body button.eg-ac-chip.on:hover{ background:var(--color-accent-700) !important; color:#fff !important; border-color:var(--color-accent-700) !important; }
body .eg-ac-ctl span{ font-size:11px; letter-spacing:.1em; color:var(--color-muted); }
body .eg-ac-ctl select{
  min-height:44px;
  padding:10px 12px;
  border:1px solid var(--color-divider);
  border-radius:0;
  background:var(--color-surface);
  color:var(--color-text);
}
body .eg-ac-hub button.eg-ac-ctl-btn,
body button.eg-ac-ctl-btn{
  min-height:44px;
  border:1px solid var(--color-accent-400) !important;
  border-radius:0;
  background:transparent !important;
  color:var(--color-accent-800) !important;
  font-weight:600;
}
body .eg-ac-hub button.eg-ac-ctl-btn:hover,
body .eg-ac-hub button.eg-ac-ctl-btn:focus,
body button.eg-ac-ctl-btn:hover,
body button.eg-ac-ctl-btn:focus{ background:var(--color-accent-100) !important; color:var(--color-accent-900) !important; border-color:var(--color-accent-600) !important; }
body .eg-ac-hub button.eg-ac-ctl-btn.on,
body button.eg-ac-ctl-btn.on{ background:var(--color-accent-700) !important; color:#fff !important; border-color:var(--color-accent-700) !important; }
body .eg-ac-hub button.eg-ac-ctl-btn.ghost,
body button.eg-ac-ctl-btn.ghost{ color:var(--color-accent-800) !important; background:transparent !important; border-color:transparent !important; }
body .eg-ac-hub button.eg-ac-ctl-btn.ghost:hover,
body button.eg-ac-ctl-btn.ghost:hover{ background:var(--color-accent-100) !important; color:var(--color-accent-900) !important; border-color:transparent !important; }
body .eg-ac-amen{ border:1px solid var(--color-divider); border-radius:0; background:transparent; }
body .eg-ac-ag strong{ color:var(--color-text); }
body .eg-ac-host{
  background:var(--color-surface);
  border:1px solid var(--color-divider);
  border-radius:0;
  padding:var(--space-6) var(--space-4);
}
body .eg-ac-host h3{ font-family:var(--font-heading); font-size:var(--type-h2-section); font-weight:600; color:var(--color-text); }
body .eg-ac-host p{ color:var(--color-muted); }
body .eg-ac-hub a.eg-ac-host-btn,
body a.eg-ac-host-btn{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  background:var(--color-accent-600) !important;
  color:#fff !important;
  border:1px solid var(--color-accent-600);
  border-radius:0;
  font-weight:600;
}
body .eg-ac-hub a.eg-ac-host-btn:hover,
body a.eg-ac-host-btn:hover{ background:var(--color-accent-800) !important; border-color:var(--color-accent-800); color:#fff !important; }

/* ==========================================================================
   §6.13 Editorial post template (eg-post-template.php)

   Its article hero and related cards carry the previous site's editorial
   voice: Georgia display, 18px-rounded photographs, pill category chips,
   a gradient CTA band and 3.6:1 grey meta. The single-post layout itself is
   the theme's GP Element; these rules catch the plugin's remaining fragments
   (related cards, CTA band, share buttons) wherever they still print.
   ========================================================================== */

.eg-ah-t,
.single-post .entry-content h2{ font-family:var(--font-heading); color:var(--color-text); letter-spacing:-.02em; }
body .eg-ah-crumb,
body .eg-ah-crumb a,
body .eg-ah-dots{ color:var(--color-muted); }
body .eg-ah-crumb a:hover{ color:var(--color-accent-800); }
body .eg-ah-chip,
body a.eg-ah-chip{ background:var(--color-accent-100); color:var(--color-accent-900); border:1px solid var(--color-accent-300); border-radius:0; letter-spacing:.06em; }
body .eg-ah-chip:hover,
body a.eg-ah-chip:hover{ background:var(--color-accent-700); color:#fff; border-color:var(--color-accent-700); }
body .eg-ah-fig img{ border-radius:0; }
body .eg-ah-meta{ border-color:var(--color-divider); }
body .eg-sh,
body a.eg-sh,
body button.eg-sh{ border:1px solid var(--color-accent-400); border-radius:0; background:transparent; color:var(--color-accent-800); min-height:36px; }
body .eg-sh:hover,
body a.eg-sh:hover,
body button.eg-sh:hover{ background:var(--color-accent-100); border-color:var(--color-accent-600); color:var(--color-accent-900); }
body .eg-c{ border:1px solid var(--color-divider); border-radius:0; box-shadow:none; background:transparent; }
body .eg-c:hover{ border-color:var(--color-accent-400); box-shadow:none; transform:none; }
body .eg-c-img,
body .eg-c-img img{ border-radius:0; }
body .eg-c-cat{ color:var(--color-accent-700); }
body .eg-c-t,
body .eg-c-t a{ font-family:var(--font-heading); color:var(--color-text); }
body .eg-c-m{ color:var(--color-muted); }
body .eg-cta{ background:var(--color-text) !important; background-image:none !important; border-radius:0 !important; color:#fff; }
body .eg-cta strong{ font-family:var(--font-heading); }
body .eg-cta p{ color:var(--color-accent-200); }
body .eg-cta-btn,
body a.eg-cta-btn{ background:#fff; color:var(--color-text); border-radius:0; font-weight:600; min-height:44px; display:inline-flex; align-items:center; }
body .eg-cta-btn:hover,
body a.eg-cta-btn:hover{ background:var(--color-accent-100); color:var(--color-accent-900); }
body .eg-progress{ background:var(--color-accent-600); }

/* ==========================================================================
   §6.14 WooCommerce product grid block (cart "New in store", shop blocks)
   ========================================================================== */

.wc-block-grid__product{ border:1px solid var(--color-divider); padding-bottom:var(--space-4); }
body .wc-block-grid__product-image img{ border-radius:0; }
body .wc-block-grid__product-title{ font-family:var(--font-heading); font-size:18px; font-weight:600; color:var(--color-text); }
body .wc-block-grid__product-price,
body .wc-block-grid__product-price .woocommerce-Price-amount{ color:var(--color-text); font-size:15px; }
body .wc-block-grid .wp-block-button__link{ border-radius:0; min-height:44px; }

/* Last two contrast stragglers from the 2026-09-02 audit: WooCommerce's breadcrumb grey
   (4.1:1 on the page ground) and the stay card's meta line (4.45:1). */
/* WooCommerce sets it at .woocommerce:where(body:not(...)) .woocommerce-breadcrumb (0,2,0); .woocommerce is
   the body class itself, so the override must be body.woocommerce (0,2,1), not body .woocommerce. */
body.woocommerce .woocommerce-breadcrumb,
body.woocommerce .woocommerce-breadcrumb a,
body .woocommerce-breadcrumb,
body .woocommerce-breadcrumb a{ color:var(--color-muted); }
body.woocommerce .woocommerce-breadcrumb a:hover,
body .woocommerce-breadcrumb a:hover{ color:var(--color-accent-800); }
body .eg-ac-m,
body .eg-ac-sub,
body .eg-ac-host p{ color:var(--color-muted); }