/* ==========================================================================
   styles_details.css
   NEW 8 September 2026. Phase 3 of MLS-Revitalisation-Plan.md, rollout step 2.

   For details_new.php ONLY, every business listing page on the site. Opted in
   with body class="mls-modern mls-details", so styles_modern.css must load
   first for the palette, the header and the shared sidebar cards.

   Same treatment as search.php, deliberately: SR's brief was "similar look to
   the search results". Two column grid, results-style cards, one quiet sidebar,
   and the sidebar cards themselves come from styles_modern.css so the two pages
   cannot drift apart.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THE PAGE FRAME
   styles_modern.css strips .main_page in its neutraliser, so it is rebuilt here
   as the grid. GRID AREAS, not source order: on this page column-right comes
   BEFORE column-center in the markup and that is left alone, because moving a
   div in a 2,300 line file to save a CSS line is a bad trade. Grid places by
   area regardless.
   -------------------------------------------------------------------------- */
body.mls-modern.mls-details .main_page{
  max-width:1180px;margin:0 auto;padding:16px 20px 44px;background:none;
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  grid-template-areas:"crumbs crumbs" "main side";
  column-gap:34px;
  align-items:start}
body.mls-modern.mls-details .breadcrumbs{grid-area:crumbs}
body.mls-modern.mls-details .column-center{
  grid-area:main;width:auto;max-width:none;min-width:0;display:block;float:none;margin:0}
body.mls-modern.mls-details .column-right{
  grid-area:side;width:auto;min-width:0;display:block;float:none;margin:0;
  position:sticky;top:16px}
body.mls-modern.mls-details .menu_left{display:none}

@media(max-width:980px){
  body.mls-modern.mls-details .main_page{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"crumbs" "main" "side";
    row-gap:8px}
  body.mls-modern.mls-details .column-right{position:static;margin-top:14px}
}

/* --------------------------------------------------------------------------
   2. TYPE
   -------------------------------------------------------------------------- */
body.mls-modern.mls-details h1{
  font-size:34px;line-height:1.15;font-weight:700;color:var(--m-ink);
  letter-spacing:-.5px;margin:0 0 10px}
@media(max-width:900px){body.mls-modern.mls-details h1{font-size:27px}}
body.mls-modern.mls-details h2{
  font-size:21px;font-weight:700;color:var(--m-ink);margin:30px 0 12px;letter-spacing:-.2px}
body.mls-modern.mls-details h3{font-size:17px;font-weight:700;color:var(--m-ink);margin:22px 0 8px}
body.mls-modern.mls-details .column-center{font-size:17px;line-height:1.6;color:var(--m-ink)}
body.mls-modern.mls-details .breadcrumbs{font-size:15px;color:var(--m-muted);margin:0 0 12px}
body.mls-modern.mls-details .breadcrumblink{display:inline}
body.mls-modern.mls-details .breadcrumbs a{color:var(--m-muted);text-decoration:none}
body.mls-modern.mls-details .breadcrumbs a:hover{color:var(--m-green);text-decoration:underline}
/* :where() to LOWER the weight, same reason as the other two pages: a 0,3,1
   rule here would outrank every component that styles its own links, which is
   exactly how the green-on-green button happened on checkout1. */
:where(body.mls-modern.mls-details) .column-center a{color:var(--m-green)}

/* --------------------------------------------------------------------------
   3. THE DETAIL PANELS
   The legacy page draws its address block and its review rows with a 2px
   #D5D5D5 border and a 5px radius, the old card treatment. Brought onto the
   result-card treatment so a listing page and a results page look like the same
   website.
   -------------------------------------------------------------------------- */
body.mls-modern.mls-details .details_box,
body.mls-modern.mls-details .business_details,
body.mls-modern.mls-details .details_panel{
  background:#fff;border:1px solid var(--m-line) !important;border-radius:12px !important;
  box-shadow:0 1px 2px rgba(16,32,24,.05);padding:16px 18px !important;margin:0 0 16px}

