/* ============================================================ LIVING COASTAL — /search RESULTS-PAGE TOP (hero + results header) 2026-07-18 · WPCodeBox: own CSS snippet (e.g. "CSS - Search results page top") Pairs with: lc-results-header.js (dynamic header) + the hero-text widget. Robust hooks: `.brxe-section:has(.lc-search-top-widget)` = the search section (verified matches exactly 1). Avoids brittle Bricks IDs. ============================================================ */ /* ---- HERO: coastal photo band + trimmed copy 2026-07-23 --------- A purpose-made WIDE, SHORT Gulf panorama (white sand + turquoise water + sky, ~4:1). The band is only ~235px tall and the search card covers the centre ~1180px, so a normal photo shows as random slivers; a continuous horizon panorama reads well in any slice. Overlay kept light (~25%) or the photo washes out. Band stays SLIM (16px) — do NOT add height (vertical space is precious). The hero COPY is dropped (the dynamic results header carries location + count; the FBS plugin prints the IDX attribution at the results bottom). To swap the image, replace the url with another wide horizon pano. */ .brxe-section:has(.lc-search-top-widget){ background: linear-gradient(180deg, rgba(20,30,60,.26), rgba(20,30,60,.16)), url("https://livingcoastal.com/wp-content/uploads/2026/07/search-hero-pano-v2.jpg") center / cover no-repeat !important; padding-top:16px !important; padding-bottom:16px !important; /* slim — preserve vertical space */ } /* GUARD (2026-08-02): the hero rule above keys off "section contains a search widget", which was safe while the ONLY such section was the slim template band. Once page 3891 started rendering its own tree, its section held the search widget AND the results AND the post content — so it matched too, and the panorama was painted behind the whole 2,647px page instead of a 235px band. A section that also contains the RESULTS is by definition the content section, never the hero, so exclude it explicitly. */ .brxe-section:has(.lc-search-top-widget):has(.flexmls_connect__search_results_v2), .brxe-section:has(.lc-search-top-widget):has(.brxe-post-content){ background:none !important; padding-top:0 !important; padding-bottom:0 !important; } /* The RESULTS section's own top padding (Bricks default ~100px) showed as a dead gap between the hero band and Lacey's row. It used to be zeroed as a side effect of the guard above — but that guard only matches a section that CONTAINS a search widget, and page 3891's section stopped containing one when the duplicate Sidebar was removed (2026-08-02). Trim it directly instead of relying on the guard, so it can't drift back if the page tree changes again. */ body.flexmls_connect__search_results_page .brxe-section:has(.brxe-post-content){ padding-top:18px !important; } /* trim the hero copy + collapse the now-empty hero-copy widget */ .lc-search-hero-text, .lc-idx-standing-disclaimer, .lc-search-top-widget:has(.lc-search-hero-text){ display:none !important; } /* ---- DETAIL PAGE: hide the search card entirely 2026-07-24 -------- The single-listing page shares the results template, so the whole hero search section leaks onto it. On a property page you're viewing, not searching — hide it. (Detected by the plugin's body class; lc-results-header.js also skips its injection there.) */ body.flexmls_connect__listing_details_page .brxe-section:has(.lc-search-top-widget){ display:none !important;} /* ---- DETAIL PAGE: tighten the vertical rhythm 2026-07-30 -------- Brad (2026-07-22): the property page "seems a bit spacious and not clean." ROOT CAUSE — it's OUR css, not the plugin's. Snippet 23 ("CSS — Listing Section design system") sets an UNSCOPED `.listing-section{padding-top:75px}` for the /living/ city pages, and the FlexMLS plugin happens to use that same class name on every detail-page section. Measured on a live listing: 10 sections x (75px padding + 20px margin) = ~950px of pure air on a 4,050px page — about a quarter of the page. Fixed HERE rather than in snippet 23 so the /living/ pages keep their own generous rhythm untouched; scoped to the plugin's detail widget so it can only ever affect this surface. ~28px reads as deliberate spacing at this density instead of sprawl, and reclaims roughly 450px. */ body.flexmls_connect__listing_details_page .flexmls-listing-details .listing-section{ padding-top:28px !important; margin-bottom:0 !important;} /* THE BIG TOP GAP (measured 2026-07-30): the Bricks SECTION that wraps the content carries `padding-top:100px; padding-bottom:100px`. On the results view the search hero sits above it so it never reads as empty — but on a detail page we hide that hero, leaving 100px of nothing between the site header and "← Back to search". This is a Bricks section, NOT a .listing-section, which is why tightening the section rhythm alone didn't touch it. */ body.flexmls_connect__listing_details_page .brxe-section:has(.brxe-post-content){ padding-top:18px !important; padding-bottom:48px !important;} /* the first row (Back to search / Contact agent) had ~130px of dead space above it — the plugin's own top offset plus our inherited padding */ body.flexmls_connect__listing_details_page .flexmls-listing-details > .flexmls-actions-wrapper.listing-section{ padding-top:6px !important;} /* the address + price block sits right under that row, not a screen below it */ body.flexmls_connect__listing_details_page .flexmls-listing-details .top-info-wrapper{ padding-top:10px !important;} /* THE LISTING HEADER BLOCK (Brad, 2026-07-30: "takes a LOT of vertical space"). Measured at 83px tall for what is one line of information. Cause: the RIGHT column stacked the price (24px) ABOVE the ★/⊘ cart icons (32px, float:right), while the LEFT column (the address) is only ~35px — so nearly half the block was empty space sitting under the address. Laying price + icons out as a single right-aligned row collapses it to one line, and puts the Save/Hide icons beside the price where they're actually noticeable instead of orphaned below it. */ /* ONE-ROW LISTING HEADER (Brad, 2026-07-30). lc-results-header.js moves the "← Back to search" link into this row; everything then sits on a single line: [← Back] [Address] .......... [$Price ★ ⊘] align-items:center fixes the baseline mismatch Brad spotted (the price column was sitting lower than the address). The back link drops to 14px so it reads as the utility it is rather than competing with the address. */ /* nowrap on desktop: with wrap enabled the address block grew to fill the line (1151px of a 1274px row) and bumped the price column onto a second row, which is the misalignment Brad saw. nowrap + min-width:0 lets the address shrink instead so all three stay on one line. Mobile re-enables wrapping below. */ /* align-items:BASELINE, not center. The row mixes a 25px address, a 20px price and a 14px link; centring their BOXES still left the text sitting at three different heights, which is the misalignment Brad kept seeing. Baseline lines the actual type up. The price wrapper is itself a flex row with its own align-items:center, so the ★/⊘ glyphs stay centred against the price text. 32px column gap: 16px read as "butted up" against a long address. */ body.flexmls_connect__listing_details_page .title-and-details-wrapper{ display:flex !important; align-items:baseline !important; flex-wrap:nowrap !important; gap:4px 32px !important;} /* ORDER (Brad, 2026-07-30): title hard-left with the price beside it, and the back link banished to the far right — [Address] [$Price ★ ⊘] ................... [← Back to search] Previously the back link sat FIRST, which shoved the address off the left edge, and its underlined 14px text sat visibly lower than the 25px address even though the flex row centred them. Moving it to the right removes the mismatch entirely and gives the address the left edge it should own. Done with `order` rather than re-inserting in the DOM, so the link keeps its position in the tab sequence right after the heading. */ body.flexmls_connect__listing_details_page .title-and-details-wrapper > .lc-back-link{ order:3 !important; flex:0 0 auto !important; margin-left:auto !important; font-size:14px !important; white-space:nowrap !important;} /* address: hard left, and only as wide as it needs (no grow, or it would push the price away from the title again) */ body.flexmls_connect__listing_details_page .title-and-details-wrapper > *:not(.lc-back-link):not(.price-and-actions-wrapper){ order:1 !important; flex:0 1 auto !important; min-width:0 !important; /* shrink to the address text. Left alone, this block measured 813px wide for ~370px of text, which is the dead gap Brad saw between the title and the price. max-content sizes it to the address; max-width keeps a very long address from overflowing the row. */ width:max-content !important; max-width:100% !important;} body.flexmls_connect__listing_details_page .title-and-details-wrapper .property-title{ width:auto !important;} /* the emptied "Back to search" section — hidden only once the link has actually been relocated, so a JS failure can never strand the visitor with no way back. The plugin's original Contact-agent button stays inside it and still receives our proxied .click() (programmatic clicks work on hidden elements). */ body.lc-detail-condensed.flexmls_connect__listing_details_page .flexmls-listing-details > .flexmls-actions-wrapper.has-return-button{display:none !important;} /* price + Save/Hide icons ride directly beside the address, not floated right */ /* width:auto overrides the plugin's fixed 322.5px on this wrapper — with the Save/Hide labels widening the cart, that fixed box squeezed the glyphs back against the price and they collided. */ body.flexmls_connect__listing_details_page .price-and-actions-wrapper{ order:2 !important; flex:0 0 auto !important; margin-left:0 !important; width:auto !important; min-width:0 !important; display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:16px !important;} /* the cart holds two labelled controls now, not two bare glyphs — let it size to content and give the Save/Hide pair real separation from each other */ body.flexmls_connect__listing_details_page .listing_cart{ width:auto !important; min-width:0 !important; flex:0 0 auto !important; display:flex !important; align-items:center !important; gap:14px !important;} body.flexmls_connect__listing_details_page .listing_cart .flexmls_portal_cart_handle i{ position:static !important; float:none !important;} body.flexmls_connect__listing_details_page .price-and-actions-wrapper .actions-wrapper{ height:auto !important; width:auto !important; flex:0 0 auto !important;} body.flexmls_connect__listing_details_page .price-and-actions-wrapper .listing_cart{ float:none !important; margin:0 !important;} /* and pull the agent unit up against the address block */ body.flexmls_connect__listing_details_page .lc-detail-agent{margin-top:12px !important;} /* LABEL THE ★ / ⊘ ICONS (2026-07-30). They shipped as bare grey glyphs beside the price with only a hover title — and "Save" is a registration path, i.e. a lead event, that nobody could identify. Labels are CSS ::after inside the plugin's own click target (a ), so portal.js's handler and its Value lookups are untouched — no DOM mutation at all. */ body.flexmls_connect__listing_details_page .listing_cart .flexmls_portal_cart_handle{ display:inline-flex !important; align-items:center !important; gap:5px !important; cursor:pointer !important;} body.flexmls_connect__listing_details_page .listing_cart .flexmls_portal_cart_handle::after{ font-family:'Mulish',sans-serif; font-size:12.5px; font-weight:700; color:#6b6f76; line-height:1;} body.flexmls_connect__listing_details_page .listing_cart .Favorites::after{content:"Save";} body.flexmls_connect__listing_details_page .listing_cart .Rejects::after{content:"Hide";} body.flexmls_connect__listing_details_page .listing_cart .flexmls_portal_cart_handle:hover::after{ color:#334376;} /* REPEAT CTA at the foot of the listing (2026-07-30). The page runs ~3,000px with its only CTA at the very top, so a visitor who has actually read the description and paged through the photos — the warmest lead on the site — has nothing on screen to act on. Same component idea as the /search repeat band. Injected before .compliance-section by lc-results-header.js. */ .lc-detail-repeat{display:flex !important; align-items:center !important; gap:20px !important; flex-wrap:wrap !important; margin:26px 0 0 !important; padding:18px 22px !important; background:linear-gradient(96deg,#f4f7fc,#eef3fb) !important; border:1px solid #d3dcec !important; border-left:4px solid #d0a667 !important; border-radius:12px !important; font-family:'Mulish',sans-serif !important;} .lc-detail-repeat .lc-dr-copy{flex:1 1 320px; min-width:0;} .lc-detail-repeat .lc-dr-head{margin:0 0 4px !important; font-family:'Montserrat',sans-serif !important; font-size:18px !important; line-height:1.25 !important; font-weight:730 !important; color:#334376 !important;} .lc-detail-repeat .lc-dr-sub{margin:0 !important; font-size:13.5px !important; color:#5d6480 !important;} .lc-detail-repeat .lc-dr-act{display:flex; gap:9px; flex:0 0 auto; flex-wrap:wrap;} @media (max-width:760px){ .lc-detail-repeat{padding:14px 15px !important; gap:12px !important;} .lc-detail-repeat .lc-dr-head{font-size:16px !important;} .lc-detail-repeat .lc-dr-act{flex:1 1 100%;} .lc-detail-repeat .lc-dr-act .lc-da-btn{flex:1 1 0;} } /* section headings: our /living/ scale (30px+) is too loud for the dense detail page, where these are labels ("Overview", "Map") rather than page sections */ body.flexmls_connect__listing_details_page .flexmls-listing-details .listing-section h2{ font-size:21px !important; line-height:1.25 !important; margin-bottom:10px !important; color:#334376 !important;} /* the plugin's "NEW LISTING" flag and its Contact-agent button both ship in a generic bootstrap blue that appears nowhere else on the site → brand them. (The button itself is replaced by the agent unit in lc-results-header.js; this styling is the fallback if that JS ever fails to run.) */ body.flexmls_connect__listing_details_page .flexmls-listing-details .flexmls-btn-primary, body.flexmls_connect__listing_details_page .flexmls-listing-details [class*="new-listing"], body.flexmls_connect__listing_details_page .flexmls-listing-details .flexmls-flag{ background:#26a9e1 !important; border-color:#26a9e1 !important;} /* ---- DETAIL PAGE: the agent unit (JS-injected) 2026-07-30 -------- Replaces the plugin's anonymous blue "Contact agent" button with Lacey's face + name, anchored under the address/price instead of floating in whitespace. COMPLIANCE: brokerage name at the SAME size as the licensee name and adjacent to it (MS §1601-3.3); no phone number displayed (Call/Text is a bare tel:); no brokerage logo required for CRG. Same basis as the /search Lacey strip. */ .lc-hide-orig-contact{display:none !important;} .lc-detail-agent{display:flex;align-items:center;gap:15px;flex-wrap:wrap; margin:16px 0 0;padding:14px 17px;background:#f7f9fc; border:1px solid #dde3ef;border-left:4px solid #d0a667;border-radius:12px; font-family:'Mulish',sans-serif;} .lc-detail-agent .lc-da-photo{width:52px;height:52px;border-radius:50%;object-fit:cover; flex:0 0 auto;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.16);} .lc-detail-agent .lc-da-who{flex:1 1 250px;min-width:0;line-height:1.3;} .lc-detail-agent .lc-da-name, .lc-detail-agent .lc-da-brk{font-weight:700;font-size:15.5px;} /* equal size — §1601-3.3 */ .lc-detail-agent .lc-da-name{color:#334376;text-decoration:none;} .lc-detail-agent .lc-da-name:hover,.lc-detail-agent .lc-da-name:focus{text-decoration:underline;} .lc-detail-agent .lc-da-brk{color:#2b2f36;} .lc-detail-agent .lc-da-sub{font-size:12.5px;color:#7b8194;margin-top:2px;} .lc-detail-agent .lc-da-actions{display:flex;gap:9px;flex:0 0 auto;flex-wrap:wrap;} /* .lc-da-btn is used by TWO components — the agent unit AND the repeat band (.lc-detail-repeat). These were scoped to .lc-detail-agent only, so the repeat band's "Ask About This Home" rendered as a bare browser-default button and Call/Text as an underlined teal .brxe-post-content link (Brad, 2026-08-04). Scope to both. */ .lc-detail-agent .lc-da-btn, .lc-detail-repeat .lc-da-btn{display:inline-flex;align-items:center;justify-content:center; min-height:46px;padding:0 22px;border-radius:9px;font-family:'Mulish',sans-serif; font-size:15px;font-weight:750;line-height:1.2;text-decoration:none !important;white-space:nowrap; cursor:pointer;border:0;transition:background .15s ease,color .15s ease;} .lc-detail-agent .lc-da-btn-gold, .lc-detail-repeat .lc-da-btn-gold{background:#d0a667;color:#3a2c10; box-shadow:0 2px 6px rgba(185,143,78,.34);} .lc-detail-agent .lc-da-btn-gold:hover,.lc-detail-agent .lc-da-btn-gold:focus, .lc-detail-repeat .lc-da-btn-gold:hover,.lc-detail-repeat .lc-da-btn-gold:focus{background:#c0954f;} .lc-detail-agent .lc-da-btn-out, .lc-detail-repeat .lc-da-btn-out{background:#fff;color:#334376 !important;border:2px solid #334376;} .lc-detail-agent .lc-da-btn-out:hover,.lc-detail-agent .lc-da-btn-out:focus, .lc-detail-repeat .lc-da-btn-out:hover,.lc-detail-repeat .lc-da-btn-out:focus{background:#334376;color:#fff !important;} /* ---- DETAIL PAGE: the plugin's "Contact agent" dialog 2026-07-30 -------- Confirmed 2026-07-30 that this dialog is plain markup in the PARENT document (form.flexmls_connect__contact_form wrapping a table layout) — not an iframe — so it takes our CSS. Fields ship unstyled and the Send button ships grey (#f0f0f0), which reads as disabled next to the gold CTA that opened it. NOTE the form contains a HONEYPOT input (name contains "important") that the plugin hides; it is excluded from the field styling below so we can never accidentally reveal it and break the spam trap. */ /* the dialog heading — plugin ships it as generic bold black with no class of its own, so lc-results-header.js tags it .lc-dialog-title when it retitles */ .lc-dialog-title{font-family:'Montserrat',sans-serif !important; color:#334376 !important; font-size:22px !important; font-weight:700 !important; line-height:1.25 !important; letter-spacing:-.01em !important; margin:0 0 4px !important; padding-right:30px !important;} /* give the white box real padding + a readable measure */ .lc-contact-dialog{padding:22px 24px 24px !important; box-sizing:border-box !important;} .lc-contact-dialog .flexmls_connect__contact_form, .lc-contact-dialog .flexmls_connect__schedule_showing_table{width:100% !important;} .lc-contact-dialog .flexmls_connect__contact_form input[type="text"]:not([name*="important"]), .lc-contact-dialog .flexmls_connect__contact_form input[type="email"], .lc-contact-dialog .flexmls_connect__contact_form input[type="tel"], .lc-contact-dialog .flexmls_connect__contact_form textarea{ width:100% !important; box-sizing:border-box !important; font-family:'Mulish',sans-serif !important; font-size:15px !important; padding:12px 14px !important; border:1px solid #c6cddb !important; border-radius:8px !important; background:#fcfdfe !important; color:#2b2f36 !important;} .lc-contact-dialog .flexmls_connect__contact_form input:focus, .lc-contact-dialog .flexmls_connect__contact_form textarea:focus{ outline:none !important; border-color:#334376 !important; box-shadow:0 0 0 3px rgba(51,67,118,.12) !important;} .lc-contact-dialog .flexmls_connect__contact_form td{padding:5px 0 !important;} /* The plugin's message box ships ~280px tall, which pushes Send below the modal's fixed height and forces an internal scrollbar — so the primary action is off-screen until you scroll inside a dialog most people won't realise scrolls. 150px still shows ~6 lines and lets the whole form fit. */ .lc-contact-dialog .flexmls_connect__contact_form textarea{ height:150px !important; min-height:150px !important; resize:vertical !important;} /* Send: gold primary, matching the "Ask About This Home" button that opened it */ .lc-contact-dialog .flexmls_connect__contact_form input[type="submit"]{ background:#d0a667 !important; color:#3a2c10 !important; border:0 !important; min-height:46px !important; padding:0 30px !important; border-radius:9px !important; font-family:'Mulish',sans-serif !important; font-size:15.5px !important; font-weight:800 !important; cursor:pointer !important; box-shadow:0 2px 6px rgba(185,143,78,.34) !important;} .lc-contact-dialog .flexmls_connect__contact_form input[type="submit"]:hover, .lc-contact-dialog .flexmls_connect__contact_form input[type="submit"]:focus{ background:#c0954f !important;} @media (max-width:760px){ body.flexmls_connect__listing_details_page .flexmls-listing-details .listing-section{ padding-top:20px !important;} body.flexmls_connect__listing_details_page .flexmls-listing-details .listing-section h2{ font-size:19px !important;} /* phones: the one-row header wraps to Back / Address / Price — keep the price column left-aligned once it drops to its own line so it doesn't hang alone on the right edge under a short address. */ body.flexmls_connect__listing_details_page .price-and-actions-wrapper{ margin-left:0 !important; justify-content:flex-start !important;} body.flexmls_connect__listing_details_page .title-and-details-wrapper{ flex-wrap:wrap !important; gap:2px 12px !important;} .lc-detail-agent{gap:11px;padding:12px 14px;border-radius:10px;} .lc-detail-agent .lc-da-actions{flex:1 1 100%;} .lc-detail-agent .lc-da-btn{flex:1 1 0;padding:0 12px;font-size:14px;} } /* ---- COLLAPSIBLE SEARCH PANEL (#5, JS-injected) 2026-07-24 ------- On the results view the filter card collapses to a slim summary bar (huge win on mobile where the card is the whole first screen). body.lc-search-collapsed is the toggle (set by lc-results-header.js). */ .lc-search-top-widget .flexmls_connect__search_new{position:relative;} /* the collapsed summary bar (hidden unless collapsed). Mirror the search card's own box — max-width:1180px + margin auto — so its width matches exactly and the panel doesn't jump width between collapsed/expanded (#3). Whole bar is clickable to expand (#2). */ .lc-search-summary{display:none;align-items:center;gap:14px;flex-wrap:wrap;cursor:pointer; max-width:1180px;width:100%;margin:0 auto;box-sizing:border-box; background:#fff;border-radius:12px;box-shadow:0 18px 44px rgba(15,22,48,.28); padding:13px 18px;font-family:'Mulish',sans-serif;} .lc-search-summary:focus-visible{outline:2px solid #26a9e1;outline-offset:2px;} .lc-search-summary:hover{box-shadow:0 20px 50px rgba(15,22,48,.34);} .lc-search-summary .lc-ss-loc{font-family:'Montserrat',sans-serif;font-weight:700;font-size:16px;color:#334376;} .lc-search-summary .lc-ss-btn{margin-left:auto;display:inline-flex;align-items:center;gap:7px; height:38px;padding:0 16px;border-radius:8px;border:1.5px solid #334376;background:#fff;color:#334376; font-family:'Mulish',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s,color .15s;} .lc-search-summary .lc-ss-btn:hover{background:#334376;color:#fff;} /* the "Hide Filters" control shown when the card is open (top-right of the card) */ .lc-search-hide{display:none;position:absolute;top:12px;right:16px;z-index:4; align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:8px; border:1px solid #d6dae1;background:#fff;color:#6b6f76; font-family:'Mulish',sans-serif;font-size:12px;font-weight:700;cursor:pointer;} .lc-search-hide:hover{border-color:#334376;color:#334376;} body:not(.lc-search-collapsed) .lc-search-hide{display:inline-flex;} /* The plugin types buttons INSIDE its own widget at 26px, which outranks the plain .lc-search-hide class above — the control rendered as oversized grey text spilling out of its 30px chip and read as an unstyled stray link (Brad, 2026-08-03). Same specificity trap as the repeat-band CTA: scope to the widget and force the type. The caret is sized separately or it inherits the same 26px and blows the chip's height back out. */ .lc-search-top-widget .flexmls_connect__search_new button.lc-search-hide{ font-family:'Mulish',sans-serif !important;font-size:12px !important; font-weight:700 !important;line-height:1 !important;letter-spacing:.02em !important; height:30px !important;padding:0 12px !important;} .lc-search-top-widget .flexmls_connect__search_new button.lc-search-hide .lc-ss-caret{ font-size:11px !important;line-height:1 !important;} /* collapsed: hide the card, reveal the summary bar */ body.lc-search-collapsed .lc-search-top-widget .flexmls_connect__search_new{display:none !important;} body.lc-search-collapsed .lc-search-summary{display:flex;} /* lift the white search card off the photo */ .lc-search-top-widget .flexmls_connect__search_new{ box-shadow:0 18px 44px rgba(15,22,48,.28) !important; } /* ---- location autocomplete: kill the horizontal scrollbar 2026-07-24 (v2) -- THE REAL CULPRIT: the multi-select box `.select2-selection__rendered` (holding the "×Gulfport (City)" chip + the field you type into) is overflow-x:auto, so once the chip + text exceed the box width a horizontal scrollbar appears under the input. Let it WRAP to a second line instead (standard multi-select behaviour) so no scrollbar and nothing is clipped. Scoped to the /search refine bar. (v1 wrongly targeted the dropdown list .select2-results__options — that rule stays below as harmless defense.) NOTE ON SPECIFICITY: select2's own CSS styles this with a 3-class selector (.select2-container--default .select2-selection--multiple .select2-selection__rendered), so a 2-class rule loses even with !important. We match that depth (4 classes) to win — verified computed overflow-x becomes `hidden`. */ .lc-search-top-widget .select2-container--default .select2-selection--multiple{ height:auto !important; min-height:0 !important;} .lc-search-top-widget .select2-container--default .select2-selection--multiple .select2-selection__rendered{ overflow-x:hidden !important; white-space:normal !important;} .select2-results__options{overflow-x:hidden !important;} .select2-results__option{white-space:normal !important;overflow-wrap:anywhere;} /* ---- Branded results header (JS-injected; replaces black H1) ---------- Order on the page (set in lc-results-header.js): search card → Lacey strip → THIS header (location + count + Save/Map) → results toolbar → listings. The header + its portal buttons hug the listings; align-items:flex-end drops the Save/Map buttons to the count's baseline so they sit right above the results rather than floating at the centre of the tall title block. */ .lc-results-header{width:100%;flex:0 0 100%;margin:0;padding:12px 0 2px; display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px;text-align:left;} .lc-results-header > div{text-align:left;} /* the header + listings share this Bricks container. Constrain it to a clean 1300px (matches the site's other containers) so results aren't full-width, and the header left-aligns with the listing cards. */ .brxe-container:has(> .lc-results-header){ max-width:1300px !important; width:auto !important; margin:0 auto !important; padding-left:20px !important; padding-right:20px !important; } /* pull the results block (same-container child) up tight under the header — Bricks gives .brxe-post-content a 20px top margin that detached the header from the listings. */ .brxe-container:has(> .lc-results-header) > .brxe-post-content{margin-top:4px !important;} /* single formatted sentence line — "561 active listings in Gulfport, Mississippi" (replaced the old 3 stacked lines: eyebrow / city / count). The count + the location render bold navy; the connective words stay muted. */ /* flex-basis:auto (NOT a px basis) — in the mobile column layout a px basis becomes a HEIGHT and balloons the title box; auto keeps height = content. */ .lc-results-header .lc-h-title{flex:1 1 auto;min-width:0;} /* DEMOTED 2026-07-28 (Brad: "competing headers"). This line was 20px Montserrat with navy-700 emphasis, sitting ~30px above the save panel's 19px navy-700 headline — so the ORIENTATION text was both larger than and dressed identically to the page's primary call to action, and the secondary element was winning. Now a 15px caption: muted body, navy semibold only on the count + location, so "Save This Search" owns the one bold navy statement in this zone. Kept ABOVE the panel deliberately — a visitor who just hit Search needs to see the result count before anything sells to them, and it keeps a beat of plain content between Lacey's row and the offer. */ .lc-h-line{font-family:'Montserrat',sans-serif;font-weight:400;font-size:15px;line-height:1.35; color:#6b6f76;margin:0;text-wrap:balance;} .lc-h-line b{font-weight:600;color:#334376;} /* SIGNED-IN title (Brad, 2026-08-11: "enlarge the title a bit, give it more space"). The 15px demotion above was calibrated against the logged-out save PANEL's 19px headline; signed-in that panel is replaced by the compact save row, so nothing competes with the title any more — give the count line back some presence and breathing room. body.lc-searches-ready is set only when the signed-in cluster is built. */ body.lc-searches-ready .lc-h-line{font-size:19px;line-height:1.3;} body.lc-searches-ready .lc-results-header{padding:18px 0 8px;} /* ---- SAVED-SEARCH VIEW (html.lc-saved-view, set by JS on ?SavedSearch=) ---- Viewing a saved search is its own mode (Brad, 2026-08-11): the form can't reflect the server-held criteria (it would sit in its default state, lying) and any interaction with it or the pills mixes contexts unpredictably. Hide the whole search zone — hero pano band included, or it'd remain as an empty photo strip — and let the header carry the page: the search's NAME as the heading, count + the two ways out beneath it. */ html.lc-saved-view .brxe-section:has(.lc-search-top-widget):not(:has(.flexmls_connect__search_results_v2)):not(:has(.brxe-post-content)){ display:none !important;} html.lc-saved-view .lc-search-top-widget .flexmls_connect__search_new, html.lc-saved-view .lc-search-summary, html.lc-saved-view .lc-search-hide{display:none !important;} html.lc-saved-view .lc-results-header{padding:26px 0 8px;} .lc-h-line .lc-h-saved-label{display:block;font-family:'Mulish',sans-serif; font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:#8a8f9c;margin:0 0 3px;} .lc-h-line .lc-h-saved-name{display:block;font-family:'Montserrat',sans-serif; font-size:26px;font-weight:700;line-height:1.2;letter-spacing:-.01em; color:#334376;margin:0 0 6px;overflow-wrap:anywhere;} .lc-h-line .lc-h-saved-sub{display:block;font-size:14px;color:#6b6f76;} .lc-h-line .lc-h-saved-sub b{color:#334376;font-weight:600;} .lc-h-line .lc-h-saved-sub a{color:#1c86b4;text-decoration:underline;font-weight:600;} .lc-h-line .lc-h-saved-sub a:hover,.lc-h-line .lc-h-saved-sub a:focus{color:#334376;} /* faded "can't edit" explainer (Brad, 2026-08-14) — the refine form is hidden in saved view, so say why there's no edit control. A SIBLING of the title inside .lc-h-title, rendered AFTER the chips row */ .lc-h-title .lc-h-saved-note{display:block;margin-top:8px; font-family:'Mulish',sans-serif;font-size:12.5px;color:#9aa1b4;} .lc-h-title .lc-h-saved-note a{color:#8fa8c4;text-decoration:underline;font-weight:600;} .lc-h-title .lc-h-saved-note a:hover,.lc-h-title .lc-h-saved-note a:focus{color:#334376;} @media (max-width:719px){ .lc-h-line .lc-h-saved-name{font-size:21px;} } /* filter chips under the saved-search header — read-only display of the stored criteria, fetched via lc_ss_detail (snippet 44) with the visitor's own token and translated from FlexMLS filter syntax */ .lc-h-title .lc-h-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:9px;} /* faded lead-in so the pills read as a description, not clickable filters */ .lc-h-title .lc-h-chips-label{font-family:'Mulish',sans-serif;font-size:12.5px; font-weight:600;color:#8a8f9c;margin-right:2px;} .lc-h-title .lc-h-chip{display:inline-flex;align-items:center;height:26px;padding:0 11px; border:1px solid #d3dcec;border-radius:13px;background:#f4f7fc; font-family:'Mulish',sans-serif;font-size:12.5px;font-weight:600;color:#3f4557;white-space:nowrap;} .lc-hide-idx-h1{display:none !important;} /* JS moves Sign-up + Open Map into this right-side slot of the header row */ .lc-results-header .lc-results-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;} .lc-results-header .lc-results-actions .flexmls-title-and-login-wrapper, .lc-results-header .lc-results-actions .flexmls-actions-wrapper{margin:0 !important;} /* restyle the moved buttons (they lose their look outside the results context) */ .lc-results-header .lc-results-actions .flexmls-btn{ display:inline-flex !important; align-items:center !important; height:36px !important; padding:0 15px !important; border-radius:8px !important; font-family:'Mulish',sans-serif !important; font-size:13px !important; font-weight:600 !important; text-decoration:none !important; white-space:nowrap !important; } .lc-results-header .lc-results-actions .flexmls-btn-primary{background:#26a9e1 !important; color:#fff !important; border:0 !important;} .lc-results-header .lc-results-actions .flexmls-btn-secondary{background:#fff !important; color:#334376 !important; border:1.5px solid #334376 !important;} /* ---- LACEY CTA STRIP (JS-injected by lc-results-header.js) 2026-07-23 ----- Its own slim band directly under the results header, so it doesn't compete with the portal utilities (Save Searches / Open Map) that live IN the header. COMPLIANCE (MS 30 Miss. Code R. §1601-3.3): the brokerage name renders at the SAME font-size + weight as the licensee name, adjacent to it. No brokerage logo is required (that's a Berkshire-franchise rule, not a CRG one), and no phone number is DISPLAYED — Call/Text is a bare tel: to Lacey's MS cell, and the broker's phone (228) 280-8026 is already in the site footer on this page. ---------------------------------------------------------------------------- */ /* width:100%/flex-basis mirrors .lc-results-header — the shared Bricks container lays its children out as flex items, so without this the strip shrink-wraps to its text instead of spanning the results column. DE-BANDED 2026-07-26 (Brad, "Option 1" — demo `_demo-lacey-band.html`). This strip used to be a tinted, gold-barred, rounded band. Once the save-search panel shipped directly below it wearing the SAME 4px gold left bar, 12px radius and pale-blue fill, the two read as twins ~100px apart — two adjacent visual/pattern elements (`feedback_no_adjacent_visuals`), and the save panel stopped reading as *the offer* and started reading as more page furniture. Lacey keeps her position, content and buttons; only the box comes off, leaving a hairline rule. The banded treatment is now unique to the one action we most want clicked. COMPLIANCE UNCHANGED: name + "Coastal Realty Group" still equal-size and adjacent (§1601-3.3), tel: with no number displayed. Styling only. */ .lc-lacey-strip{width:100%;flex:0 0 100%;display:flex;align-items:center;gap:13px; background:none;border:0;border-bottom:1px solid #e6e8ec;border-radius:0; padding:2px 2px 13px;margin:14px 0 12px;font-family:'Mulish',sans-serif;} .lc-lacey-strip .lc-lacey-photo{width:44px;height:44px;border-radius:50%;object-fit:cover; flex:0 0 auto;border:2px solid #eef1f6;} .lc-lacey-who{flex:1 1 auto;line-height:1.3;min-width:0;} .lc-lacey-q{font-size:12.5px;color:#6b6f76;} .lc-lacey-name,.lc-lacey-brk{font-weight:700;font-size:15px;} /* equal size — §1601-3.3 */ .lc-lacey-name{color:#334376;text-decoration:none;} .lc-lacey-name:hover,.lc-lacey-name:focus{text-decoration:underline;color:#334376;} .lc-lacey-brk{color:#2b2f36;} .lc-lacey-actions{display:flex;gap:8px;flex:0 0 auto;} .lc-lacey-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px; height:38px;padding:0 15px;border-radius:8px;font-family:'Mulish',sans-serif; font-size:12.5px;font-weight:700;line-height:1;text-decoration:none;white-space:nowrap; cursor:pointer;border:0;transition:background .15s ease,color .15s ease;} .lc-lacey-btn-gold{background:#d0a667;color:#3a2c10;} .lc-lacey-btn-gold:hover,.lc-lacey-btn-gold:focus{background:#c0954f;color:#3a2c10;} .lc-lacey-btn-ghost{background:#fff;color:#334376;border:1.5px solid #334376;} .lc-lacey-btn-ghost:hover,.lc-lacey-btn-ghost:focus{background:#334376;color:#fff;} /* CTA LADDER 2026-07-25: gold belongs to the ONE primary action per zone — on the results page that's "Save This Search". Call/Text steps down to navy solid (secondary) and Ask a Question to navy outline (tertiary), so the three no longer compete at equal weight in three different accent colours. Both are bumped 12.5px -> 14px / 38px -> 40px, because 12.5px white-on-near-white made "Ask a Question" effectively invisible. */ .lc-lacey-strip .lc-lacey-btn{height:40px;font-size:14px;} .lc-lacey-btn-navy{background:#334376;color:#fff;} .lc-lacey-btn-navy:hover,.lc-lacey-btn-navy:focus{background:#26325a;color:#fff;} .lc-lacey-strip .lc-lacey-btn-ghost{border-width:2px;} /* ---- SAVE-SEARCH PANEL — the page's primary conversion --------------------- Saving a search registers the visitor in FlexMLS as a lead WITH contact details and emails Lacey, so it is the most valuable action on this page. It previously shipped as a 196x36px / 13px chip in the utility row (a 25:1 area deficit against a single listing card) with no statement of the benefit. Gold is reserved for this button alone within the results zone. Brad approved "Variant A" + this treatment 2026-07-25. ---------------------------------------------------------------------------- */ .lc-save-panel{width:100%;flex:0 0 100%;box-sizing:border-box; display:flex;align-items:center;gap:24px;flex-wrap:wrap; background:linear-gradient(96deg,#f4f7fc,#eef3fb); border:1px solid #d3dcec;border-left:4px solid #d0a667;border-radius:12px; padding:17px 20px;margin:4px 0 14px;font-family:'Mulish',sans-serif;} .lc-save-copy{flex:1 1 380px;min-width:0;} .lc-save-panel .lc-save-head{margin:0 0 5px;font-family:'Montserrat',sans-serif; font-size:19px;line-height:1.25;font-weight:700;color:#334376;letter-spacing:-.01em; text-wrap:balance;} .lc-save-panel .lc-save-body{margin:0;font-size:14px;line-height:1.45;color:#3f4557;} .lc-save-panel .lc-save-fine{margin:7px 0 0;font-size:12px;color:#7b8194;} .lc-save-act{flex:0 0 auto;display:flex;flex-direction:column;align-items:stretch;gap:7px;} .lc-save-cta{display:inline-flex;align-items:center;justify-content:center; min-height:48px;padding:0 30px;border-radius:10px;background:#d0a667;color:#3a2c10; font-family:'Mulish',sans-serif;font-size:16px;font-weight:800;line-height:1.2; text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer; box-shadow:0 2px 7px rgba(185,143,78,.34);transition:background .15s ease;} .lc-save-cta:hover,.lc-save-cta:focus{background:#c0954f;color:#3a2c10;} .lc-save-signin{font-size:12px;color:#1c86b4;text-align:center;text-decoration:underline;} .lc-save-signin:hover,.lc-save-signin:focus{color:#334376;} /* The plugin's own teal "Save Searches & Get Alerts" chip duplicates the panel's CTA, so we hide it — but ONLY once our panel exists (body.lc-save-ready), so a script failure can never leave the page with no way to register. It stays in the DOM because it is the source of the OAuth href the panel reuses. NARROWED 2026-07-28 (Brad: "no way to log out of FlexMLS"). This used to hide the whole .flexmls-title-and-login-wrapper, which is the same row the plugin renders a SIGNED-IN visitor's account controls into — so blanket-hiding it took their route back to the portal, and any logout, with it. Now we hide only the logged-out OAuth CTA itself (`/r/login/`); anything else the plugin puts in that row stays visible. */ body.lc-save-ready .lc-results-header .lc-results-actions .flexmls-login-buttons a[href*="/r/login/"]{ display:none !important;} /* collapse the row's reserved space when that link is the only thing in it */ body.lc-save-ready .lc-results-header .lc-results-actions .flexmls-title-and-login-wrapper{ margin:0 !important;} /* ---- SIGNED-IN BAR (replaces the registration panel for portal members) ----- A returning, signed-in lead has no use for "create your account" — but they DO need a route back to the searches they saved, which the plugin gives them nowhere on our site. Hairline rule, no box: matches the de-banded Lacey strip so this never reads as a second band competing with the offer. */ /* Signed-in save/view group — an INLINE toolbar group, v2 2026-08-04. The 2026-08-03 labeled "YOUR SEARCHES" panel is gone (Brad: a section with that heading which never lists any searches reads broken — and it can't list them; saved searches live in the portal). This group sits in the paging row's left half (the slot the pills vacated): name + Save + the manage link, one 38px baseline with the row's other controls. */ .lc-searches{display:inline-flex;align-items:center;gap:8px;flex-wrap:nowrap; font-family:'Mulish',sans-serif;} .lc-searches-name{height:38px;box-sizing:border-box;min-width:150px;max-width:210px;flex:0 1 auto; padding:0 12px;border:1px solid #d7dbe4;border-radius:8px;background:#fff;color:#243053; font-family:'Mulish',sans-serif;font-size:13px;line-height:1;} .lc-searches-name::placeholder{color:#9aa1b4;opacity:1;} .lc-searches-name:focus{border-color:#26a9e1;outline:none;box-shadow:0 0 0 3px rgba(38,169,225,.16);} .lc-searches-go{height:38px;box-sizing:border-box;padding:0 18px;border:0;border-radius:8px; background:#d0a667;color:#3a2c10;cursor:pointer; font-family:'Mulish',sans-serif;font-size:13.5px;font-weight:800;line-height:1; box-shadow:0 2px 6px rgba(185,143,78,.32);transition:background .15s ease;} .lc-searches-go:hover{background:#c0934f;} .lc-searches-go:focus-visible{outline:2px solid #26a9e1;outline-offset:2px;} /* transient "Saved ✓" confirmation (2026-08-11 — the plugin's save gives no visible response of its own; JS swaps the label for 4s). !important because the toolbar-scoped .flexmls-count-and-filters-wrapper rules further down would otherwise out-tie this on the results page. */ .lc-searches-go.lc-searches-go-done, .lc-searches-go.lc-searches-go-done:hover{ background:#334376 !important;color:#fff !important;cursor:default;box-shadow:none;} /* honest failure state — set by the alert-watch when the plugin's save AJAX reports a problem (duplicate name etc.) after our optimistic confirmation */ .lc-searches-go.lc-searches-go-err, .lc-searches-go.lc-searches-go-err:hover{ background:#a94434 !important;color:#fff !important;box-shadow:none;} .lc-searches-name.lc-searches-name-err{ border-color:#a94434 !important;box-shadow:0 0 0 3px rgba(169,68,52,.18) !important;} .lc-searches-name.lc-searches-name-err::placeholder{color:#a94434;} /* "Saved Searches" — an outline button matching Open Map (Brad 2026-08-04: the arrow-link read as out of place in a row of controls) */ .lc-searches-link{display:inline-flex;align-items:center;height:38px;box-sizing:border-box; padding:0 15px;margin-left:2px;border:1.5px solid #334376;border-radius:8px; background:#fff;color:#334376;font-family:'Mulish',sans-serif;font-size:13px;font-weight:600; line-height:1;text-decoration:none;white-space:nowrap; transition:background .15s ease,color .15s ease;} .lc-searches-link:hover,.lc-searches-link:focus{background:#334376;color:#fff;} /* inside the flex-end toolbar, this group anchors LEFT (the pills' old role); signed out it never renders, and the row stays right-aligned over an empty left half — deliberate (Brad, 2026-08-04). */ .flexmls-count-and-filters-wrapper .lc-searches{margin-right:auto !important;} /* Living inside the toolbar costs two specificity fights the standalone strip never had (probed 2026-08-04): the toolbar-wide `... button{background:#fff !important}` whitewashed the gold Save, and `.brxe-post-content a` underlined the link. Two-class selectors (0,2,0) outrank both. */ .flexmls-count-and-filters-wrapper .lc-searches-go{ background:#d0a667 !important;color:#3a2c10 !important;border:0 !important; font-weight:800 !important;box-shadow:0 2px 6px rgba(185,143,78,.32) !important;} .flexmls-count-and-filters-wrapper .lc-searches-go:hover{ background:#c0934f !important;color:#3a2c10 !important;} /* the busy/err states must RE-WIN over the toolbar override above (same specificity + !important → source order decides), or "Saving…" stays a live-looking gold button (Brad, 2026-08-13: "disable it or change color") */ .flexmls-count-and-filters-wrapper .lc-searches-go.lc-searches-go-done, .flexmls-count-and-filters-wrapper .lc-searches-go.lc-searches-go-done:hover{ background:#334376 !important;color:#fff !important;cursor:default;box-shadow:none !important;} .flexmls-count-and-filters-wrapper .lc-searches-go.lc-searches-go-err, .flexmls-count-and-filters-wrapper .lc-searches-go.lc-searches-go-err:hover{ background:#a94434 !important;color:#fff !important;box-shadow:none !important;} .flexmls-count-and-filters-wrapper .lc-searches-link{ text-decoration:none !important;color:#334376 !important;} .flexmls-count-and-filters-wrapper .lc-searches-link:hover, .flexmls-count-and-filters-wrapper .lc-searches-link:focus{ text-decoration:none !important;color:#fff !important;background:#334376 !important;} /* the plugin's own field + button, once ours is driving them. Only these two nodes are ever hidden — never their wrapper, which can also hold the sort and per-page selects. .click() still fires on a display:none control. The rule that actually hides them lives at the END of this file — see the note there for why it can't sit here. */ @media (max-width:760px){ .lc-searches{font-size:13.5px;gap:8px;padding:11px 12px;} .lc-searches-name{flex:1 1 100%;max-width:none;} .lc-searches-go{flex:1 1 auto;} .lc-searches-link{margin-left:0;flex:1 0 100%;} } /* condensed repeat above pagination */ .lc-save-panel.lc-save-repeat{margin:22px 0 6px;padding:13px 18px;gap:18px;} .lc-save-repeat .lc-save-head{font-size:16px;margin:0;} .lc-save-repeat .lc-save-fine{margin:4px 0 0;} .lc-save-repeat .lc-save-cta{min-height:44px;font-size:15px;padding:0 24px;} /* The repeat band is injected INSIDE .flexmls_connect__search_results_v2, and the plugin styles anchors in there (teal + underline) with enough specificity to beat our .lc-save-cta rule — the button rendered as underlined link text on gold. Re-assert colour/decoration for both placements. Headings inside that widget are likewise reset so the plugin's own h2 rules can't reach them. */ .flexmls_connect__search_results_v2 .lc-save-cta, .flexmls_connect__search_results_v2 .lc-save-cta:hover, .flexmls_connect__search_results_v2 .lc-save-cta:focus, .lc-save-cta{color:#3a2c10 !important;text-decoration:none !important;} .flexmls_connect__search_results_v2 .lc-save-cta:hover, .flexmls_connect__search_results_v2 .lc-save-cta:focus{background:#c0954f !important;} .flexmls_connect__search_results_v2 .lc-save-panel .lc-save-head{ font-family:'Montserrat',sans-serif !important;color:#334376 !important; margin:0 !important;padding:0 !important;border:0 !important;text-transform:none !important;} .flexmls_connect__search_results_v2 .lc-save-panel .lc-save-fine{color:#7b8194 !important;} .flexmls_connect__search_results_v2 .lc-save-signin{color:#1c86b4 !important;} /* ---- Redirect blanking (2026-08-17) ---------------------------------------- applyDefaultSearch() tags with .lc-redirecting the instant it calls location.replace — the old page stays on screen until the target responds (1-2s now that /idx/ is no-store), and what it showed was a half-mounted form. Hide it; the JS removes the class after 4s if navigation never lands so a failed redirect can't strand a blank page. */ html.lc-redirecting body{visibility:hidden !important;} /* DOCK FLASH — 2026-08-21. The contact form ships ABOVE the results in the HTML and JS moves it below (dockContactForm). Once the page started being served from the WPX edge in ~0.14s instead of ~0.9s from PHP, that reorder stopped being hidden inside the load and became a visible flash of the form sitting where the results belong (Brad, 2026-08-21). display:none, not visibility:hidden — the latter would hold the form's full height open as a blank gap above the listings, trading one artefact for a worse one. The class is removed the instant the move lands, and a 4s timeout in snippet 37 removes it regardless, so a JS failure can never cost a visitor the contact form. */ html.lc-docking .lc-search-form-wrap:not([data-lc-docked]){display:none !important;} /* ---- Collapsible "Contact Lacey" form below the results -------------------- Brad renders the WPForm inside a Bricks container with class `lc-search-form-wrap`. It's collapsed until "Ask a Question" opens it. Gated on body.lc-cta-ready (set by the JS) so that if the script ever fails to run, the form stays VISIBLE rather than permanently hidden. */ body.lc-cta-ready .lc-search-form-wrap{display:none;} body.lc-cta-ready .lc-search-form-wrap.lc-open{display:block;} /* DETAIL pages (2026-08-04): every /idx/ detail URL ALSO renders page 3891, so the Bricks-authored form container — first section of the page tree — printed open at the TOP of every listing. It never had before the 2026-08-01 template rework only because Pages Stacked used to render instead of the page's tree. The collapse gate above can't catch it there: build() bails without a results widget, so lc-cta-ready is never set. Detail pages already carry their own contact paths (Contact Agent dialog + the lc-detail-agent unit), so hide the wrap outright rather than docking a second form. */ body.flexmls_connect__listing_details_page .lc-search-form-wrap{display:none !important;} /* The heading/sub are INJECTED BY THE JS (dockContactForm), not authored in Bricks — the container Brad built holds only the WPForm shortcode, so without this the panel opened with no title at all. (An earlier note here claimed a PHP zone emitted the markup; that approach was never shipped — lc-search-form-zone.php is dead code. Corrected 2026-08-02.) width:100%/flex-basis for the same reason as .lc-lacey-strip — the shared Bricks container lays its children out as flex items, so without this the wrap shrink-wraps to the form's intrinsic width instead of spanning the column (caught in the 2026-07-26 render check). */ .lc-search-form-wrap{width:100%;flex:0 0 100%;max-width:1180px; margin:26px auto 0;padding:22px 24px 26px; box-sizing:border-box;background:#f7f9fc;border:1px solid #e6e8ec; border-radius:12px;font-family:'Mulish',sans-serif;} .lc-search-form-wrap .lc-search-form-title{margin:0 0 6px;font-family:'Montserrat',sans-serif; font-size:22px;line-height:1.25;font-weight:700;color:#334376;} .lc-search-form-wrap .lc-search-form-sub{margin:0 0 18px;font-size:14.5px;color:#5d6480;} /* Agent header (2026-08-17): the form's title/sub now live inside a photo + byline unit so the panel reads as "send Lacey a message" — see dockContactForm(). Photo and name link to /about-lacey (trust node). */ .lc-form-agent{display:flex;gap:16px;align-items:flex-start;margin:0 0 18px;} .lc-form-agent-photo{flex:0 0 auto;} .lc-form-agent-photo img{width:72px;height:72px;border-radius:50%;object-fit:cover; display:block;border:2px solid #fff;box-shadow:0 1px 6px rgba(51,67,118,.18);} .lc-form-agent-copy{min-width:0;} .lc-form-agent .lc-search-form-title{margin:0 0 2px;} .lc-form-agent-byline{margin:0 0 6px;font-family:'Mulish',sans-serif; font-size:13.5px;font-weight:700;color:#334376;} .lc-form-agent-byline a{color:#334376;text-decoration:none;} .lc-form-agent-byline a:hover{text-decoration:underline;} .lc-form-agent .lc-search-form-sub{margin:0;} @media (max-width:640px){ .lc-form-agent{gap:12px;} .lc-form-agent-photo img{width:56px;height:56px;} .lc-form-agent .lc-search-form-title{font-size:19px;} } /* Any heading authored INSIDE the Bricks container is ours to own — the panel's title comes from the JS. Leftover Bricks placeholders ("I am a heading") would otherwise print below the submit button. */ .lc-search-form-wrap > .brxe-heading{display:none !important;} /* WPForms ships its own unbranded skin (blue submit, 3px radius, system font). Repaint it to the results UI: navy labels, gold submit matching "Save This Search" so the two CTAs read as one family. Everything is !important because the plugin's stylesheet loads after ours. */ .lc-search-form-wrap .wpforms-container{margin:0 !important;max-width:none !important;} .lc-search-form-wrap .wpforms-form{font-family:'Mulish',sans-serif !important;} .lc-search-form-wrap .wpforms-field{padding:0 0 15px !important;} .lc-search-form-wrap .wpforms-field-label{ font-family:'Mulish',sans-serif !important;font-size:13px !important;font-weight:700 !important; letter-spacing:.02em !important;color:#334376 !important;margin:0 0 6px !important;} .lc-search-form-wrap .wpforms-field-sublabel, .lc-search-form-wrap .wpforms-field-description{font-size:12.5px !important;color:#7a8096 !important;} .lc-search-form-wrap .wpforms-required-label{color:#c0392b !important;} .lc-search-form-wrap input[type="text"], .lc-search-form-wrap input[type="email"], .lc-search-form-wrap input[type="tel"], .lc-search-form-wrap select, .lc-search-form-wrap textarea{ width:100% !important;box-sizing:border-box !important; font-family:'Mulish',sans-serif !important;font-size:15px !important;color:#243053 !important; background:#fff !important;border:1px solid #d7dbe4 !important;border-radius:8px !important; padding:11px 13px !important;min-height:46px !important;box-shadow:none !important; transition:border-color .15s ease, box-shadow .15s ease !important;} .lc-search-form-wrap textarea{min-height:118px !important;resize:vertical !important;} .lc-search-form-wrap input:focus, .lc-search-form-wrap select:focus, .lc-search-form-wrap textarea:focus{ border-color:#26a9e1 !important;outline:none !important; box-shadow:0 0 0 3px rgba(38,169,225,.16) !important;} .lc-search-form-wrap ::placeholder{color:#9aa1b4 !important;opacity:1 !important;} .lc-search-form-wrap .wpforms-submit-container{padding:6px 0 0 !important;} .lc-search-form-wrap button.wpforms-submit, .lc-search-form-wrap input.wpforms-submit{ background:#d0a667 !important;color:#3a2c10 !important;border:0 !important; font-family:'Mulish',sans-serif !important;font-size:16px !important;font-weight:800 !important; letter-spacing:.01em !important;min-height:50px !important;padding:0 30px !important; border-radius:9px !important;cursor:pointer !important; box-shadow:0 2px 7px rgba(185,143,78,.34) !important; transition:background .15s ease !important;} .lc-search-form-wrap button.wpforms-submit:hover, .lc-search-form-wrap input.wpforms-submit:hover{background:#c0934f !important;} @media (max-width:760px){ .lc-search-form-wrap{padding:16px 15px 20px;margin-top:18px;border-radius:10px;} .lc-search-form-wrap .lc-search-form-title{font-size:19px;} .lc-search-form-wrap button.wpforms-submit, .lc-search-form-wrap input.wpforms-submit{width:100% !important;} } /* ---- Mobile sticky bottom bar (replaces the strip on phones) --------------- */ .lc-lacey-sticky{display:none;} /* the plugin's own "N Matches Found" line now duplicates our header count → hide it (the Per-Page / Sort controls live in a separate wrapper and stay) */ .flexmls-count-wrapper{display:none !important;} /* ---- compact the plugin's results toolbar (was stacked with big gaps → ~185px of wasted vertical space above the listings). Put Sign-up + Open Map inline and pull the Per-Page/Sort row up tight. ------------------------- */ .flexmls-title-and-login-wrapper, .flexmls-actions-wrapper{ display:inline-flex !important; vertical-align:top !important; margin:0 8px 0 0 !important; padding:0 !important; /* gap between buttons that share a wrapper. Signed in, the plugin renders "Save this search" alongside "Open Map" as siblings inside one inline-flex wrapper, and with no gap they rendered edge-to-edge (Brad, 2026-07-30). The 8px margin above only separates the WRAPPERS from each other, not their children. */ gap:8px !important; } .flexmls-count-and-filters-wrapper{margin:0 0 14px !important; padding:0 !important;} /* DESKTOP ONLY: right-align the plugin's Per-Page / Sort toolbar and vertically centre its label+dropdown pairs so it reads as a tidy row stacked under the Save/Map buttons (right-edges line up) instead of a ragged wide strip. On phones we leave the plugin's native stacking alone (forcing flex there made "Listings / Per / Page" wrap badly). */ @media (min-width:761px){ .flexmls-count-and-filters-wrapper{ display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:14px !important;} .flexmls-count-and-filters-wrapper .flexmls-filters-wrapper, .flexmls-count-and-filters-wrapper .sort-by-wrapper{ display:flex !important; align-items:center !important; gap:8px !important; margin:0 !important; padding:0 !important; float:none !important;} .flexmls-count-and-filters-wrapper select{margin:0 !important;} } /* ---- QUICK-SEARCH PILLS ("Popular:") — a quiet row at the BOTTOM of the search card (moved out of the toolbar 2026-08-04: they're query shortcuts, so they live with the query controls; their old toolbar slot now belongs to the signed-in save/view group). JS-injected; each pill re-runs the current search with one popular filter added. Note: the card is hidden when the panel is collapsed, so pills follow it — accepted trade-off. */ .lc-quick{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-family:'Mulish',sans-serif;} .lc-search-top-widget .flexmls_connect__search_new .lc-quick{ width:100%;margin-top:14px;padding-top:12px;border-top:1px solid #eef0f5;} .lc-quick-label{font-weight:800;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase; color:#9aa0aa;margin-right:2px;} .lc-qp{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px; border:1px solid #d6dae1;background:#fff;color:#334376 !important;font-size:12.5px;font-weight:600;line-height:1; text-decoration:none !important;white-space:nowrap;transition:background .15s ease,color .15s ease,border-color .15s ease;} .lc-qp:hover,.lc-qp:focus{background:#334376;color:#fff !important;border-color:#334376;text-decoration:none !important;} .lc-qp.is-on{background:#334376;color:#fff !important;border-color:#334376;} /* filter currently applied */ /* Open Map — relocated into the results toolbar (see moveActions). Style it to match our outline buttons; it keeps the plugin's flexmls-btn classes. */ .flexmls-count-and-filters-wrapper .flexmls-actions-wrapper{margin:0 !important;padding:0 !important;display:inline-flex !important;} /* SIGNED-IN STATE 2026-07-28: once a visitor is logged into the portal the plugin stops rendering the "/r/login/" CTA and renders a **"Save this search"** button instead — in .flexmls-login-buttons, NOT .flexmls-actions-wrapper. The rule below only targeted the actions wrapper, so that button rendered with the plugin's default (cramped) padding next to a properly padded "Open Map". Both wrappers now get the same treatment, so the toolbar looks identical logged in or out. */ .flexmls-count-and-filters-wrapper .flexmls-login-buttons .flexmls-btn, .lc-results-header .lc-results-actions .flexmls-login-buttons .flexmls-btn, .flexmls-count-and-filters-wrapper .flexmls-actions-wrapper .flexmls-btn{ display:inline-flex !important;align-items:center !important;height:36px !important;padding:0 15px !important; border-radius:8px !important;font-family:'Mulish',sans-serif !important;font-size:13px !important;font-weight:600 !important; line-height:1 !important;white-space:nowrap !important;cursor:pointer !important;text-decoration:none !important; background:#fff !important;color:#334376 !important;border:1.5px solid #334376 !important;} .flexmls-count-and-filters-wrapper .flexmls-login-buttons .flexmls-btn:hover, .lc-results-header .lc-results-actions .flexmls-login-buttons .flexmls-btn:hover, .flexmls-count-and-filters-wrapper .flexmls-actions-wrapper .flexmls-btn:hover{background:#334376 !important;color:#fff !important;} /* SIGNED-IN, PART 2 (Brad, 2026-08-03): the save control is a FORM, not just a button — a "Name your search" text input plus a Save button. The 2026-07-28 rule above only typed .flexmls-btn, so the input kept browser defaults: a different height and baseline from everything else in the row (the "vertical alignment and button padding is off" report), and wide enough to shove "Open Map" out of the strip. Type every control in that row to the same 36px and let the row wrap rather than evict its last child. */ /* nowrap, deliberately: the input and its Save button are ONE control and must never split across lines (they did at 1500px — input on one row, Save orphaned below it). The outer toolbar wraps instead, moving the pair down intact. */ .flexmls-count-and-filters-wrapper .flexmls-login-buttons, .flexmls-count-and-filters-wrapper .flexmls-actions-wrapper{ display:inline-flex !important;align-items:center !important; gap:8px !important;flex-wrap:nowrap !important;margin:0 !important;padding:0 !important;} /* Scoped to the TOOLBAR, not to a named sub-wrapper: signed in, the plugin mounts this form somewhere inside .flexmls-count-and-filters-wrapper, but not reliably in .flexmls-login-buttons (2026-08-03). Logged out the toolbar holds only with none of the plugin's .flexmls-btn classes — match it to the outline buttons anyway */ .flexmls-count-and-filters-wrapper button, .flexmls-count-and-filters-wrapper input[type="submit"]{ display:inline-flex !important;align-items:center !important;justify-content:center !important; height:38px !important;box-sizing:border-box !important;padding:0 15px !important;margin:0 !important; border-radius:8px !important;border:1.5px solid #334376 !important; background:#fff !important;color:#334376 !important; font-family:'Mulish',sans-serif !important;font-size:13px !important;font-weight:600 !important; line-height:1 !important;white-space:nowrap !important;cursor:pointer !important;} .flexmls-count-and-filters-wrapper button:hover, .flexmls-count-and-filters-wrapper input[type="submit"]:hover{ background:#334376 !important;color:#fff !important;} @media (min-width:761px){ .flexmls-count-and-filters-wrapper{flex-wrap:wrap !important;row-gap:10px !important;} /* ONE control height across the whole toolbar (Brad, 2026-08-03 — "button spacing and margin still off"). Signed in the row mixes three control types that each sized themselves: the plugin's selects ~43px, our text input 36px, the Save button ~41px. box-sizing is the specific reason Save was tallest — height:36px with no box-sizing puts the 1.5px borders OUTSIDE the 36. Type every control identically and the row reads as one strip. */ .flexmls-count-and-filters-wrapper select, .flexmls-count-and-filters-wrapper input, .flexmls-count-and-filters-wrapper button, .flexmls-count-and-filters-wrapper .flexmls-btn{ height:38px !important;box-sizing:border-box !important; margin:0 !important;vertical-align:middle !important;} /* ONE visual language across the row (Brad, 2026-08-04: left and right sides must match). The height rule above equalized size; the plugin's selects still wore their own skin — square corners, different border grey, serif-ish type — so the row read as two different toolbars. Type the selects exactly like our .lc-searches-name input: same border, radius, type, padding. */ /* text-align:left — the plugin ships these selects text-align:right (probed 2026-08-04), which right-shoved both the selected line and every entry in the opened dropdown. text-align-last covers the visible selected line. */ .flexmls-count-and-filters-wrapper select{ border:1px solid #d7dbe4 !important;border-radius:8px !important; background-color:#fff !important;color:#243053 !important; font-family:'Mulish',sans-serif !important;font-size:13px !important; padding:0 10px !important;text-align:left !important;text-align-last:left !important;} /* the plugin's toolbar labels ("Listings Per Page" / "Sort by") — same muted utility voice as our placeholders, so labels don't outweigh controls */ .flexmls-count-and-filters-wrapper .listings-per-page-wrapper label, .flexmls-count-and-filters-wrapper .sort-by-wrapper label{ font-family:'Mulish',sans-serif !important;font-size:13px !important; font-weight:600 !important;color:#6b7288 !important;text-transform:none !important;} /* consistent rhythm: 8px binds a label to its own control, 14px separates one control group from the next. Without typing the per-page wrapper too, its label/select pair kept the plugin's own ragged spacing. */ .flexmls-count-and-filters-wrapper .listings-per-page-wrapper{ display:flex !important;align-items:center !important;gap:8px !important; margin:0 !important;padding:0 !important;float:none !important;} .flexmls-count-and-filters-wrapper .flexmls-filters-wrapper{ gap:14px !important;flex-wrap:wrap !important;} .flexmls-count-and-filters-wrapper{align-items:center !important;column-gap:14px !important;} .flexmls-count-and-filters-wrapper .listings-per-page-wrapper label, .flexmls-count-and-filters-wrapper .sort-by-wrapper label{ margin:0 !important;white-space:nowrap !important;line-height:1 !important;} } /* tablet / narrow desktop — let the strip wrap instead of squeezing the buttons */ @media (max-width:900px){ .lc-lacey-strip{flex-wrap:wrap;} .lc-lacey-who{flex:1 1 200px;} /* stays beside the photo — only the buttons drop */ .lc-lacey-actions{flex:1 1 100%;} .lc-lacey-actions .lc-lacey-btn{flex:1 1 0;} /* the save panel stacks: copy first, then a full-width button. Keeping the CTA edge-to-edge preserves its dominance once it can't sit alongside. */ .lc-save-act{flex:1 1 100%;} .lc-save-cta{width:100%;box-sizing:border-box;} } @media (max-width:760px){ /* hide the hero text entirely on phones → listings show right away */ .lc-search-hero-text{display:none !important;} .brxe-section:has(.lc-search-top-widget){padding-top:12px !important;padding-bottom:12px !important;} .brxe-section:has(.lc-search-top-widget) .lc-idx-standing-disclaimer{font-size:11px !important;margin-top:10px !important;} .lc-results-header{flex-direction:column;align-items:flex-start;padding-top:14px;} /* On phones the inline strip costs too much of the scarce first screen → drop it and keep Lacey reachable from a slim sticky bar instead. The brokerage name rides along in the bar's label line so the §1601-3.3 name-adjacency still holds wherever her name is advertised. */ .lc-lacey-strip{display:none !important;} .lc-lacey-sticky{position:fixed;left:0;right:0;bottom:0;z-index:9990; display:flex;align-items:center;gap:8px;background:#fff; border-top:1px solid #e6e8ec;box-shadow:0 -6px 18px rgba(15,22,48,.12); padding:8px 12px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));} /* THREE equal slots since 2026-08-17: Save (gold) · Call/Text (navy) · Message (outline) — the strip is hidden on phones, so without Message the contact form was unreachable there. Labels kept short to fit 360px. */ .lc-lacey-sticky .lc-lacey-btn{flex:1 1 0;height:42px;font-size:13px; min-width:0;white-space:nowrap;padding-left:6px;padding-right:6px;} /* keep the bar off the last listing card */ body.lc-has-sticky-cta{padding-bottom:70px;} /* save panel on phones — tighter, and the headline steps down so it can't swallow the first screen we just fought to reclaim */ .lc-save-panel{gap:12px;padding:14px 15px;margin:2px 0 12px;border-radius:10px;} .lc-save-panel .lc-save-head{font-size:17px;} .lc-save-panel .lc-save-body{font-size:13.5px;} .lc-save-repeat{margin-top:16px;} /* COMPACTED 2026-08-18 (Brad, from a phone screenshot: "there are no results in the first screen"). Measured at 390px: the panel was 251px tall and the first listing card started 783px down the page, leaving ~29px of it above the sticky bar — a results page whose first screen showed no results. Compacted to 174px; card top moves up ~100px so the photo and the NEW LISTING badge clear the fold. Scoped to the TOP panel only — the repeat band above pagination sits after the results and keeps its full pitch. Chosen over a slim one-line band (Brad's pick, 2026-08-18): the headline, the gold CTA and the sign-in link all survive, so the page's primary conversion keeps its shape, it just stops owning the whole screen. */ .lc-save-panel:not(.lc-save-repeat){gap:9px;padding:12px 14px;margin:2px 0 10px;} .lc-save-panel:not(.lc-save-repeat) .lc-save-head{font-size:15.5px;line-height:1.22;margin:0 0 3px;} .lc-save-panel:not(.lc-save-repeat) .lc-save-fine{margin:0;font-size:11.5px;line-height:1.35;} .lc-save-panel:not(.lc-save-repeat) .lc-save-act{gap:4px;} .lc-save-panel:not(.lc-save-repeat) .lc-save-cta{min-height:44px;font-size:15px;} .lc-save-panel:not(.lc-save-repeat) .lc-save-signin{font-size:11.5px;} /* The middle sentence is the one line the headline and the fine print already cover between them ("get new listings" + "we'll email you"), so it is the cheapest 39px on the panel. Dropped on phones ONLY — a 641-760px tablet has the room, and there is no fold problem to solve there. */ @media (max-width:640px){ .lc-save-panel:not(.lc-save-repeat) .lc-save-body{display:none;} } /* pills become a swipeable strip so they don't eat vertical space on phones */ .lc-quick{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch; width:100%;margin:2px 0 10px;padding-bottom:2px;scrollbar-width:none;} .lc-quick::-webkit-scrollbar{display:none;} .lc-quick-label{display:none;} /* save the row width on mobile */ .lc-qp{flex:0 0 auto;} } /* ---- /MY-SEARCHES PORTAL PAGE (page-id-6157) — 2026-08-05 ------------------ The on-site saved-searches page: [idx_portal_login shown_fields= "log_in,name,searches,carts"] on /my-searches (noindex). Replaces the my.flexmls.com outline button (separate Smart Frame product = login wall). The plugin ships bare markup with inline border/padding styles, so several overrides need !important. Scoped to body.page-id-6157 so the same widget rendered anywhere else (sidebars etc.) is untouched. Signed-out: .dialog header + benefits box + Log In / Sign Up buttons. Signed-in: .my_account_outer > name row + carts/searches link lists (markup read from plugin source components/my-account.php, 3.18.2). CTA ladder: visitors land here from "Saved Searches" on /idx/search, i.e. mostly EXISTING portal members -> Log In wears the zone's one gold. */ body.page-id-6157 .brxe-post-content{max-width:680px;margin:0 auto;} /* -- signed-out: fuse the plugin's two bordered divs into one card -------- */ body.page-id-6157 .dialog.flexmls_log_in__custom{ background:linear-gradient(96deg,#f4f7fc,#eef3fb); border:1px solid #d3dcec !important;border-bottom:0 !important; border-left:4px solid #d0a667 !important;border-radius:12px 12px 0 0; padding:22px 24px 6px !important;text-align:center;} body.page-id-6157 .dialog.flexmls_log_in__custom h6{ margin:0;font-family:'Montserrat',sans-serif;font-size:21px;line-height:1.25; font-weight:700;color:#334376;letter-spacing:-.01em;} body.page-id-6157 .dialog.flexmls_log_in__custom + div{ background:linear-gradient(96deg,#f4f7fc,#eef3fb); border:1px solid #d3dcec !important;border-top:0 !important; border-left:4px solid #d0a667 !important;border-radius:0 0 12px 12px; margin-bottom:0 !important;padding:0 24px 24px !important; font-family:'Mulish',sans-serif;font-size:15px;color:#3f4557;} /* benefits list: centered block, left-aligned text, markers beside the text */ body.page-id-6157 .dialog.flexmls_log_in__custom + div ol{ display:table;text-align:left;margin:10px auto 0; /* table = shrink-wrap width but block flow, so the intro line above keeps its own row */ padding-left:22px !important;text-indent:0 !important;} body.page-id-6157 .dialog.flexmls_log_in__custom + div ol li{ padding:2px 0;line-height:1.5;} body.page-id-6157 .flexmls_dialog__buttons{ display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px !important;} body.page-id-6157 .flexmls_dialog__buttons button{ display:inline-flex;align-items:center;justify-content:center; min-height:46px;padding:0 34px;border-radius:10px;border:0;cursor:pointer; font-family:'Mulish',sans-serif;font-size:15px;font-weight:800;line-height:1.2; white-space:nowrap;transition:background .15s ease,color .15s ease;} body.page-id-6157 .flexmls_dialog__buttons button:first-of-type{ background:#d0a667;color:#3a2c10;box-shadow:0 2px 7px rgba(185,143,78,.34);} body.page-id-6157 .flexmls_dialog__buttons button:first-of-type:hover, body.page-id-6157 .flexmls_dialog__buttons button:first-of-type:focus{ background:#c0954f;color:#3a2c10;} body.page-id-6157 .flexmls_dialog__buttons button:not(:first-of-type){ background:#fff;color:#334376;border:2px solid #334376;} body.page-id-6157 .flexmls_dialog__buttons button:not(:first-of-type):hover, body.page-id-6157 .flexmls_dialog__buttons button:not(:first-of-type):focus{ background:#334376;color:#fff;} /* -- signed-in: the account card ------------------------------------------ */ body.page-id-6157 .my_account_outer{ background:linear-gradient(96deg,#f4f7fc,#eef3fb); border:1px solid #d3dcec;border-left:4px solid #d0a667;border-radius:12px; padding:22px 24px;font-family:'Mulish',sans-serif;} body.page-id-6157 .my_account_outer > span{ /* "Hello, !" row */ font-family:'Montserrat',sans-serif;font-size:20px !important; font-weight:700;color:#334376;letter-spacing:-.01em;} body.page-id-6157 .my_account_outer .flexmls_connect_log_out{ font-size:13px;color:#1c86b4;text-decoration:underline;margin-top:4px;} body.page-id-6157 .my_account_outer .flexmls_connect_log_out:hover, body.page-id-6157 .my_account_outer .flexmls_connect_log_out:focus{color:#334376;} /* carts + searches sit side by side where there's room, stack on phones */ body.page-id-6157 .my_account_outer > div{ display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;margin-top:14px;} body.page-id-6157 .my_account_inner{min-width:0;} body.page-id-6157 .my_account_inner .flexmls_connect__heading{ display:block;margin:0 0 6px;font-family:'Montserrat',sans-serif; font-size:15px;font-weight:700;color:#334376;} body.page-id-6157 .my_account_inner a{ display:inline-block;padding:3px 0;font-size:15px;line-height:1.45; color:#1c86b4;text-decoration:none;overflow-wrap:anywhere;} body.page-id-6157 .my_account_inner a:hover, body.page-id-6157 .my_account_inner a:focus{color:#334376;text-decoration:underline;} /* JS-injected empty state when the visitor has no saved searches (the plugin renders no "My Searches" section at all then — on a page named for it) */ body.page-id-6157 .lc-searches-empty-msg{margin:0 0 4px;font-size:15px;color:#3f4557;} /* the standing route back into search — moved to the BOTTOM of the whole card under a clearly visible full-width divider (Brad, 2026-08-12: the in-column divider wasn't noticeable and the link sat too close to the search rows). Same class on the empty-state's inline link, which keeps its in-flow position and plain styling there. */ /* bottom link row under the full-width divider (Brad, 2026-08-13: one row, not stacked) — "Start a new search" navy left, "Back to your last search" teal right; the back link only renders when this tab browsed results first */ body.page-id-6157 .my_account_outer .lc-card-links{ display:flex;align-items:baseline;justify-content:space-between;gap:12px 18px; flex-wrap:wrap;margin-top:22px;padding-top:16px;border-top:2px solid #d3dcec;} body.page-id-6157 .lc-card-links a.lc-new-search{ font-family:'Mulish',sans-serif;font-size:15px;font-weight:700;color:#334376; text-decoration:none;} body.page-id-6157 .lc-card-links a.lc-new-search:hover, body.page-id-6157 .lc-card-links a.lc-new-search:focus{ color:#1c86b4;text-decoration:underline;} body.page-id-6157 .lc-card-links a.lc-back-search{ font-family:'Mulish',sans-serif;font-size:14px;font-weight:700;color:#1c86b4; text-decoration:none;} body.page-id-6157 .lc-card-links a.lc-back-search:hover, body.page-id-6157 .lc-card-links a.lc-back-search:focus{ color:#334376;text-decoration:underline;} body.page-id-6157 .my_account_inner a.lc-new-search{ display:inline-block;margin-top:8px;font-weight:700;color:#334376;} /* email-preferences note under the new-search link (Brad, 2026-08-13): alert emails come from FlexMLS, so the honest outs are delete-the-search or the per-email unsubscribe link, plus Lacey for address changes */ body.page-id-6157 .lc-email-note{ margin:10px 0 0;font-family:'Mulish',sans-serif;font-size:13.5px; line-height:1.55;color:#5a6172;} body.page-id-6157 .lc-email-note a{color:#1c86b4;text-decoration:none;} body.page-id-6157 .lc-email-note a:hover, body.page-id-6157 .lc-email-note a:focus{color:#334376;text-decoration:underline;} /* saved-search rows + the two-step delete (lc_ss_delete, snippet 44) */ body.page-id-6157 .lc-ss-row{display:flex;align-items:center;justify-content:space-between;gap:10px;} body.page-id-6157 .lc-ss-row a{flex:1 1 auto;min-width:0;} body.page-id-6157 .lc-ss-del{flex:0 0 auto;border:0;background:none;cursor:pointer; font-family:'Mulish',sans-serif;font-size:17px;line-height:1;color:#9aa1b4; padding:3px 7px;border-radius:6px;transition:color .12s ease,background .12s ease;} body.page-id-6157 .lc-ss-del:hover{color:#a94434;background:#f6e9e7;} body.page-id-6157 .lc-ss-del.lc-armed{font-size:12.5px;font-weight:700;color:#fff;background:#a94434;padding:5px 10px;} body.page-id-6157 .lc-ss-del.lc-busy{font-size:12.5px;font-weight:700;color:#9aa1b4;background:none;cursor:default;} body.page-id-6157 .lc-ss-del.lc-ss-del-err{font-size:12.5px;font-weight:700;color:#a94434;background:none;} @media (max-width:719px){ body.page-id-6157 .my_account_outer > div{grid-template-columns:1fr;} body.page-id-6157 .flexmls_dialog__buttons button{flex:1 1 100%;} } /* ---- LAST RULE IN THE FILE, DELIBERATELY ----------------------------------- Hides the plugin's own save controls once our "Your searches" cluster is driving them. It has to be last because of a specificity fight it would otherwise lose: the toolbar rules above type the plugin's buttons via `.flexmls-count-and-filters-wrapper .flexmls-login-buttons .flexmls-btn` (three classes, !important). A two-class hide rule loses outright, and a three-class one only ties — and a tie goes to whichever comes later. Sitting at the end of the stylesheet, the three-class selector wins the tie honestly instead of us stacking `.a.a.a.a` to brute-force it. Only the input / Save / "Save this search" nodes ever get this class — never their wrapper, which can also hold the sort and per-page selects. .click() still fires on a display:none control, which is what lets the cluster drive these while they're hidden. */ .flexmls-count-and-filters-wrapper .flexmls-login-buttons .lc-plugin-save-hidden, .flexmls-count-and-filters-wrapper .flexmls-actions-wrapper .lc-plugin-save-hidden, .flexmls-count-and-filters-wrapper .lc-plugin-save-hidden, .lc-plugin-save-hidden{display:none !important;} /* ---- PHONE REFLOW of the results toolbar (Variant A, Brad 2026-08-17) ------ Below ~640px the signed-in save row and the plugin's sort/per-page toolbar overflowed the viewport sideways by ~250px ("Saved Searches" clipped clean off-screen; audit in tasks.md). Chosen over an Options-sheet hamburger: sort and save are the controls people actually touch mid-search, so they stay visible. Layout: [name + Save] / [Saved Searches] / [Sort · Open Map]. "Listings Per Page" is hidden on phones (desktop tweak; pager unaffected). Mirrors the approved mockup exactly — mockups.py injection, 2026-08-17. LAST in the file on purpose: the mockup validated this cascade position. */ @media (max-width:640px){ .flexmls-count-and-filters-wrapper{display:flex;flex-wrap:wrap;align-items:center;gap:10px;overflow:visible;} .lc-searches{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 100%;width:100%;box-sizing:border-box;} .lc-searches-name{flex:1 1 100%;max-width:none;min-width:0;} .lc-searches-go{flex:0 0 auto;} .lc-searches-link{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* The shrink chain must be UNBROKEN: an earlier min-width:110px floor on the select stopped it shrinking, so at 360px it spilled out of its wrapper and collided with Open Map (measured 12px overlap, 2026-08-17). Every link in the chain gets min-width:0 and the select is allowed to shrink to fit. */ .flexmls-filters-wrapper{display:flex !important;gap:8px;align-items:center;flex:0 1 auto;min-width:0;box-sizing:border-box;margin:0 !important;} .listings-per-page-wrapper{display:none !important;} .sort-by-wrapper{flex:0 1 auto;display:flex !important;align-items:center;gap:8px;min-width:0;margin:0 !important;} .sort-by-wrapper label{flex:0 0 auto;margin:0 !important;font-size:14px;color:#7b8194;} /* flex:0 1 auto, NOT 1 1 auto — a growing select ate the whole row and pushed Open Map onto a line of its own (the extra row this reflow exists to avoid). Size to content, shrink when the row is tight. */ /* text-align needs !important: something upstream computes it to `right`, which left the label text hugging the dropdown arrow. */ .flex_orderby{flex:0 1 auto;min-width:0;width:auto !important;max-width:100%; text-align:left !important;padding-left:10px !important;padding-right:8px !important;} /* Under ~400px the "Sort by" label costs 59px the dropdown needs to show "Recently Updated" without clipping — the select's own first option reads "Sort by", so nothing is lost. */ @media (max-width:400px){ .sort-by-wrapper label{display:none !important;} } .flexmls-actions-wrapper{display:flex;justify-content:flex-end;margin:0 !important;flex:0 0 auto;} }