/* ==========================================================================
   emr-site.css — EMR Vacation Rentals skin (multi-site, HANDOFF §139).

   REBUILT 2026-08-13 from emrvacationrentals.com's OWN stylesheet tokens
   (not eyeballed): their site is a LIGHT, white-chromed design — white
   header, sky-blue accents, saturated blue CTAs, Poppins everywhere, pill
   buttons, near-black headings on white. The previous skin kept the demo's
   dark-band chrome in coastal colours, which is why it read as "Ridgeline
   in blue" rather than as EMR. Verbatim source values:

     #4BB5E3  their signature sky blue  (14 uses in their CSS — links,
              accents, subheads, the light SEARCH button)
     #0d6efd  their solid CTA blue      (6 uses — "Search Listings Now!",
              Book Now!)
     #111111  headings / footer black   (13 uses)
     #666666  body text grey            (33 uses — their most-used colour)
     #BBBBBB  muted borders
     Poppins  self-hosted on their site as "EMRMainFont" (we self-host the
              same three weights in assets/fonts/, per the no-CDN rule;
              OFL-licensed)
     #20a0e0  logo-dominant blue (favicon_bg in site.json — logo/avatar only)

   HOW THIS LOADS (unchanged anti-fork design): demo-site.css supplies all
   chrome structure and reads the --rr-*/--lx-* tokens; this file re-declares
   the tokens and then overrides the small set of chrome rules that bake the
   DARK theme in as literals (banner/header/hero/footer + buttons). Still a
   layer, not a fork — every override below exists because the corresponding
   chrome rule hardcodes a colour the token system cannot reach.
   ========================================================================== */

/* ── EMR's typeface, self-hosted (their site serves these exact files) ────── */
/* §265 (C8): the same three faces recompressed to woff2 (~52 KB each instead of
   ~155 KB) — the TTFs stay as the fallback for a browser without woff2. The
   manifest's preload_fonts names the woff2 Regular. */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/Poppins-Regular.woff2") format("woff2"), url("fonts/Poppins-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/Poppins-Medium.woff2") format("woff2"), url("fonts/Poppins-Medium.ttf") format("truetype");
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/Poppins-SemiBold.woff2") format("woff2"), url("fonts/Poppins-SemiBold.ttf") format("truetype");
}

/* ── Palette override (re-skins every var()-driven chrome + .lx-next surface) */
:root {
    /* Plugin component tokens (cards, booking card, tabs, calendar) */
    --lx-color-brand:      #0d6efd;   /* EMR solid CTA blue */
    --lx-color-brand-ink:  #0b5ed7;   /* hover / emphasis */
    --lx-color-brand-tint: #e8f6fd;   /* pale sky wash */
    --lx-color-accent:     #0d6efd;
    --lx-color-accent-ink: #0b5ed7;
    --lx-color-ink:        #111111;   /* their heading black */
    --lx-color-ink-2:      #666666;   /* their body grey */
    --lx-color-ink-3:      #9aa4ab;
    --lx-color-bg-2:       #f7fafc;
    --lx-color-bg-3:       #eef6fb;
    --lx-color-line:       #e8e8e8;
    --lx-color-line-2:     #d5dee4;

    /* Logo greens/blues kept on hand (favicon, odd eco accent) */
    --emr-green:           #6aa62b;
    --emr-green-ink:       #4f7f20;
    --emr-logo-blue:       #20a0e0;

    /* Type — Poppins everywhere, headings included (their site uses no serif
       anywhere). Both token slots point at Poppins so the chrome's serif
       display rules render sans, matching EMR. */
    --lx-font-sans:  "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --lx-font-serif: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Chrome palette — same --rr-* names on purpose; the dark-band roles are
       repurposed for EMR's light theme: "navy" now feeds the one band EMR
       keeps dark (the footer), everything else goes white/sky. */
    --rr-navy:      #111111;   /* footer base — their footer/heading black */
    --rr-navy-2:    #1c1c1c;
    --rr-blue:      #0d6efd;   /* primary action */
    --rr-blue-ink:  #0b5ed7;
    --rr-sky:       #4BB5E3;   /* signature accent */
    --rr-mint:      #d9f0fa;   /* pale sky (on-dark hover tint) */
    --rr-cream:     #f7fbfe;   /* light section background */
    --rr-ink:       #111111;
    --rr-line-dark: rgba(17, 17, 17, 0.10);
}

/* ── Light chrome overrides — each of these counters a hardcoded dark rule ── */