/* THE REVIEW BOXES. Corrected 8 September 2026: SR said the reviews "look a bit
   odd on the page and look like a transparency gone wrong". They did, and that
   is literally what was happening. The class is `.detailsreview`, not the
   `.review_box` and `.review` I guessed at when this file was written, so none
   of the rules above were reaching them. What they had instead was the legacy
   `.detailsreview{border:2px solid #D5D5D5;border-radius:5px}` with NO
   background at all, so the eggshell showed straight through a bordered box.
   On the old white-ish ground nobody would have noticed.
   White fill, the stronger line, and the same 12px card treatment as everything
   else on the page. */
body.mls-modern.mls-details .detailsreview{
  background:#fff;border:1px solid var(--m-line-2) !important;border-radius:12px !important;
  box-shadow:0 1px 2px rgba(16,32,24,.05);padding:14px 16px;margin:0 0 14px}
body.mls-modern.mls-details .review_rating_block{padding:0 0 6px}
body.mls-modern.mls-details .review_review{padding:0 0 4px}
body.mls-modern.mls-details .opening_hours td,
body.mls-modern.mls-details .opening_times td{padding:4px 18px 4px 0;font-size:16px;color:var(--m-muted)}

/* --------------------------------------------------------------------------
   4. THE RECENT REVIEWS PANEL in the sidebar, drawn by recent_reviews.php.
   That include is not on the drive, so these selectors are written against the
   class names the live page uses and nothing is assumed about its markup
   beyond them. Anything it renders that is not matched here simply keeps its
   legacy look rather than breaking.
   -------------------------------------------------------------------------- */
/* The recent reviews panel takes the SAME stronger line as the review boxes it
   is a summary of, so the two read as one family. */
body.mls-modern.mls-details .column-right .recentReviews,
body.mls-modern.mls-details .column-right .recent_reviews{
  background:#fff;border:1px solid var(--m-line-2);border-radius:12px;
  box-shadow:0 1px 2px rgba(16,32,24,.05);padding:16px 18px;margin:0 0 16px}
/* The rule under the heading is gone, 8 September 2026, SR: "extra line under
   Recent Reviews not needed". He is right: the card already has an edge and the
   heading already has weight and letterspacing, so the rule was a third way of
   saying the same thing. */
body.mls-modern.mls-details .recentReviewsHeader,
body.mls-modern.mls-details .recent_reviews_header{
  font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--m-muted);margin:0 0 12px;padding-bottom:0;border-bottom:0}
body.mls-modern.mls-details .column-right{font-size:16px;line-height:1.5}
/* :where() AGAIN, and this one was caught by rendering the mockup rather than by
   reading the file. Written plainly as `.mls-details .column-right a` it scores
   0,3,1 and loads after styles_modern.css, so it beat
   `body.mls-modern .side_action_primary` at 0,2,0 and painted the "Review this
   business" button's text green ON the green button. Invisible. That is the
   third time this exact fault has appeared in this rollout, after the checkout1
   Total cost button and the search page links: a broad descendant link colour
   will always outrank a component that styles its own, unless its weight is
   lowered on purpose. */
:where(body.mls-modern.mls-details) .column-right a{color:var(--m-green);text-decoration:none}
:where(body.mls-modern.mls-details) .column-right a:hover{text-decoration:underline}

/* --------------------------------------------------------------------------
   5. THE ACTION ROW, used by mockup B only.
   Four buttons in a row directly under the H1 rather than in the sidebar. Kept
   in this file whichever mockup SR picks, because it costs nothing and it is
   the natural mobile layout for the sidebar card either way.
   -------------------------------------------------------------------------- */
body.mls-modern.mls-details .detail_actions{
  display:flex;flex-wrap:wrap;gap:9px;margin:0 0 22px}
body.mls-modern.mls-details .detail_actions .side_action{margin:0;padding:10px 18px;flex:0 0 auto}