/* Top banner: near-white sky strip with blue links (their topbar) */
.lx-demo-banner {
    background: #f2fafd !important;
    color: #666666 !important;
    border-bottom: 1px solid #e3f1f8;
}
.lx-demo-banner a { color: #2795c9 !important; font-weight: 500; }

/* Header: white, dark nav that hovers to their sky blue. S183 REMEASURED:
   their logo row is 82px tall with NO bottom rule and NO shadow — the header
   sits flush on the search strip, both white. The hairline + shadow here were
   our polish, not theirs. Side padding is 2% OF WIDTH plus a 10px column pad
   (Elementor --padding-left:2%), NOT a fixed px value — which is why §179
   measured ~35px at one window and 51px at another; both were the same 2%. */
.lx-demo-header {
    background: #ffffff;
    border-bottom: 0;
    box-shadow: none;
    padding: 11.5px calc(2% + 10px);
}
.lx-demo-header__nav a,
.lx-demo-header__mark { color: #111111; }
.lx-demo-header__tagline { color: #666666; }
.lx-demo-header__nav a:hover,
.lx-demo-header__nav a.is-active { color: #2795c9; }
.lx-demo-header .lx-fav-headerbtn { color: #111111 !important; }
.lx-demo-header .lx-fav-headerbtn:hover { color: #2795c9 !important; }
.lx-demo-header__phone {
    color: #ffffff;
    background: #0d6efd;
    border: 0;
    border-radius: 999px;
}
.lx-demo-header__phone:hover { background: #0b5ed7; color: #ffffff; }

/* Hero: white with soft sky glows (was a dark ocean gradient), dark type.
   Their hero: blue semibold kicker, near-black headline, grey standfirst. */
.lx-demo-hero {
    background:
        radial-gradient(1100px 500px at 85% -10%, rgba(75, 181, 227, 0.16), transparent 60%),
        radial-gradient(900px 480px at 8% 110%, rgba(13, 110, 253, 0.07), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #f4fafd 100%);
}
.lx-demo-hero h1 { color: #111111; }
.lx-demo-hero h1 .rr-accent { color: #0d6efd; font-weight: 600; letter-spacing: -1px; font-style: normal; }
.lx-demo-hero p { color: #666666; }
/* The eyebrow is a .rr-label--ondark (white-ish on the old dark hero); on the
   light hero it must be their sky blue. */
.lx-demo-hero .lx-demo-hero__eyebrow,
.lx-demo-hero .rr-label--ondark { color: #2795c9; }

/* Buttons: their pill geometry, Poppins weight, exact blues */
.rr-btn {
    border-radius: 999px;
    font-family: var(--lx-font-sans);
    font-weight: 600;
}
.rr-btn--solid { background: #0d6efd; border-color: #0d6efd; color: #fff; }
.rr-btn--solid:hover { background: #0b5ed7; border-color: #0b5ed7; }
.rr-btn--outline { border-color: #4BB5E3; color: #2795c9; }
.rr-btn--outline:hover { background: #e8f6fd; border-color: #2795c9; }

/* Footer: the one dark band EMR keeps — their #111 with sky links */
.lx-demo-footer {
    background: #111111;
    color: rgba(255, 255, 255, 0.72);
}
.lx-demo-footer a { color: #4BB5E3; }
.lx-demo-footer a:hover { color: #d9f0fa; }

/* ==========================================================================
   EXACT-EMULATION PASS (2026-08-13) — mirror emrvacationrentals.com's own
   homepage: blue sentence-case kicker (their rgb(6,147,227)), plain black
   headline, THEIR hero photo (self-hosted copy) in a rounded organic mask
   with their blue dot-grid motif (their rgb(40,116,252)), and no dark
   mid-page band anywhere — their site is light throughout except the footer.
   ========================================================================== */

/* Kicker: sentence-case semibold blue lead-in, not an uppercase tracked label */
.lx-demo-hero .lx-demo-hero__eyebrow,
.lx-demo-hero .rr-label--ondark {
    color: #0693E3;
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}
.lx-demo-hero .lx-demo-hero__eyebrow::before { display: none; }

/* Hero photo + dots: pure CSS because the chrome only renders a photo element
   when the catalogue supplies one; EMR's hero uses their marketing shot. */
.lx-demo-hero__inner { position: relative; }
.lx-demo-hero__inner > div:first-child { max-width: 560px; position: relative; z-index: 2; }
@media (min-width: 1000px) {
    .lx-demo-hero__inner::after {
        content: "";
        position: absolute;
        top: -9%;
        right: -2%;
        bottom: -12%;
        width: 46%;
        background: url("../img/sites/emr/hero-img2-3.jpg") center / cover no-repeat;
        border-radius: 150px 28px 28px 28px;
        z-index: 1;
    }
    .lx-demo-hero__inner::before {
        content: "";
        position: absolute;
        bottom: -8%;
        right: 44%;
        width: 120px;
        height: 160px;
        background-image: radial-gradient(rgb(40, 116, 252) 2.2px, transparent 2.7px);
        background-size: 22px 22px;
        z-index: 2;
    }
}

/* Page heroes (contact etc., §178): the chrome's near-black band is the demo
   theme; EMR is light everywhere except the footer. Same treatment as their
   own inner pages — pale wash, navy heading, grey standfirst. */
.rr-page-hero {
    background:
        radial-gradient(900px 420px at 85% -10%, rgba(75, 181, 227, 0.14), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #f4fafd 100%);
}
.rr-page-hero h1 { color: #051441; }
.rr-page-hero .rr-accent { color: #0d6efd; font-style: normal; }
.rr-page-hero .rr-page-hero__sub { color: #5E6F85; }   /* C14 (N23): was #6A7C92, 4.28:1 on white → 5.14:1 */
.rr-page-hero .rr-label--ondark { color: #0693E3; }

/* Their site has no dark mid-page band: Why Book Direct goes light — white
   cards, soft shadow, blue numerals */
.rr-band--navy { background: #f7fbfe; color: #666666; }
.rr-band--navy h2 { color: #111111; }
.rr-band--navy h2 .rr-accent { color: #0d6efd; }
.rr-band--navy .rr-band__sub { color: #666666; }
.rr-band--navy .rr-label--ondark { color: #0693E3; }
.rr-prop {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(17, 42, 82, 0.08);
}
.rr-prop h3 { color: #111111; }
.rr-prop p { color: #666666; }
.rr-prop__num { color: #0693E3; }


/* ==========================================================================
   KIT-ALIGNMENT PASS (2026-08-22, HANDOFF S164) - values read from their
   Elementor global kit (post-7166.css), which is what actually paints the
   live site's type and bands; the 08-13 pass was built from the older theme
   stylesheet. Differences applied here, everything else above stands:

     #051441  headings + button HOVER bg (kit primary/secondary)
     #8594A7  body text (kit text colour - grey-blue, not #666)
     #4BB5E3  links (kit accent slot - unchanged)
     #0D6EFD  button bg (unchanged)
     8px      button radius (kit button_border_radius; the pill shape only
              survives on the footer CTA on their site)
     #EFF2F9  FOOTER BACKGROUND - their footer is LIGHT (headings #132730,
              text #6A7C92), not the dark #111 band the old pass kept
   ========================================================================== */

:root {
    --lx-color-ink:   #051441;   /* kit heading navy */
    --lx-color-ink-2: #5E6F85;   /* body - kit #8594A7 is too faint at 14px on
                                    cards. C14 (N23): was #6A7C92 — 4.28:1 on
                                    white, under WCAG's 4.5:1 for text (the
                                    min-stay line, the card's grey copy, the
                                    booking card's notes); #5E6F85 is 5.14:1 and
                                    the same slate. (Their footer grey does NOT
                                    pass AA — the old note here was wrong.) */
    --rr-ink:         #051441;
}

h1, h2, h3, h4, h5, h6,
.lx-demo-hero h1,
.rr-band--navy h2,
.rr-prop h3 { color: #051441; }

/* Buttons: kit geometry - 8px radius, navy hover (their exact hover state) */
.rr-btn { border-radius: 8px; }
.rr-btn--solid:hover { background: #051441; border-color: #051441; }

/* Footer: their light footer band */
.lx-demo-footer {
    background: #EFF2F9;
    color: #5E6F85;   /* C14 (N24): was #6A7C92 (3.82:1 on this band); the S182 footer block below sets the real values */
    border-top: 1px solid #dfe6f0;
}
.lx-demo-footer a { color: #5E6F85; }
.lx-demo-footer a:hover { color: #051441; }
.lx-demo-footer h4, .lx-demo-footer strong,
.lx-demo-footer .lx-demo-footer__head { color: #132730; }

/* Utility top bar (chrome-header renders it only when the manifest declares
   `topbar`). §179 REMEASURED against their live strip: FULL viewport width
   (not the 1140 content column), all four items spread evenly edge to edge
   with ~35px side padding, every link their sky blue #4BB5E3 at 17.6px/500.
   display:contents flattens the phones/links wrapper divs so the anchors
   themselves are the evenly-spaced flex items. */
.lx-demo-topbar {
    background: #F8F9FA;
    /* S183: their strip has no bottom rule — the grey ends where the white
       header begins, no hairline between. */
    border-bottom: 0;
}
.lx-demo-topbar__inner {
    max-width: none;
    margin: 0;
    /* S183: 10px vertical (their 38px strip = 17.6px text + 10+10), and the
       same 2%-plus-10px side inset as the header row, so the first phone and
       the logo start on one left edge exactly as theirs do. */
    padding: 10px calc(2% + 10px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.lx-demo-topbar__phones,
.lx-demo-topbar__links { display: contents; }
.lx-demo-topbar__phones a,
.lx-demo-topbar__links a {
    color: #4BB5E3;
    text-decoration: none;
    margin-right: 0;
    font-size: 17.6px;
    font-weight: 500;
    line-height: 1;
}
.lx-demo-topbar__phones a:hover,
.lx-demo-topbar__links a:hover { color: #2795c9; }
@media (max-width: 700px) {
    .lx-demo-topbar__inner { justify-content: center; gap: 10px 22px; padding: 8px 16px; }
    .lx-demo-topbar__phones a, .lx-demo-topbar__links a { font-size: 15px; }
}

/* Content pages (content.php) - navy headings, kit body rhythm */
.lx-content-md h2, .lx-content-md h3 { color: #051441; margin-top: 1.6em; }
.lx-content-md a { color: #2795c9; }
.lx-collection__intro-md p { color: #5E6F85; }   /* C14 (N23): was #6A7C92 — 4.28:1 on white */
.lx-collection__intro-md a { color: #2795c9; }


/* ==========================================================================
   EMR HOMEPAGE (S167) - styles for the site's own landing template
   (sites/emr/templates/landing.php), a structural replica of their home.
   1140px content column, pastel tint bands, 27px-rounded imagery - their
   Elementor kit geometry.
   ========================================================================== */

.emr-container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.emr-band { padding: 56px 0; background: #ffffff; }
.emr-band--tint { background: #EEF3F9; }
.emr-band__head { text-align: center; margin-bottom: 30px; }
.emr-band__head h2, .emr-years h2, .emr-cta h2 { color: #051441; font-size: 2rem; margin: 0 0 10px; }
.emr-band__sub { color: #6A7C92; max-width: 720px; margin: 0 auto; }
.emr-kicker {
    color: #0693E3;
    font-weight: 600;
    font-size: 1.05rem;
    margin: 0 0 6px;
    text-transform: none;
    letter-spacing: 0;
}

/* Hero — S187 REMEASURED from their live homepage (computed styles, @1984):
   their CURRENT hero is a FLAT 50/50 split — the photo is a plain rectangle
   (border-radius 0) bled flush to the RIGHT viewport edge, on a plain white
   band with NO vertical padding (band height = photo height); the S164
   "organic corner" mask, dot-grid and sky-glow gradient are gone from their
   site. Text column: kicker H4 24px/600 #0d6efd, 20px to a 42px/700 BLACK
   lh42 H1, 20px to a 16px/24px #8594A7 standfirst, 44px to the pill CTA
   (radius 45px, #0d6efd, 18px/700, pad 20px 40px, sentence case), 20px to
   the book-direct support line. Text starts at 2%+10px from the left edge,
   vertically centred against the photo. */
.emr-hero { padding: 0; background: #ffffff; }
.emr-hero .emr-container.emr-hero__grid {
    max-width: none;
    margin: 0;
    padding: 0 0 0 2%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: center;
}
.emr-hero__copy { padding: 24px 10px; }
.emr-hero .emr-kicker {
    font-size: 24px;
    font-weight: 600;
    line-height: 24px;
    color: #0d6efd;
    margin: 0 0 20px;
}
.emr-hero__copy h1 {
    color: #000000;
    font-size: 42px;
    font-weight: 700;
    line-height: 42px;
    letter-spacing: normal;
    margin: 0 0 20px;
}
.emr-hero__sub { color: #8594A7; font-size: 16px; line-height: 24px; margin: 0 0 44px; }
.emr-hero__cta {
    font-size: 18px;
    font-weight: 700;
    line-height: 18px;
    padding: 20px 40px;
    border-radius: 45px;
    text-transform: none;
    letter-spacing: normal;
}
.emr-hero__support { color: #8594A7; font-size: 16px; line-height: 24px; margin: 20px 0 0; max-width: none; }
.emr-hero__photo img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
    object-fit: fill;
}
@media (max-width: 900px) {
    .emr-hero .emr-container.emr-hero__grid { grid-template-columns: 1fr; padding: 0 2%; }
    .emr-hero__photo { display: none; }
    .emr-hero__copy { padding: 32px 10px; }
}

/* Card grids: Areas Serviced + BC tourism */
.emr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 22px; }
.emr-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(17, 42, 82, 0.08);
    text-decoration: none;
    display: flex;
    flex-direction: column;
}
.emr-card img { width: 100%; height: 170px; object-fit: cover; display: block; }
.emr-card__body { padding: 16px 18px 18px; }
.emr-card__body h3 { color: #051441; margin: 0 0 6px; font-size: 1.02rem; }   /* C14 (N25): the card titles are h3 under the band's h2 (they were h4, a skipped level) — the declarations are the h4's, so nothing moves */
.emr-card__links { margin: 0; font-size: 0.86rem; line-height: 1.6; color: #8594A7; }
.emr-card__links a { color: #2795c9; text-decoration: none; }
.emr-card__links a:hover { text-decoration: underline; }
.emr-card--link:hover { box-shadow: 0 14px 34px rgba(17, 42, 82, 0.14); }
.emr-card--link .emr-card__links span { color: #6A7C92; }

/* BC Tourism: their treatment is CIRCULAR photos in white cards, 3 per row */
.emr-cards--bc { grid-template-columns: repeat(3, 1fr); max-width: 980px; margin: 0 auto; }
.emr-cards--bc .emr-card { align-items: center; text-align: center; padding-top: 26px; }
.emr-cards--bc .emr-card img {
    width: 158px;
    height: 158px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto;
}
@media (max-width: 760px) { .emr-cards--bc { grid-template-columns: 1fr 1fr; } }

/* "Quick Links" subheading — sits BELOW the Areas Serviced h2 on their site */
.emr-band__quick { color: #051441; font-weight: 600; font-size: 1.05rem; margin: 2px 0 0; }
.emr-card__body h3 a { color: #051441; text-decoration: none; }
.emr-card__body h3 a:hover { color: #2795c9; }

/* About: their two-column composition — living-room photo left with the
   indigo-gradient "20+ Years" card overlapping its right edge (their exact
   gradient + 27px radius, from post-10.css), left-aligned About text right. */
.emr-about__grid {
    display: grid;
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
    gap: 90px;
    align-items: center;
}
.emr-about__visual { position: relative; }
.emr-about__visual > img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 27px;
    object-fit: cover;
}
.emr-about__years {
    position: absolute;
    top: 50%;
    right: -70px;
    transform: translateY(-50%);
    width: 290px;
    padding: 41px 20px 26px;
    border-radius: 27px;
    background: linear-gradient(135deg, #3763EB 0%, #6F58E8 100%);
    color: #ffffff;
    box-shadow: 0 18px 40px rgba(17, 42, 82, 0.22);
}
.emr-about__years h3 { color: #ffffff; font-size: 1.12rem; margin: 0 0 10px; }
.emr-about__years p { color: rgba(255, 255, 255, 0.92); font-size: 0.9rem; line-height: 1.6; margin: 0; }
.emr-about h2 { text-align: left; font-size: 1.9rem; margin: 0 0 16px; }
.emr-about .emr-kicker { text-align: left; }
.emr-about p { color: #6A7C92; line-height: 1.75; margin: 0 0 1.1em; }
@media (max-width: 900px) {
    .emr-about__grid { grid-template-columns: 1fr; gap: 26px; }
    .emr-about__years { position: static; transform: none; width: auto; margin-top: -40px; margin-left: 24px; margin-right: 24px; }
}

/* List-With-Us CTA: their full-width purple photo band (cta-bg.jpg, their own
   asset self-hosted) — white copy left, pill button right. */
.emr-cta {
    background-size: cover;
    background-position: center;
    padding: 84px 0;
}
.emr-cta__grid { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.emr-cta__copy { max-width: 640px; }
.emr-cta h2 { color: #ffffff; text-align: left; margin: 0 0 12px; }
.emr-cta .emr-band__sub { color: rgba(255, 255, 255, 0.88); margin: 0; max-width: 560px; }
.emr-kicker--onphoto { color: #cfe3ff; }
.emr-cta__action { margin: 0; }
.emr-btn--pill { border-radius: 100px; padding: 14px 34px; }

/* Testimonials: heading left, one rotating quote right — their carousel. */
.emr-quotes__grid {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}
.emr-quotes__head h2 { text-align: left; font-size: 1.9rem; margin: 0; }
.emr-quotes__head .emr-kicker { text-align: left; }
.emr-quotes__carousel { position: relative; min-height: 220px; }
.emr-quote {
    margin: 0;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    inset: 0 0 auto 0;
    transition: opacity 0.45s ease;
    text-align: center;
    padding: 0 30px;
}
.emr-quote.is-current { opacity: 1; visibility: visible; position: relative; }
.emr-quote p { color: #51607a; line-height: 1.75; margin: 0 0 14px; font-size: 1rem; font-style: italic; }
.emr-quote cite { color: #051441; font-style: normal; font-weight: 600; font-size: 0.9rem; }
.emr-quotes__dots { text-align: center; margin-top: 18px; }
.emr-quotes__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    margin: 0 5px;
    background: #c3cede;
    cursor: pointer;
}
.emr-quotes__dot.is-current { background: #051441; }
@media (max-width: 900px) {
    .emr-quotes__grid { grid-template-columns: 1fr; gap: 20px; }
    .emr-quotes__head h2, .emr-quotes__head .emr-kicker { text-align: center; }
}

/* Licence band: removed (C14 §268) — its text is the footer's first column, printed once, as on their page. */

/* ==========================================================================
   PLUGIN-SURFACE REPLICA (S179) — the listing page and property page styled
   to match emrvacationrentals.com EXACTLY, from a forensic capture of their
   live pages (computed styles, 2026-08-24). Their engine is HomeRunner; the
   values below are THEIR rendered numbers, not approximations:
     card: #fff, radius 0, shadow 0 5px 15px rgba(0,0,0,.08), body pad 20px
     photo: 16:9 cover (680x378 at their width)
     title: 16px/600 #051441 · price line 16px, strong #222
     meta pills: radius 20, 8x14 pad, 14px #222 · icon row 16px/400 #212529
     detail page: no tab bar, navy section heads with a hairline rule,
     3-col checkmark amenities, white bordered booking card
   ========================================================================== */

/* ── Property TILES: DELIBERATELY NOT RESTYLED (S184) ──────────────────────
   S179 restyled the result cards to their card anatomy (square white cards,
   16:9, reordered body, pill row, 2-col grid beside a 44% map). The owner
   reverted it: "only copy the SITE elements, keep the Lexaily tile appearance
   the same." The cards and the results grid render from the base sheet —
   do not reintroduce card rules here. Chrome (header/topbar/footer/strip),
   page heads and the property page remain replicated; the tiles are ours. */

/* Results bar: white, plain — their "N Properties · sort · HIDE MAP" strip.
   The bar's own "Vacation Rentals" title is HIDDEN: the listing_head band
   already carries the page's one H1, and their page has exactly one. */
.lx-next .lx-resultsbar { background: #ffffff; border: 0; }
.lx-next .lx-results-title { display: none; }

/* ── Property page: DELIBERATELY NOT RESTYLED (S184) ──────────────────────
   S179 replicated their property page here (tabs hidden, 3-up gallery,
   navy section heads, 3-col checkmark amenities, their booking card). The
   owner reverted it with the tiles: the property surfaces are the Lexaily
   system — bento gallery, tab bar, chip amenities all render from the base
   sheet. Do not reintroduce property-page rules here. (The amenities grid
   rule also mis-captured the bed/bath/sleeps spec row into grid cells —
   gone with the rest.) */

/* == Header polish for EMR's LIGHT chrome (S167; REMEASURED S180) =========
   Their live header: logo renders 250x59; nav is 14px/400 #111 TITLE CASE
   (no uppercase, no letter-spacing — the 12px tracked caps were the demo's
   voice, not theirs), flush RIGHT, with a caret on every dropdown parent. */
/* S183: the §180 rule here was `max-height: 59px` — which can only CAP a
   height, never raise one, so demo-site.css's explicit `height: 40px` on
   .lx-demo-header__logo kept winning and the logo shipped at 171x40 while the
   HANDOFF said 59px. Their live render is width-capped at 250px (59px tall by
   aspect). Two classes to outrank the base rule on the `height` property. */
.lx-demo-header .lx-demo-header__logo {
    height: 59px;
    width: auto;
    max-width: 250px;
}
.lx-demo-header nav { margin-left: auto; }
.lx-demo-header__nav {
    justify-content: flex-end;
    gap: 26px;
}
.lx-demo-header__nav a,
.lx-demo-header__nav .lx-demo-header__navdead {
    font-size: 14px;
    font-weight: 400;
    color: #111111;
    text-transform: none;
    letter-spacing: 0;
}
/* An item with no page yet: same look, nothing to click (§180). */
.lx-demo-header__navdead { cursor: default; }
/* Their caret on dropdown parents */
.lx-demo-header__has-sub > a::after,
.lx-demo-header__has-sub > .lx-demo-header__navdead::after {
    content: "";
    display: inline-block;
    margin-left: 6px;
    width: 7px;
    height: 7px;
    border-right: 1.6px solid #111111;
    border-bottom: 1.6px solid #111111;
    transform: rotate(45deg) translateY(-3px);
}
.lx-demo-header__sub a,
.lx-demo-header__sub .lx-demo-header__navdead {
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
}
.lx-demo-header__sub .lx-demo-header__navdead { color: #8594A7; display: block; padding: 6px 14px; }
.lx-demo-header__navtoggle { color: #051441; }
/* Their header carries no phone pill (both numbers live in the topbar). The
   anchor must stay in the DOM - lx-favorites.js mounts the heart beside
   a.header-phone and falls back to a floating FAB without it - so it is
   hidden, not removed. (2026-08-23 review, item 6) */
.lx-demo-header__phone { display: none; }

/* Search strip, EMR colours (S181 remeasure): their exact #dddfe0 fills,
   black 13px/500 labels, #4BB5E3 SEARCH (the layout lives in demo-site.css;
   this is the skin). Their strip has no rule under it. */
.lx-demo-searchstrip { border-bottom: 0; }
.lx-demo-searchstrip__field > span { color: #000000; font-weight: 500; }
.lx-demo-searchstrip__field select,
.lx-demo-searchstrip__field input { background: #dddfe0; color: #333; }
.lx-demo-searchstrip__field input::placeholder { color: #6a6f73; }
.lx-demo-searchstrip__go,
.lx-demo-searchstrip__filters { background: #4bb5e3; }
@media (max-width: 880px) {
    body.lx-nav-open .lx-demo-header__nav {
        background: #ffffff;
        box-shadow: 0 14px 24px rgba(17, 42, 82, 0.14);
        border-top: 1px solid #ececec;
    }
    body.lx-nav-open .lx-demo-header__nav a {
        color: #051441;
        border-bottom: 1px solid #eef1f6;
    }
}

/* ==========================================================================
   S182 FOOTER — bands 2+3 of emrvacationrentals.com's footer, EVERY value
   remeasured from their live page via computed styles (2026-08-24).

   Their <footer> is four Elementor bands; this is the link columns (their
   band 2) and the social/copyright bar (band 3). Bands 0 (List-With-Us CTA)
   and 1 (Testimonials) stay on the homepage via sites/emr/templates/
   landing.php (§167) by the owner's call — see the manifest _footer_note.

   Markup: sites/emr/templates/chrome-footer.php (a SITE OVERRIDE — the shared
   templates/chrome-footer.php still renders demo/smb byte-for-byte).

   ⚠ CORRECTION TO §164: that pass read the Elementor kit stylesheet and set
   footer links to the body grey #6A7C92. Their RENDERED footer links are the
   accent sky #4BB5E3 — the value the pre-kit pass had right. Measured, not
   inferred; do not "fix" this back to grey.
   ========================================================================== */

/* C14 (§268, N24 — the owner's decision, 2026-10-09): LEGIBLE, in their hues. Their footer's sky links (#4BB5E3) are 2.08:1 on
   this band and its slate body (#8594A7) 2.76:1 — both fail WCAG's 4.5:1 for text. Same hue and saturation, darker: the link is
   #19759e (4.59:1) and the body #5E6F85 (4.58:1). Everything below reads these two tokens. The home page's measured type
   (C2) is not in this footer and is untouched. */
.emr-footer {
    --emr-footer-link: #19759e;
    --emr-footer-body: #5E6F85;
    background: #EFF2F9;
    color: var(--emr-footer-body);
    /* Their band carries no top rule — bands 1 and 2 are the same #EFF2F9, so
       the boundary is invisible on their page. The generic footer's 1px
       #dfe6f0 is therefore removed rather than restyled. */
    border-top: 0;
    padding: 0;
}

/* Their columns are FULL viewport width — no 1140/1240 content cap — four
   equal tracks, 50.89px band padding, 25.44px of left inset. */
.emr-footer__cols {
    display: flex;
    flex-wrap: wrap;
    max-width: none;
    margin: 0;
    gap: 0;
    /* S183: the 51px/25px shipped in S182 were their values AT a 2560 viewport.
       Their Elementor band actually pads 2%/1% OF WIDTH (--padding-top:2%,
       --padding-left:1%), so at any other window a fixed 51px diverges from
       their page while this stays equal. Same finding as the header's 2%. */
    padding: 2% 0 2% 1%;
}
.emr-footer__col {
    flex: 1 1 0;
    min-width: 0;
    padding-right: 25px;
    box-sizing: border-box;
}

/* Headings: 23px/600 Title Case #132730. The generic footer's 9px tracked
   uppercase Poppins was our demo voice and read nothing like theirs. */
.emr-footer__head {
    /* 18, not their nominal 20: their heading sits in an Elementor widget box
       with margin 0, so the 20px THEY measure is box-to-box. Ours carries the
       gap as margin, and the first list line box adds ~2px of half-leading on
       top. Trimmed empirically until heading-bottom → first-link-top measured
       20px, the same number their page reports. */
    margin: 0 0 18px;
    font-family: var(--lx-font-sans);
    font-size: 23px;
    font-weight: 600;
    line-height: 23px;
    letter-spacing: normal;
    text-transform: none;
    color: #132730;
}

.emr-footer__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.emr-footer__list li { margin: 0; }

/* 16px/28.8px sky links. Specificity ties with the §164 `.lx-demo-footer a`
   rule and wins on source order — this block must stay last in the file. */
.emr-footer a {
    font-size: 16px;
    font-weight: 400;
    line-height: 28.8px;
    color: var(--emr-footer-link);   /* was #4BB5E3 (2.08:1) — see the N24 note at the top of this block */
    text-decoration: none;
}
.emr-footer a:hover { color: #051441; }

.emr-footer__logolink {
    display: inline-block;
    /* Same half-leading correction as the column heads: the paragraph that
       follows contributes ~6px of its own leading, so 14 here lands on their
       measured 20px logo-bottom → text-top. */
    margin: 0 0 14px;
}
.emr-footer__logo {
    display: block;
    width: 250px;
    height: 59px;
    max-width: 100%;
}
.emr-footer__brandname {
    margin: 0 0 20px;
    font-size: 23px;
    font-weight: 600;
    color: #132730;
}

/* Their two legal paragraphs sit 44px apart; body copy is 16px/24px #8594A7
   with the registration numbers bolded in the same colour. */
/* The two-class selectors below are deliberate: demo-site.css:615 carries
   `.lx-demo-footer p { line-height: 1.7 }` at (0,1,1), which outranks a single
   class and silently stretched every footer paragraph to 27.2px. Measured
   against theirs at 24px. Do not "simplify" these back to one class. */
.emr-footer .emr-footer__legal {
    margin: 0 0 44px;
    font-size: 16px;
    line-height: 24px;
    color: var(--emr-footer-body);   /* was #8594A7 (2.76:1) */
}
.emr-footer .emr-footer__legal:last-child { margin-bottom: 0; }
.emr-footer__legal strong,
.emr-footer__contactblock strong {
    font-weight: 700;
    color: var(--emr-footer-body);
}

.emr-footer .emr-footer__contactblock {
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 24px;
    color: var(--emr-footer-body);
}
.emr-footer .emr-footer__contactblock:last-child { margin-bottom: 0; }

/* Band 3: social circles left, copyright right, both 44px below the band top;
   80px of tail below them. */
.emr-footer__bottom {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 44px 25px 80px 10px;
    background: #EFF2F9;
}
.emr-footer__social {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.emr-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(106, 124, 146, 0.1);
    color: var(--emr-footer-link);
}
.emr-footer__social svg {
    width: 25px;
    height: 25px;
    fill: currentColor;
}
.emr-footer__social a:hover { background: rgba(75, 181, 227, 0.18); }

.emr-footer .emr-footer__copy {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--emr-footer-body);
    text-align: right;
}

/* Their four-across grid has no mobile rules of its own worth copying (their
   Elementor breakpoint stacks it); stack at our existing 880px chrome break
   so the columns do not crush on a phone. */
@media (max-width: 880px) {
    .emr-footer__cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 40px 20px;
        gap: 32px 0;
    }
    .emr-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 32px 20px 48px;
    }
    .emr-footer__copy { text-align: left; }
}
@media (max-width: 560px) {
    .emr-footer__cols { grid-template-columns: 1fr; }
}

/* ==========================================================================
   S186 LISTING-PAGE HEADS — the page-top chrome of every listing surface,
   remeasured from FIVE of their live pages (all-listings, victoria-bc,
   southern-vancouver-island, waterfront-property, unique-rentals/pets) via
   computed styles, 2026-08-24. CHROME ONLY, per the owner's standing rule:
   the searchbar card, filter buttons, count line, sort select and map toggle
   below these heads are the Lexaily property system and stay untouched.

   THEIR head, on every listing page type:
     eyebrow  32px/600 #051441 lh 38.4 Title Case (an h2-style LINE, not a
              tracked microlabel), collections only
     H1       40px/700 #051441 lh 48, letter-spacing normal, LEFT-aligned
     intro    16px/400 #8594A7 lh 24, paragraphs 24px apart, full width
     links    #4BB5E3 (quicklink row + the bold 16px/700 "Read" toggle)
     band     #EFF2F9 behind the whole head on COLLECTION pages;
              /all-listings/ (our /rentals/) is PLAIN WHITE, no band
     width    full-content container, 2%-of-width gutters (the same Elementor
              2% as the header/topbar/footer — their H1 left edge x=31@1553)
     rhythm   first head line ~15px below the fixed chrome

   ⚠ The !importants below are each fighting an INLINE style in the shared
   collection.php markup (text-align:center, max-width:680/760px, margin
   autos). Restyling via the skin keeps the template byte-identical for the
   demo/smb golden gate — do not "clean up" by removing them.
   ========================================================================== */

/* ── /rentals/ master head (.rr-listing-head): white, tight, their H1 ── */
.rr-listing-head {
    background: #ffffff;
    /* bare 2%, not the header's calc(2% + 10px): their CONTENT containers pad
       2% with no column inset (H1 left edge x=31 at 1553 = 2%). */
    padding: 15px 2% 8px;
}
.rr-listing-head__inner {
    max-width: none;
    margin: 0;
}
.rr-listing-head h1 {
    font-size: 40px;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: normal;
    margin: 0 0 8px;
    color: #051441;
}

/* ── Collection heads: the #EFF2F9 band, left-aligned, full width ── */
.lx-collection__intro.max-width-container {
    max-width: none;
    background: #EFF2F9;
    /* margin:0 kills the inline margin-top:2rem AND the base .lx 20px side
       margins; the .lx-container zeroing below kills its 32px side margins —
       together they put the head's left edge at the bare 2% their content
       containers use (x=31 at 1553), not 93px in. */
    margin: 0 !important;
    padding: 15px 2% 24px;
}
.lx-collection__intro .lx-container {
    max-width: none;
    padding: 0;
    margin: 0;
}
.lx-collection__intro .rr-band__head {
    text-align: left !important;       /* inline text-align:center */
    max-width: none;
}
/* Their eyebrow is a full heading line above the H1 — kill the microlabel
   treatment (11px tracked caps + the ::before dash). */
.lx-collection__intro .rr-band__head .rr-label {
    display: block;
    font-size: 32px;
    font-weight: 600;
    line-height: 38.4px;
    letter-spacing: normal;
    text-transform: none;
    color: #051441;
    margin: 0 0 8px;
}
.lx-collection__intro .rr-band__head .rr-label::before { display: none; }
.lx-collection__intro .rr-band__head h1 {
    font-size: 40px;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: normal;
    color: #051441;
    margin: 0 0 8px;
    text-align: left;
}
.lx-collection__intro .rr-band__sub {
    max-width: none !important;        /* inline max-width:680px */
    margin: 16px 0 0 !important;       /* inline margin:.75rem auto 0 */
    color: #8594A7;
    line-height: 24px;
    text-align: left;
}
.lx-collection__intro .lx-collection__intro-md {
    max-width: none !important;        /* inline max-width:760px */
    margin: 16px 0 0 !important;       /* inline margin:1rem auto 0 */
    line-height: 24px !important;      /* inline line-height:1.7 */
    text-align: left !important;
}
.lx-collection__intro .lx-collection__intro-md p {
    color: #8594A7;
    line-height: 24px;
    margin: 0 0 24px;
}
.lx-collection__intro .lx-collection__intro-md p:last-child { margin-bottom: 0; }
.lx-collection__intro .lx-collection__intro-md a { color: #4BB5E3; }
/* Their "Read" accordion toggle: bold sky, not a grey body link. */
.lx-collection__intro .lx-collection__readmore {
    font-weight: 700;
    color: #4BB5E3 !important;
    text-decoration: none;
}
/* Sub-area quicklink row ("Victoria | Downtown | Sidney | …"): left, sky. */
.lx-collection__intro .lx-collection__quicklinks {
    margin: 16px 0 0 !important;       /* inline margin:1rem auto 0 */
    text-align: left;
    font-size: 16px;
    color: #8594A7;
}
.lx-collection__intro .lx-collection__quicklinks a { color: #4BB5E3; }
.lx-collection__intro .lx-collection__quicklinks span { color: #8594A7; }

/* ==========================================================================
   S189 AREAS SERVICED — remeasured from their live homepage (computed
   styles @1984, 2026-08-25). Their band: FOUR white cards (radius 10, NO
   shadow) in a 1400px boxed row, 24px gaps, on the site-wide #EFF2F9 ground;
   image aspect 326:263 with the radius on top only; H4 title 24px/500 navy
   CENTERED 20px under the photo; sublinks 16px/lh23 sky #4BB5E3 centered,
   comma-separated, 20px under the title. Head: "Areas Serviced" 32px/600
   lh32, "Quick Links" 23px/600 lh23 20px below it, cards 49px below that.
   Scoped away from .emr-cards--bc — the BC Tourism band keeps its own look
   until it is remeasured on its own turn. */
.emr-band--tint { background: #EFF2F9; padding: 49px 0 56px; }   /* bg was #EEF3F9; 49px = their measured hero→heading gap */
.emr-band--tint .emr-container { max-width: 1400px; }
.emr-band--tint .emr-band__head { margin-bottom: 0; }
.emr-band--tint .emr-band__head h2 {
    font-size: 32px;
    font-weight: 600;
    line-height: 32px;
    margin: 0;
}
.emr-band--tint .emr-band__quick {
    font-size: 23px;
    font-weight: 600;
    line-height: 23px;
    color: #051441;
    margin: 20px 0 49px;
}
.emr-cards:not(.emr-cards--bc) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
.emr-cards:not(.emr-cards--bc) .emr-card {
    border-radius: 10px;
    box-shadow: none;
}
.emr-cards:not(.emr-cards--bc) .emr-card:hover { box-shadow: none; }
.emr-cards:not(.emr-cards--bc) .emr-card img {
    height: auto;
    aspect-ratio: 326 / 263;
    border-radius: 10px 10px 0 0;
}
.emr-cards:not(.emr-cards--bc) .emr-card__body {
    padding: 20px 18px 24px;
    text-align: center;
}
.emr-cards:not(.emr-cards--bc) .emr-card__body h3 {
    font-size: 24px;
    font-weight: 500;
    margin: 0 0 20px;
}
.emr-cards:not(.emr-cards--bc) .emr-card__links {
    font-size: 16px;
    line-height: 23px;
    color: #4BB5E3;
}
.emr-cards:not(.emr-cards--bc) .emr-card__links a { color: #4BB5E3; }
/* Route-less places render as <span> (the §180 href:null convention); their
   page links every name, so the spans wear the same sky to read identically. */
.emr-cards:not(.emr-cards--bc) .emr-card__links span { color: #4BB5E3; }
@media (max-width: 1100px) {
    .emr-cards:not(.emr-cards--bc) { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .emr-cards:not(.emr-cards--bc) { grid-template-columns: 1fr; }
}

/* ── §254: their Contact page and their enquiry form ─────────────────────────
   templates/contact.php, templates/lead-page.php, partials/_lead-form.php.
   Their layout: the contact details (two phone numbers, "Virtual Office
   Address", "Social Media") beside the form; on the two form-bearing content
   pages the form closes the page. Inputs are their plain bordered fields with
   the placeholder as the visible label (the <label> is kept for readers);
   the button is this site's own solid blue .rr-btn. NOT yet measured against
   their computed styles element by element — Eric's eye is the gate (§179). */
.emr-contact__grid {
    max-width: 1240px; margin: 0 auto;   /* the chassis band's own measure — lines up with the page heading above */
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start;
}
.emr-contact__phones { list-style: none; margin: 0 0 28px; padding: 0; }
.emr-contact__phones li { margin: 0 0 8px; }
.emr-contact__phones a { color: #111111; font-size: 20px; font-weight: 600; text-decoration: none; }
.emr-contact__phones a:hover { color: #2795c9; }
.emr-contact__h { font-size: 18px; font-weight: 600; line-height: 1.3; color: #111111; margin: 0 0 8px; }   /* C14 (N25): these are h2 now (they were h3 under an h1); the line-height is the h3's, pinned so the tag change moves nothing */
.emr-contact__addr { color: #666666; margin: 0 0 28px; line-height: 1.6; }
.emr-contact__social { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; }
.emr-contact__social a {
    width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: #4BB5E3; color: #fff; transition: background .15s ease;
}
.emr-contact__social a:hover { background: #2795c9; }
.emr-contact__social svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.emr-contact__info--inline { margin: 2rem 0 0; }

.emr-form { position: relative; }
.emr-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.emr-form__field { margin: 0 0 16px; }
.emr-form__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.emr-form input[type="text"], .emr-form input[type="tel"], .emr-form input[type="email"], .emr-form textarea {
    width: 100%; box-sizing: border-box; font-family: var(--lx-font-sans); font-size: 15px; line-height: 1.4; color: #111111;
    background: #fff; border: 1px solid #d5dee4; border-radius: 8px; padding: 12px 14px;
}
.emr-form textarea { resize: vertical; min-height: 130px; }
.emr-form input::placeholder, .emr-form textarea::placeholder { color: #8a949b; }
.emr-form input:focus-visible, .emr-form textarea:focus-visible { outline: 2px solid #0d6efd; outline-offset: 1px; border-color: #0d6efd; }
.emr-form [aria-invalid="true"] { border-color: #b91c1c; }
.emr-form__count { margin: 6px 0 0; font-size: 12.5px; color: #8a949b; text-align: right; }
.emr-form__send { min-width: 140px; justify-content: center; cursor: pointer; }
.emr-form__ok, .emr-form__err, .emr-form__note { display: none; margin: 14px 0 0; font-size: 14.5px; }
.emr-form__ok.is-on { display: block; color: #166534; }
.emr-form__err.is-on { display: block; color: #b91c1c; }
.emr-form__note { display: block; color: #666666; }

.emr-leadpage__form { margin: 2.5rem 0 3rem; padding: 32px; background: #f7fbfe; border: 1px solid #e3f1f8; border-radius: 12px; scroll-margin-top: 120px; }
.emr-leadpage__h { font-size: 24px; font-weight: 600; color: #111111; margin: 0 0 20px; text-align: center; }

@media (max-width: 860px) {
    .emr-contact__grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) {
    .emr-form__row { grid-template-columns: 1fr; gap: 0; }
    .emr-leadpage__form { padding: 22px 18px; }
}

/* ═══ §265 — the strip's filters panel (search_strip.filters_panel), EMR skin (C7) ═══
   The sliders control is the §221 BUTTON (chrome-header.php) and the panel opens
   INSIDE the strip form under the row, so the one Search submits everything. The
   grid and the controls' names are the chassis's; this block is the skin: their
   #dddfe0 fills and black 13px/500 labels for the legends and the unchosen chips,
   #4BB5E3 for the chosen state, the range and the panel's Search — the same blue
   as the strip's SEARCH. Under 900px the chassis hides the icon; here it becomes a
   full-width "Filters" row between Guests and Search, as on tsp. */
.lx-demo-searchstrip__filters { cursor: pointer; border: 0; padding: 0; position: relative; font: inherit; }
.lx-demo-searchstrip__filters.is-open,
.lx-demo-searchstrip__filters.has-filters { background: #2f9fd0; }
.lx-demo-searchstrip__filters:focus-visible { outline: 2px solid #051441; outline-offset: 2px; }
.lx-demo-searchstrip__count { position: absolute; top: 5px; right: 5px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: #ffffff; color: #0d6efd; font-size: 11px; font-weight: 600; line-height: 17px; text-align: center; box-sizing: border-box; }
.lx-demo-searchstrip__panel { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px 32px; margin-top: 8px; padding: 18px 0 2px; border-top: 1px solid #e3e6ea; }
.lx-demo-searchstrip__panel[hidden] { display: none; }
.lx-demo-searchstrip__group { margin: 0; padding: 0; border: 0; min-width: 0; }
.lx-demo-searchstrip__group--wide { grid-column: 1 / -1; }
.lx-demo-searchstrip__group legend { padding: 0; margin: 0 0 8px; font-size: 13px; font-weight: 500; color: #000000; }
.lx-demo-searchstrip__seg { display: flex; flex-wrap: wrap; gap: 6px; }
.lx-demo-searchstrip__seg label { position: relative; cursor: pointer; margin: 0; }
.lx-demo-searchstrip__seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lx-demo-searchstrip__seg span { display: inline-block; box-sizing: border-box; min-width: 46px; padding: 9px 10px; border-radius: 5px; background: #dddfe0; font-size: 13px; font-weight: 500; color: #333333; text-align: center; font-variant-numeric: tabular-nums; }
.lx-demo-searchstrip__seg input:checked + span { background: #4bb5e3; color: #ffffff; }
.lx-demo-searchstrip__seg input:focus-visible + span { outline: 2px solid #051441; outline-offset: 2px; }
.lx-demo-searchstrip__chips { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.lx-demo-searchstrip__check { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: #333333; cursor: pointer; }
.lx-demo-searchstrip__check input { width: 18px; height: 18px; margin: 0; accent-color: #4bb5e3; }
.lx-demo-searchstrip__price { display: grid; gap: 6px; }
.lx-demo-searchstrip__price input[type=range] { width: 100%; max-width: 320px; height: auto; padding: 0; margin: 6px 0; background: transparent; accent-color: #4bb5e3; }
.lx-demo-searchstrip__priceout { font-size: 14px; color: #333333; font-variant-numeric: tabular-nums; }
.lx-demo-searchstrip__panelfoot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid #e3e6ea; }
.lx-demo-searchstrip__clear { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 500; color: #6a6f73; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lx-demo-searchstrip__clear:hover { color: #051441; }
.lx-demo-searchstrip__apply { height: 44px; padding: 0 22px; border: 0; border-radius: 4px; background: #4bb5e3; color: #ffffff; font: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.lx-demo-searchstrip__apply:hover { filter: brightness(0.94); }
@media (max-width: 900px) {
    .lx-demo-searchstrip__filters { display: flex; grid-column: 1 / -1; height: 48px; }
    .lx-demo-searchstrip__filters::after { content: "Filters"; margin-left: 10px; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
    .lx-demo-searchstrip__panel { gap: 16px 24px; padding-top: 16px; }
}
/* ═══ end §265 ═══ */

/* ═══ §268 (C14) — UX upgrades: this block is the SKIN of them ════════════════════════════════════════════════════════
   The owner (2026-10-09): "UX upgrades which follow best practices better, especially for mobile visitors". The upgrades are
   opt-ins of this site's manifest (`ux`, `search_strip.touch`) — markup and behaviour in apps/demo/compat/lx-ux.php and in the
   shared templates behind those flags — so demo, Mt Baker and the WordPress plugin render what they always did. Nothing here
   changes the home page's measured type (C2): the comparison script (computed styles, before/after) reads 0 differences there.
   Tests: tests/emr-ux-test.php reads the named blocks below (tap targets, contrast, heading pins). ═══════════════════════════════ */

/* ── Focus: a visible ring for keyboard users everywhere (E8). :where() keeps the specificity at zero, so every
      component that styles its own focus keeps it. ─────────────────────────────────────────────────────────────────── */
:where(a, button, select, summary, input, textarea, [tabindex]):focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; }

/* ── Contrast (N23, E3): the second grey the skin uses for secondary text — "Showing 1 - 6 of 6", the card's "Add dates for
      your total", the location eyebrow — was #9aa4ab (2.54:1 on white). Same slate, darker: #6b7881 (4.54:1). The first grey
      (--lx-color-ink-2, #6A7C92 → #5E6F85) is set where it was defined, above. ───────────────────────────────────── */
:root { --lx-color-ink-3: #6b7881; }

/* ── Smooth in-page jumps (the sticky bar's "Check availability" scrolls to the booking card), unless the guest asked for
      less motion. ───────────────────────────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ── Heading outline pins (N25) ─────────────────────────────────────────────────────────────────────────────────────
   lx_demo_ux_outline() closes up a page's heading levels under its h1 and keeps the level each heading was WRITTEN at as a
   class (lx-h3 … lx-h6). A re-levelled heading must look as it did: these are the type of the h3/h4/h5/h6 inside the content
   and collection-intro areas (the sheet's own values, read from computed styles before the change), so only the structure moves. */
.lx-content-md .lx-h3, .lx-collection__intro-md .lx-h3 { font-size: 1.4rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.012em; }
.lx-content-md .lx-h4, .lx-collection__intro-md .lx-h4 { font-size: 1rem; font-weight: 400; line-height: 1.35; letter-spacing: -0.08rem; }
.lx-content-md .lx-h5, .lx-collection__intro-md .lx-h5 { font-size: 0.8rem; font-weight: 400; line-height: 1.5; letter-spacing: -0.05rem; }
.lx-content-md .lx-h6, .lx-collection__intro-md .lx-h6 { font-size: 0.6rem; font-weight: 400; line-height: 1.4; letter-spacing: 0; }
.lx-content-md .lx-h3 { margin-top: 1.6em; }
.lx-content-md .lx-h4, .lx-content-md .lx-h5, .lx-content-md .lx-h6,
.lx-collection__intro-md .lx-h3, .lx-collection__intro-md .lx-h4, .lx-collection__intro-md .lx-h5, .lx-collection__intro-md .lx-h6 { margin-top: 0; }

/* The listing page's section headings (Amenities, Bedrooms, Bathrooms, Reviews, Video) are h2 now and the amenity groups h3 —
   they were h3 and h4 under an h1. The type is the old tags': css.css addresses them by tag (`.lx-unit .slider-header h3`,
   `#otheramenities h4`), so the classes the template adds carry the same values. */
.lx-unit .amenities-container > h2.lx-h3,
.lx-unit .slider-header h2.lx-h3 { display: flex; align-items: center; font-size: 24px; font-weight: 800; line-height: 1.3; letter-spacing: normal; color: #111827; margin: 0 0 16px; }
.lx-unit #otheramenities h3.lx-h4 { font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: 0.06em; word-spacing: 2px; color: #6b7280; margin: 22px 0 10px; font-family: inherit; }

/* ── Home: the links in the hero's support line (N1) — new anchors in their sentence, so they need a look: an underlined blue
      that passes 4.5:1 (#0b5ed7 on white is 5.9:1). The sentence's own type is untouched. ─────────────────────────── */
.emr-hero__support a { color: #0b5ed7; text-decoration: underline; text-underline-offset: 3px; }
.emr-hero__support a:hover { color: #051441; }

/* ── 404 (N20) ───────────────────────────────────────────────────────────────────────────────────────────────────── */
.lx-notfound { padding: 72px 20px 88px; text-align: center; }
.lx-notfound h1 { margin: 0 0 28px; }
.lx-notfound__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.lx-notfound__link { min-height: 48px; min-width: 48px; display: inline-flex; align-items: center; justify-content: center; }

/* ── Listing: the summary line under the title (N17-ish) ─────────────────────────────────────────────────────────── */
.lx-unit .lx-unit-summary { margin: 4px 0 12px; font-size: 1.05rem; line-height: 1.55; color: var(--lx-color-ink-2); max-width: 62ch; text-align: left; }

/* ── Results bar (N4, N21): the "Where" segment and the type links ─────────────────────────────────────────────── */
.lx-next #abe-results-search.lx-searchbar .lx-searchbar__fld--where { position: relative; min-width: 210px; min-height: 56px; justify-content: flex-start; padding-top: 9px; }
.lx-next #abe-results-search.lx-searchbar .lx-searchbar__fld--where .lx-searchbar__lbl { position: relative; z-index: 1; pointer-events: none; }
.lx-next #abe-results-search.lx-searchbar .lx-searchbar__where {
    /* the select fills its whole segment, so the segment is ONE target (a label does not open a select on a phone) */
    position: absolute; inset: 0; box-sizing: border-box;
    -webkit-appearance: none; appearance: none;
    width: 100%; min-width: 0; height: 100%; min-height: 44px; margin: 0; padding: 28px 40px 6px 22px;
    border: 0; border-radius: 0; box-shadow: none; cursor: pointer;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6F85' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center; background-size: 14px;
    font-family: var(--lx-font-sans); font-size: var(--lx-text-base); font-weight: var(--lx-weight-medium);
    letter-spacing: -0.01em; color: var(--lx-color-ink);
    text-overflow: ellipsis;
}
.lx-next #abe-results-search.lx-searchbar .lx-searchbar__where:focus-visible { outline: 2px solid var(--lx-color-brand); outline-offset: 2px; }
.lx-next .lx-typebar { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; }
.lx-next .lx-typebar__chip {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 20px;
    border: 1px solid var(--lx-color-line-2); border-radius: 999px; background: var(--lx-color-bg);
    color: var(--lx-color-ink); font-size: var(--lx-text-sm); font-weight: var(--lx-weight-medium); text-decoration: none;
}
.lx-next .lx-typebar__chip:hover { background: var(--lx-color-bg-2); color: var(--lx-color-ink); }
.lx-next .lx-typebar__chip.is-active, .lx-next .lx-typebar__chip.is-active:hover { background: var(--lx-color-brand); border-color: var(--lx-color-brand); color: #ffffff; }
.lx-next .lx-typebar__chip:focus-visible { outline: 2px solid var(--lx-color-brand); outline-offset: 2px; }
@media (max-width: 640px) {
    .lx-next #abe-results-search.lx-searchbar { flex-wrap: wrap; }
    .lx-next #abe-results-search.lx-searchbar .lx-searchbar__fld--where {
        flex: 1 0 100%; min-width: 0; margin-bottom: 4px; border-bottom: 1px solid var(--lx-color-line); border-radius: var(--lx-radius-sm) var(--lx-radius-sm) 0 0;
    }
    .lx-next #abe-results-search.lx-searchbar .lx-searchbar__fld--where + .lx-searchbar__fld { border-left: 0; }
    .lx-next #abe-results-search.lx-searchbar .lx-searchbar__where { padding-left: 12px; }
}

/* ── Gutters on a phone: the listing page spent 35px of a 390px screen on each side (a 20px wrapper margin, then padding on the
      wrapper, the container and the column — four boxes deep), leaving 82% for the text and a 300px calendar of 39px cells. One
      16px gutter, the same for the gallery above and the text below. ──────────────────────────────────────────────── */
@media (max-width: 640px) {
    .max-width-container { width: calc(100% - 32px); }
    .lx.lx-unit.max-width-container { padding-left: 0; padding-right: 0; }
    .lx-unit .lx-container, .max-width-container > .lx-container { margin-left: 0; margin-right: 0; }
    .lx-unit .lx-unit-main-row > .lx-column { padding-left: 0; padding-right: 0; }
}

/* ── Card photos on demand + swipe (N15, N-gallery) ──────────────────────────────────────────────────────────────── */
.lx-next .lx-card__media { touch-action: pan-y; }

/* ── "Show more homes" (ux.js.load_more, N14): the next page is a button the guest presses, so the footer stays reachable ── */
.lx-next .lx-loadmore {
    display: block; margin: 8px auto 28px; min-height: 48px; padding: 0 28px; border: 1.5px solid var(--lx-color-brand); border-radius: 999px;
    background: #ffffff; color: var(--lx-color-brand); font: 600 var(--lx-text-base)/1 var(--lx-font-sans); cursor: pointer;
}
.lx-next .lx-loadmore:hover { background: var(--lx-color-brand-tint); }

/* ── The booking card's sticky bar (the popups' own bar, §218): it steps aside while the card is on screen ──────────── */
.lx-sticky-bar.lx-sticky-bar--rest { transform: translateY(110%); pointer-events: none; }
/* …and on a phone it is TWO rows, not three: the name and price, then the button with the × beside it (the bar was 149px of an
   844px screen once the button grew to a 48px target; the × sat alone on a third row). The button's basis leaves room for the 44px ×. */
@media (max-width: 480px) {
    .lx-sticky-bar__cta { flex: 1 1 calc(100% - 64px); }
    .lx-sticky-bar__close { margin-left: 0; }
}

/* ── Header + menu on a phone: ONE row (the logo and the menu button were wrapping onto two for four pixels), a 44px menu
      button, and a menu panel that scrolls within the screen and ends in a Close the thumb can reach (N-menu) ────── */
.lx-demo-header__navclose { display: none; }
@media (max-width: 880px) {
    .lx-demo-header { flex-wrap: nowrap; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
    .lx-demo-header .lx-demo-header__logo { height: 44px; max-width: 188px; width: auto; }
    .lx-demo-header nav { margin-left: 0; }
    .lx-demo-header__actions { margin-left: auto; gap: 0; }
    .lx-demo-header__navtoggle { min-width: 44px; min-height: 44px; padding: 0; align-items: center; justify-content: center; }
    .lx-demo-header .lx-fav-headerbtn { min-width: 44px; min-height: 44px; }
    /* justify-content: flex-start — the desktop rule's flex-end, in a column that scrolls, pushes the overflow ABOVE the top edge, where
       no scrolling reaches: "Info" and "Vacation Rentals" would be unreachable. */
    body.lx-nav-open .lx-demo-header__nav { justify-content: flex-start; max-height: calc(100vh - 170px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 0; }
    body.lx-nav-open .lx-demo-header__nav a,
    body.lx-nav-open .lx-demo-header__nav .lx-demo-header__navdead { min-height: 44px; display: flex; align-items: center; box-sizing: border-box; }
    body.lx-nav-open .lx-demo-header__navclose { display: block; position: sticky; bottom: 0; margin-top: 4px; padding: 10px 0 14px; background: #ffffff; border-top: 1px solid #eef1f6; }
    .lx-demo-header__navclosebtn {
        width: 100%; min-height: 48px; border: 1px solid #d5dee4; border-radius: 8px; background: #ffffff; color: #051441;
        font: 600 15px/1 var(--lx-font-sans); cursor: pointer;
    }
}
@supports (height: 100dvh) { @media (max-width: 880px) { body.lx-nav-open .lx-demo-header__nav { max-height: calc(100dvh - 170px); } } }

/* ── The search strip on a phone (search_strip.touch): the compact bar on inner pages, the filters as a bottom sheet ──── */
.lx-demo-searchstrip__toggle { display: none; }
.lx-demo-searchstrip__sheethead { display: none; }
.lx-sheet-backdrop { position: fixed; inset: 0; z-index: 999; background: rgba(5, 20, 65, 0.45); }
@media (max-width: 640px) {
    .lx-demo-searchstrip--compact { padding: 8px 16px; }
    .lx-demo-searchstrip--compact .lx-demo-searchstrip__toggle {
        display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 16px; border: 0; border-radius: 8px;
        background: #dddfe0; color: #111111; font: 600 15px/1 var(--lx-font-sans); text-align: left; cursor: pointer;
    }
    .lx-demo-searchstrip__toggle span { flex: 1 1 auto; }
    .lx-demo-searchstrip__chev { transition: transform 0.15s ease; }
    .lx-demo-searchstrip--compact.is-open .lx-demo-searchstrip__chev { transform: rotate(180deg); }
    .lx-demo-searchstrip--compact:not(.is-open) .lx-demo-searchstrip__inner { display: none; }
    .lx-demo-searchstrip--compact.is-open .lx-demo-searchstrip__inner { padding-left: 0; padding-right: 0; margin-top: 10px; }
    body.lx-sheet-open { overflow: hidden; }
    .lx-demo-searchstrip__panel:not([hidden]) {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; margin: 0; padding: 0 16px;
        max-height: 86vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
        grid-template-columns: 1fr; gap: 18px 0; align-content: start;
        background: #ffffff; border-top: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 34px rgba(5, 20, 65, 0.28);
    }
    .lx-demo-searchstrip__sheethead {
        display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 2;
        padding: 10px 0 6px; background: #ffffff; grid-column: 1 / -1;
    }
    .lx-demo-searchstrip__sheettitle { font-size: 18px; font-weight: 600; color: #051441; }
    .lx-demo-searchstrip__sheetclose {
        display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-right: -10px;
        border: 0; border-radius: 50%; background: transparent; color: #051441; cursor: pointer;
    }
    .lx-demo-searchstrip__panel:not([hidden]) .lx-demo-searchstrip__panelfoot {
        position: sticky; bottom: 0; z-index: 2; margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: #ffffff;
    }
}
@supports (height: 100dvh) { @media (max-width: 640px) { .lx-demo-searchstrip__panel:not([hidden]) { max-height: 86dvh; } } }

/* ── TAP TARGETS ≥ 44px — the strip, the filters, the cards, the booking card (N-tap) ───────────────────────────────────
   On a touch screen or under 900px (the tests read this block: every selector named here carries a 44px minimum). WCAG 2.5.5
   asks 44 CSS px; 2.5.8's 24px is the floor. Where the visible control is smaller than its box (an icon, a chip) the box grows
   and the drawing stays put, or the control's whole field is made the target. ═════════════════════════════════════════ */
/* ═══ tap targets: begin ═══ */
@media (pointer: coarse), (max-width: 900px) {
    /* the home/inner strip */
    .lx-demo-searchstrip__field select,
    .lx-demo-searchstrip__field input[type="text"],
    .lx-demo-searchstrip__field input[type="number"],
    .lx-demo-searchstrip__filters,
    .lx-demo-searchstrip__go,
    .lx-demo-searchstrip__apply,
    .lx-demo-searchstrip__clear,
    .lx-demo-searchstrip__check,
    .lx-demo-searchstrip__sheetclose,
    .lx-demo-searchstrip__toggle { min-height: 44px; }
    .lx-demo-searchstrip__seg span { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
    .lx-demo-searchstrip__clear { padding: 0 8px; }
    .lx-demo-searchstrip__sheetclose { min-width: 44px; }
    .lx-demo-searchstrip__check input { width: 22px; height: 22px; }

    /* the results bar */
    .lx-next .lx-searchbar__fld { min-height: 44px; }
    .lx-next #abe-filters-activator.lx-searchbar__go { min-height: 44px; }
    .lx-next #reset-button.lx-searchbar__reset { min-height: 44px; }
    .lx-next .lx-toggle button { min-height: 44px; min-width: 44px; }
    .lx-next .lx-sort__select { min-height: 44px; }

    /* the cards */
    .lx-next .lx-card__title a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; }
    .lx-next .lx-card .lx-savings-tip { min-width: 44px; min-height: 44px; margin: -9px; }
    .lx-next .lx-card__nav { min-width: 44px; min-height: 44px; }
    .lx-next .lx-card__fav { min-width: 44px; min-height: 44px; }

    /* the filters drawer */
    .lx-next #modalOverlay .lx-filters-wrapper .lx-filter-close { min-width: 44px; min-height: 44px; width: 44px; height: 44px; }
    .lx-next #modalOverlay .lx-filters-wrapper .be-counter-btn { min-width: 44px; min-height: 44px; width: 44px; height: 44px; }
    .lx-next #modalOverlay .be-mode-btn { min-height: 44px; padding-left: 14px; padding-right: 14px; }
    .lx-next #modalOverlay #lx-price-max { min-height: 44px; }
    .lx-next #modalOverlay .lx-filters-actions .button { min-height: 48px; }

    /* the listing's booking card: each date field is ONE target, the whole box */
    #checkavailbox.lx-next .lx-bookcard__field { position: relative; min-height: 56px; }
    #checkavailbox.lx-next .lx-bookcard__field input#check-in-display,
    #checkavailbox.lx-next .lx-bookcard__field input#check-out-display {
        position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 26px 12px 8px; cursor: pointer;
    }
    #checkavailbox.lx-next .lx-bookcard__field small { position: relative; z-index: 1; pointer-events: none; }
    #checkavailbox.lx-next .lx-bookcard__guests { min-height: 56px; }
    #checkavailbox.lx-next #check-avail-button,
    #checkavailbox.lx-next #booklink-main,
    #checkavailbox.lx-next #contact-us-btn { min-height: 48px; }
    #checkavailbox.lx-next .lx-detailed-quote .lx-quote-toggle { min-height: 44px !important; }
    .lx-next .lx-calendar__day { min-height: 44px; }

    /* the listing's own links and the sticky bar */
    #top-links a, #top-links .favorite { display: inline-flex; align-items: center; min-height: 44px; }
    #allamenitiesbtn { min-height: 44px; }
    .lx-sticky-bar__cta { display: flex; align-items: center; justify-content: center; min-height: 48px; }
    .lx-sticky-bar__close { min-width: 44px; min-height: 44px; }

    /* the top bar's phone numbers and links (they were 15px tall): two rows of 44px, packed — the row gap and the bar's own
       padding give way so the bar costs 88px, not 114 */
    .lx-demo-topbar__phones a, .lx-demo-topbar__links a { display: inline-flex; align-items: center; min-height: 44px; }
    .lx-demo-topbar__inner { row-gap: 0; padding-top: 0; padding-bottom: 0; }

    /* the strip's price slider, the map's zoom buttons, the contact page's social circles */
    .lx-demo-searchstrip__price input[type="range"] { min-height: 44px; }
    .lx-next .leaflet-touch .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }
    .emr-contact__social a { width: 44px; height: 44px; }
}
/* the footer's link columns and its phone numbers: a 44px row each, on a phone (their desktop footer is untouched) */
@media (max-width: 880px) {
    .emr-footer__list a,
    .emr-footer__contactblock a,
    .emr-footer__portal a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* ═══ tap targets: end ═══ */

/* ── The filters drawer's Close beside Clear / Apply (ux.filters_close) ─────────────────────────────────────────────── */
.lx-next #modalOverlay #lx-filters-close-bottom.lx-btn-close {
    margin-top: 0; flex: 0 0 auto; width: auto; min-height: 44px; padding: 13px 18px;
    background: #fff; color: var(--lx-color-ink-2); border: 1px solid var(--lx-color-line-2); border-radius: var(--lx-radius-md);
    font-family: var(--lx-font-sans); font-weight: var(--lx-weight-medium); font-size: var(--lx-text-base); cursor: pointer;
}
.lx-next #modalOverlay #lx-filters-close-bottom.lx-btn-close:hover { background: var(--lx-color-bg-2); color: var(--lx-color-ink); }
/* ═══ end §268 ═══ */

/* ═══ C15 (§268): the Discounts page — their cards (emrvacationrentals.com/discounts/, measured 2026-10-09) ═══
   Their page: a two-column head (the copy 44%, a photo 60% with 15px corners), then white cards three to a row —
   a #424242 bar with the dates in white, the home's photo, a #4BB5E3 band with USE CODE in #EEF9EF, the name
   centred in their heading navy, the home line and the offer in #404C6F, a gradient pill (#0057cd → #0d6efd) to
   copy the code and an outline pill to view the listing — then the terms on the page grey and a centred "Never
   Miss a Discount" band with two solid pills. Values are theirs (post-129410.css and the kit's globals); the
   terms' grey is C14's legible #5E6F85 (4.58:1 on #EFF2F9) instead of their #8594A7. Every selector is scoped
   under .emr-discounts so the chassis's own p / h / li spacing (.lx-next p …) never reaches a card. Markup:
   sites/emr/templates/discounts.php. */
.emr-discounts { margin-top: 1.5rem; }
.emr-discounts .emr-discounts__head { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); gap: 32px 48px; align-items: center; padding: 1% 0 3%; text-align: left; }
.emr-discounts .emr-discounts__head h1 { font-size: 2.25rem; line-height: 1.15; color: #051441; font-weight: 700; margin: 0 0 16px; text-align: left; }
.emr-discounts .emr-discounts__sub { color: #404C6F; font-size: 16px; line-height: 1.6; margin: 0 0 22px; max-width: none; text-align: left; }
.emr-discounts .emr-discounts__tag { font-size: 1.3rem; line-height: 1.3; font-weight: 600; color: #051441; margin: 0; text-align: left; }
.emr-discounts .emr-discounts__photo img { width: 100%; height: auto; border-radius: 15px; display: block; }
.emr-discounts .emr-discounts__lead { margin: 0 0 24px; }
.emr-discounts .emr-discounts__band { background: #ffffff; padding: 2% 0 3%; }
.emr-discounts .emr-discounts__empty { text-align: center; color: #5E6F85; margin: 24px 0; }
.emr-discounts .emr-discounts__grid { list-style: none; margin: 0; padding: 12px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 20px; }
.emr-discounts .emr-discount { list-style: none; margin: 0; padding: 0; }
.emr-discounts .emr-discount::marker { content: none; }
.emr-discounts .emr-discount__card { background: #ffffff; border-radius: 12px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.28); overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.emr-discounts .emr-discount__dates { margin: 0; background: #424242; color: #ffffff; text-align: center; font-size: 1rem; font-weight: 600; line-height: 1.3; padding: 11px 12px 12px; }
.emr-discounts .emr-discount__photo { display: block; margin: 0; line-height: 0; }
.emr-discounts .emr-discount__photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.emr-discounts .emr-discount__code { margin: 0; background: #4BB5E3; color: #EEF9EF; display: flex; align-items: center; gap: 12px; padding: 8px 16px; line-height: 1.2; }
.emr-discounts .emr-discount__codelabel { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.emr-discounts .emr-discount__codeval { font-size: 1.12rem; font-weight: 600; letter-spacing: 0.02em; }
.emr-discounts .emr-discount__body { padding: 20px 5% 6px; text-align: center; flex: 1 0 auto; }
.emr-discounts .emr-discount__name { font-size: 1.1rem; line-height: 1.3; font-weight: 700; color: #051441; margin: 0 0 10px; text-align: center; }
.emr-discounts .emr-discount__name a { color: inherit; text-decoration: none; }
.emr-discounts .emr-discount__name a:hover { color: #0057cd; text-decoration: none; }
.emr-discounts .emr-discount__details { color: #404C6F; font-size: 15px; line-height: 1.5; margin: 0 0 12px; text-align: center; }
.emr-discounts .emr-discount__offer { color: #404C6F; font-size: 15px; line-height: 1.5; margin: 0; text-align: center; }
.emr-discounts .emr-discount__offer strong { color: #404C6F; font-weight: 700; }
.emr-discounts .emr-discount__offer--whole { font-weight: 600; }
.emr-discounts .emr-discount__actions { display: flex; justify-content: space-between; align-items: center; gap: 10px 12px; flex-wrap: wrap; padding: 16px 5% 22px; }
.emr-discounts .emr-discount__copy,
.emr-discounts .emr-discount__view {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 12px 24px;
    border-radius: 50px; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.2;
    text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; cursor: pointer; transition: opacity 0.2s ease, background-color 0.2s ease, transform 0.1s ease;
}
.emr-discounts .emr-discount__copy { background: linear-gradient(90deg, #0057cd 0%, #0d6efd 100%); color: #ffffff; border: 0; }
.emr-discounts .emr-discount__copy:hover { opacity: 0.9; }
.emr-discounts .emr-discount__copy:active { transform: scale(0.95); }
.emr-discounts .emr-discount__copy.is-copied { background: #054A91; }
.emr-discounts .emr-discount__view { background: transparent; color: #0057cd; border: 1px solid rgba(194, 198, 216, 0.6); }
.emr-discounts .emr-discount__view:hover { background: rgba(218, 226, 255, 0.3); color: #0057cd; text-decoration: none; }
.emr-discounts .emr-discount__view:active { transform: scale(0.95); }
.emr-discounts .emr-discount__copied { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.emr-discounts .emr-discounts__spineterms { margin: 28px auto 0; color: #5E6F85; font-size: 14.5px; line-height: 1.6; }
.emr-discounts .emr-discounts__terms { background: #EFF2F9; padding: 34px 0 30px; }
.emr-discounts .emr-discounts__terms .lx-content-md { color: #5E6F85; font-size: 14.5px; line-height: 1.6; text-align: left; }
.emr-discounts .emr-discounts__terms .lx-content-md p,
.emr-discounts .emr-discounts__terms .lx-content-md ul { margin: 0 0 12px; }
.emr-discounts .emr-discounts__terms .lx-content-md ul { padding-left: 1.2rem; }
.emr-discounts .emr-discounts__cta { background: #f6f8fc; padding: 56px 0 64px; text-align: center; }
.emr-discounts .emr-discounts__cta .lx-content-md h2 { font-size: 2rem; line-height: 1.2; font-weight: 600; color: #051441; margin: 0 0 10px; text-align: center; }
.emr-discounts .emr-discounts__cta .lx-content-md p { color: #404C6F; font-weight: 600; margin: 0 0 26px; text-align: center; }
.emr-discounts .emr-discounts__buttons { display: flex; justify-content: center; align-items: center; gap: 20px 160px; flex-wrap: wrap; }
.emr-discounts .emr-discounts__buttons .lx-md-cta { margin: 0; }
.emr-discounts .emr-discounts__cta .lx-content-md .lx-md-cta a {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 28px;
    background: linear-gradient(90deg, #0057cd 0%, #0d6efd 100%); color: #ffffff; border: 0; border-radius: 50px;
    font-size: 14px; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.05em;
}
.emr-discounts .emr-discounts__cta .lx-content-md .lx-md-cta a:hover { opacity: 0.9; background: linear-gradient(90deg, #0057cd 0%, #0d6efd 100%); color: #ffffff; }
@media (max-width: 1023px) {
    .emr-discounts .emr-discounts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
    .emr-discounts .emr-discounts__head { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .emr-discounts .emr-discounts__head h1 { font-size: 1.9rem; }
}
@media (max-width: 699px) {
    .emr-discounts .emr-discounts__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .emr-discounts .emr-discount__actions { flex-direction: column; justify-content: center; }
    .emr-discounts .emr-discount__copy, .emr-discounts .emr-discount__view { width: 100%; max-width: 260px; }
    .emr-discounts .emr-discounts__buttons { flex-direction: column; gap: 14px; }
    .emr-discounts .emr-discounts__cta .lx-content-md h2 { font-size: 1.6rem; }
}
/* ═══ end C15 ═══ */