/* --------------------------------------------------------------------------
   6. THE SHARE BAR, 8 September 2026.
   Replaces the third party ShareThis script that header-details.php loaded on
   every listing page. Same design as the Trusted Trader sites, which SR asked
   for because the solid brand colours give the page some warmth: rebuilt from
   their live markup rather than ported, because the TT include is not on the
   Synology drive. It carries no TT branding, and could not: it is four share
   URLs and a button.

   Solid brand colours here and NOWHERE ELSE on the site. That is deliberate and
   is the exception that proves the palette rule: a Facebook button that is not
   Facebook blue reads as a link rather than a share button, and these five are
   the only place the site borrows somebody else's colour.
   -------------------------------------------------------------------------- */
body.mls-modern.mls-details .mls-share{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 20px}
body.mls-modern.mls-details .mls-share-btn{
  display:inline-block;font-family:inherit;font-size:15px;font-weight:700;line-height:1;
  padding:9px 14px;border-radius:8px;border:0;color:#fff;text-decoration:none;
  cursor:pointer;white-space:nowrap;transition:filter .15s ease}
body.mls-modern.mls-details .mls-share-btn:hover{filter:brightness(1.12);color:#fff}
body.mls-modern.mls-details .mls-share-btn:focus-visible{outline:2px solid var(--m-yellow);outline-offset:2px}
body.mls-modern.mls-details .s-native{background:#2f6fb5}
body.mls-modern.mls-details .s-fb{background:#1877f2}
body.mls-modern.mls-details .s-x{background:#111}
body.mls-modern.mls-details .s-wa{background:#1faa53}
body.mls-modern.mls-details .s-em{background:#5d6b64}
/* The share links sit inside .column-center, whose link colour would otherwise
   repaint them green on their own brand colour. Same green-on-green trap as the
   sidebar buttons, so the same answer: raise this one above the :where() rule
   rather than lowering that one, because these five are genuinely special. */
body.mls-modern.mls-details .column-center a.mls-share-btn{color:#fff}
/* "Add your own business" is no longer a card, 8 September 2026. SR: it "looks
   plonked on. Forget the white surround and lets make that a green pill with
   white text and a rollover like the Review this business pill."
   He is right and the reason is the same one that started the colour change: a
   white card with one outline button inside it is a container around a container,
   and on a warm ground the outer one has nothing to justify it. The card is
   stripped back to nothing and the button carries itself. */
body.mls-modern.mls-details .side_card_quiet{
  background:none;border:0;box-shadow:none;padding:0;margin:0}
body.mls-modern.mls-details .side_card_quiet .side_action{margin:0}


/* ==========================================================================
   7. MOCKUP B, the listing page redesign. Stage 44, 15 October 2026.
   Agreed by SR 14/10/26: MLS\Design Drafts\Listing-Page-Mockups-2026-10-14\BRIEF.md.
   A top card (logo, name, trade and town, stars, Call as the main button),
   then the main column (key info with a photo, About, Photos, Video, Reviews)
   and a right column (hours, payment, categories, share).
   Page scoped, prefix mx-. Sections 1 to 6 above still apply where not
   overridden here; where a rule here wins, it is placed later at the same or
   higher weight on purpose.
   ========================================================================== */
body.mls-modern.mls-details .main_page{
  grid-template-columns:minmax(0,1fr) 340px;
  grid-template-areas:"crumbs crumbs" "hero hero" "main side";
  column-gap:22px}
body.mls-modern.mls-details .column-right{position:static}
@media(max-width:980px){
  body.mls-modern.mls-details .main_page{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"crumbs" "hero" "main" "side"}
}

/* ---------- cards ---------- */
body.mls-modern.mls-details .mx-card{
  background:#fff;border:1px solid var(--m-line);border-radius:14px;
  box-shadow:0 1px 2px rgba(16,32,24,.05),0 4px 14px rgba(16,32,24,.06);
  padding:22px 24px;margin:0 0 22px}
body.mls-modern.mls-details .mx-card h2{font-size:21px;font-weight:700;margin:0 0 12px;color:var(--m-ink)}
@media(max-width:560px){body.mls-modern.mls-details .mx-card{padding:18px 16px;margin-bottom:16px}}

/* ---------- the top card ---------- */
body.mls-modern.mls-details .mx-hero{
  grid-area:hero;background:#fff;border:1px solid var(--m-line);border-radius:14px;
  box-shadow:0 1px 2px rgba(16,32,24,.05),0 4px 14px rgba(16,32,24,.06);
  padding:24px 26px;margin:0 0 22px;
  display:grid;grid-template-columns:150px minmax(0,1fr) 250px;
  grid-template-areas:"logo id acts" "logo desc acts";
  column-gap:24px;row-gap:6px;align-items:center}
body.mls-modern.mls-details .mx-hero.mx-nologo{
  grid-template-columns:minmax(0,1fr) 250px;grid-template-areas:"id acts" "desc acts"}
body.mls-modern.mls-details .mx-logo{grid-area:logo;display:flex;align-items:center;justify-content:center}
body.mls-modern.mls-details .mx-logo img{
  display:block;max-width:150px !important;max-height:150px;width:auto;height:auto;
  object-fit:contain;border-radius:10px;margin:0 !important;float:none !important}
body.mls-modern.mls-details .mx-id{grid-area:id;min-width:0;align-self:end}
body.mls-modern.mls-details .mx-hero h1{margin:0 0 4px}
body.mls-modern.mls-details .mx-type{font-size:18px;color:var(--m-muted);margin:0 0 8px}
body.mls-modern.mls-details .mx-desc{grid-area:desc;margin:0;font-size:17px;line-height:1.5;color:var(--m-ink);align-self:start}
body.mls-modern.mls-details .mx-hero .review_stars{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;padding:0;border:0;font-size:16px}
body.mls-modern.mls-details .mx-hero .review_stars .stars{display:inline-flex;gap:2px;float:none}
body.mls-modern.mls-details .mx-hero .review_stars .stars img{width:20px;height:20px}
body.mls-modern.mls-details .mx-hero .review_num{display:inline;float:none;margin:0;color:var(--m-ink)}
body.mls-modern.mls-details .mx-hero .review_num a{color:var(--m-green);font-weight:400}

body.mls-modern.mls-details .mx-acts{grid-area:acts;display:flex;flex-direction:column;gap:10px}
body.mls-modern.mls-details .mx-row{display:flex;gap:10px}
body.mls-modern.mls-details .mx-row .mx-btn{flex:1 1 0}

/* buttons: section 7 and 10 of the style guide, one explicit height */
body.mls-modern.mls-details .mx-btn{
  display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  height:46px;padding:0 16px;border-radius:10px;font-family:inherit;font-size:16px;font-weight:700;
  line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap;
  background:#fff;color:var(--m-green) !important;border:2px solid var(--m-green)}
body.mls-modern.mls-details .mx-btn:hover{background:var(--m-green-lt);text-decoration:none}
body.mls-modern.mls-details .mx-btn-pri{
  height:50px;font-size:17px;background:var(--m-green);color:#fff !important;border-color:var(--m-green)}
body.mls-modern.mls-details .mx-btn-pri:hover{background:var(--m-green-dk);border-color:var(--m-green-dk)}
body.mls-modern.mls-details .mx-btn-inline{margin-top:14px}

@media(max-width:900px){
  body.mls-modern.mls-details .mx-hero,
  body.mls-modern.mls-details .mx-hero.mx-nologo{
    grid-template-columns:72px minmax(0,1fr);
    grid-template-areas:"logo id" "acts acts" "desc desc";
    padding:18px 16px;row-gap:14px;column-gap:14px;align-items:center}
  body.mls-modern.mls-details .mx-hero.mx-nologo{
    grid-template-columns:minmax(0,1fr);grid-template-areas:"id" "acts" "desc"}
  body.mls-modern.mls-details .mx-logo img{max-width:72px !important;max-height:72px}
  body.mls-modern.mls-details .mx-id{align-self:center}
  body.mls-modern.mls-details .mx-type{font-size:16px;margin-bottom:6px}
}

/* ---------- key info, with the photo beside it ---------- */
body.mls-modern.mls-details .mx-key{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
body.mls-modern.mls-details .mx-key.mx-has-ph{grid-template-columns:minmax(0,1fr) 240px}
body.mls-modern.mls-details .mx-key .details_box{
  background:none;border:0 !important;border-radius:0 !important;box-shadow:none;
  padding:0 !important;margin:0}
body.mls-modern.mls-details .mx-key .details_address{float:none;width:auto;margin:0}
body.mls-modern.mls-details .mx-key .org{font-weight:700}
body.mls-modern.mls-details .mx-key .tel{display:block !important;margin:8px 0 0 !important;padding:0 !important}
body.mls-modern.mls-details .mx-key .ellipses{margin-top:6px}
body.mls-modern.mls-details .mx-kph img{
  display:block;width:100% !important;max-width:none !important;height:auto;max-height:260px;
  object-fit:cover;border-radius:10px}
body.mls-modern.mls-details .mx-maplink{margin-top:8px}
body.mls-modern.mls-details .mx-maplink a{font-weight:700;text-decoration:underline}
body.mls-modern.mls-details #map-canvas{width:100%;height:320px;border-radius:10px;margin-top:12px}
@media(max-width:560px){
  body.mls-modern.mls-details .mx-key.mx-has-ph{grid-template-columns:minmax(0,1fr)}
  body.mls-modern.mls-details .mx-kph{order:-1}
}

/* ---------- About, offers, badges ---------- */
body.mls-modern.mls-details .mx-about .description,
body.mls-modern.mls-details .mx-about .mx-prem{font-size:17px;line-height:1.6}
body.mls-modern.mls-details .mx-extra{margin-top:14px;font-size:16px}
body.mls-modern.mls-details .mx-about img{max-width:100%;height:auto}
body.mls-modern.mls-details .mx-badges .details_hr{clear:both;height:12px}
body.mls-modern.mls-details .mx-badges::after{content:"";display:block;clear:both}
body.mls-modern.mls-details .mx-offer > br{display:none}

/* ---------- Photos: 4 across, first 8, then Show all ---------- */
body.mls-modern.mls-details .mx-gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
body.mls-modern.mls-details .mx-gal .imageGallery{display:block;float:none;margin:0;padding:0;width:auto}
body.mls-modern.mls-details .mx-gal .imageGallery img{
  float:none !important;display:block;width:100% !important;max-width:none !important;
  height:130px !important;max-height:none !important;object-fit:cover;border-radius:8px}
body.mls-modern.mls-details .mx-gal .imageGallery > div{display:none}
body.mls-modern.mls-details .mx-gal .imageGallery:nth-child(n+9){display:none}
body.mls-modern.mls-details .mx-gal.mx-all .imageGallery{display:block}
@media(max-width:560px){
  body.mls-modern.mls-details .mx-gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.mls-modern.mls-details .mx-gal .imageGallery img{height:120px !important}
}

/* ---------- Video ---------- */
body.mls-modern.mls-details .mx-video > br{display:none}
body.mls-modern.mls-details .mx-video .videoParent{margin:0 0 12px}
body.mls-modern.mls-details .mx-video iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:10px}

/* ---------- Reviews, in full, rules between them rather than cards in a card ---------- */
body.mls-modern.mls-details .mx-reviews .detailsreview{
  border:0 !important;border-top:1px solid var(--m-line) !important;border-radius:0 !important;
  box-shadow:none;padding:16px 0 4px;margin:0}
body.mls-modern.mls-details .mx-reviews > div > br:first-child{display:none}
body.mls-modern.mls-details .mx-none{margin:0}

/* ---------- the quiet card at the foot ---------- */
body.mls-modern.mls-details .mx-info{font-size:15px;color:var(--m-muted);box-shadow:none}
body.mls-modern.mls-details .mx-info h2{font-size:17px;margin:0 0 6px}
body.mls-modern.mls-details .mx-attr{margin:0 0 22px}
body.mls-modern.mls-details .mx-misc{height:0;overflow:hidden}

/* ---------- right column ---------- */
body.mls-modern.mls-details .mx-side{padding:16px}
body.mls-modern.mls-details .mx-panel{background:var(--m-green-lt);border-radius:10px;padding:14px 16px;margin:0 0 12px}
body.mls-modern.mls-details .mx-panel h3{
  font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--m-green-dk);margin:0 0 8px}
body.mls-modern.mls-details .mx-hours{font-size:16px;line-height:1.6}
body.mls-modern.mls-details .mx-hours .opening_times_day,
body.mls-modern.mls-details .mx-hours div[style]{display:inline-block;float:none !important;width:108px !important}
body.mls-modern.mls-details .mx-chips{display:flex;flex-wrap:wrap;gap:6px}
body.mls-modern.mls-details .mx-chips span,
body.mls-modern.mls-details .mx-cats .tags a{
  display:inline-block;background:#fff;border-radius:999px;padding:4px 12px;
  font-size:16px;line-height:1.4;color:var(--m-ink)}
/* the category links arrive as "a, b, c": hide the commas, chip the links */
body.mls-modern.mls-details .mx-cats .tags{display:flex;flex-wrap:wrap;gap:6px;font-size:0}
body.mls-modern.mls-details .mx-cats .tags a{color:var(--m-green) !important;text-decoration:none}
body.mls-modern.mls-details .mx-cats .tags a:hover{text-decoration:underline}
body.mls-modern.mls-details .mx-social{margin:0 0 10px}
body.mls-modern.mls-details .mx-social br{display:none}
body.mls-modern.mls-details .mx-social span{display:inline-block;margin-right:6px}
body.mls-modern.mls-details .mx-share-lbl{font-size:15px;color:var(--m-muted);margin:4px 2px 8px}
body.mls-modern.mls-details .mx-side .mls-share{margin:0}
body.mls-modern.mls-details .column-right a.mls-share-btn{color:#fff}
body.mls-modern.mls-details .mx-side-acts{display:flex;flex-direction:column;gap:10px;margin:0 0 22px}
body.mls-modern.mls-details .mx-side-acts .side_action{margin:0;text-align:center}

/* ---------- photo viewer, Stage 45, 15 October 2026 ----------
   SR: the gallery thumbnails are small, so a visitor can open any photo full
   size. Plain script, no library: click a photo, step with the arrows or the
   keyboard, close with the cross, Escape or a click outside the photo. */
body.mls-modern.mls-details .mx-gal img,
body.mls-modern.mls-details .mx-kph img{cursor:zoom-in}
body.mls-modern.mls-details .mx-lb{
  position:fixed;inset:0;z-index:10000;background:rgba(10,20,15,.92);
  display:flex;align-items:center;justify-content:center;padding:56px 64px}
body.mls-modern.mls-details .mx-lb[hidden]{display:none}
body.mls-modern.mls-details .mx-lb img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  border-radius:8px;box-shadow:0 6px 26px rgba(0,0,0,.4);cursor:default}
body.mls-modern.mls-details .mx-lb button{
  position:absolute;width:46px;height:46px;border:0;border-radius:999px;
  background:#fff;color:var(--m-ink);font:700 28px/1 inherit;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
body.mls-modern.mls-details .mx-lb button:hover{background:var(--m-green-lt)}
body.mls-modern.mls-details .mx-lb button:focus-visible{outline:3px solid var(--m-yellow);outline-offset:2px}
body.mls-modern.mls-details .mx-lb-x{top:14px;right:14px}
body.mls-modern.mls-details .mx-lb-prev{left:12px;top:50%;margin-top:-23px}
body.mls-modern.mls-details .mx-lb-next{right:12px;top:50%;margin-top:-23px}
body.mls-modern.mls-details .mx-lb-n{
  position:absolute;bottom:16px;left:0;right:0;text-align:center;color:#fff;font-size:16px}
@media(max-width:560px){
  body.mls-modern.mls-details .mx-lb{padding:60px 8px}
  body.mls-modern.mls-details .mx-lb-prev,
  body.mls-modern.mls-details .mx-lb-next{top:auto;bottom:8px;margin:0}
}

/* ---------- the member's preview bar, Stage 47 ---------- */
/* Yellow FIELD, dark text, dark green edge and buttons: the second exception to
   style guide section 3, after the member area checkout bar, for the same reason.
   It is the one action a member must not miss. SR 15/10/26. */
body.mls-modern.mls-details .mx-preview{background:#fece0b;border:0;border-top:4px solid var(--m-green-dk);color:var(--m-ink)}
body.mls-modern.mls-details .mx-preview h2{color:var(--m-ink)}
body.mls-modern.mls-details .mx-preview p{margin:0 0 14px;color:var(--m-ink)}
body.mls-modern.mls-details .mx-preview .mx-row{max-width:520px}
body.mls-modern.mls-details .mx-preview .mx-btn,
body.mls-modern.mls-details .mx-prev-bar .mx-btn{border-color:var(--m-green-dk);color:var(--m-green-dk) !important}
body.mls-modern.mls-details .mx-preview .mx-btn-pri,
body.mls-modern.mls-details .mx-prev-bar .mx-btn-pri{background:var(--m-green-dk);color:#fff !important}
body.mls-modern.mls-details .mx-preview .mx-btn-pri:hover,
body.mls-modern.mls-details .mx-prev-bar .mx-btn-pri:hover{background:#07431f;border-color:#07431f}
body.mls-modern.mls-details .mx-prev-warn{background:#fff;border-radius:7px;padding:10px 14px}
body.mls-modern.mls-details .mx-prev-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:9000;background:#fece0b;border-top:3px solid var(--m-green-dk);
  display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 16px;
  box-shadow:0 -4px 18px rgba(0,0,0,.18);font-size:17px;color:var(--m-ink)}
body.mls-modern.mls-details .mx-prev-bar .mx-btn{height:44px;padding:0 18px}
body.mls-modern.mls-details:has(.mx-prev-bar){padding-bottom:80px}
@media(max-width:560px){
  body.mls-modern.mls-details .mx-prev-bar{flex-wrap:wrap;gap:8px;padding:8px 10px}
  body.mls-modern.mls-details .mx-prev-bar span{flex:1 0 100%;text-align:center;font-size:15px}
  body.mls-modern.mls-details .mx-prev-bar .mx-btn{flex:1 1 0;height:42px;padding:0 8px;font-size:15px}
  body.mls-modern.mls-details:has(.mx-prev-bar){padding-bottom:120px}
}

/* --------------------------------------------------------------------------
   Stage 53, 18/10/26, mobile fixes from SR's phone test.
   1. A long web address typed into a member's text ran off the screen and let the
      page slide sideways. Any unbroken string now wraps inside its card, and the
      Website line in the key info wraps instead of being cut off with dots.
   2. On a phone the whole sidebar moves into the main column above Reviews.
      Stage 55: this is done by a script in details_new.php that MOVES the nodes
      into #mx_side_m, replacing the Stage 53 duplicate panels.
   -------------------------------------------------------------------------- */
body.mls-modern.mls-details .mx-card,
body.mls-modern.mls-details .mx-hero{overflow-wrap:break-word}
/* Stage 56, 18/10/26: was overflow-wrap:anywhere with word-break:break-word, which also
   shrinks a box's narrowest width to one letter, so on desktop "View map" squeezed in beside
   the floated address one letter per line. break-word wraps a long address the same way
   without that side effect, and the address box no longer floats. */
body.mls-modern.mls-details .mx-key .details_box{float:none;width:auto}
body.mls-modern.mls-details .mx-key .ellipses{white-space:normal;overflow:visible}
@media(max-width:980px){
  body.mls-modern.mls-details.mx-side-moved .column-right{display:none}
  body.mls-modern.mls-details #mx_side_m .mx-side-acts{margin:0 0 16px}
}

/* Stage 61, 18/10/26, SR: the white Edit button on a listing disappeared, and members
   need to find it to edit and upgrade. It is now the brand yellow, the same logic as the
   solid green View your listing tile on the control panel (Stage 60). Add your own
   business stays green. */
body.mls-modern.mls-details .mx-side-acts a.side_action:not(.side_action_primary){
  background:var(--m-yellow);border-color:var(--m-yellow);color:var(--m-ink) !important;
  box-shadow:0 2px 0 #c9a200}
body.mls-modern.mls-details .mx-side-acts a.side_action:not(.side_action_primary):hover{
  background:#e8b900;border-color:#e8b900;text-decoration:none}