/* Modern direction: airy whitespace, geometric sans, single restrained accent. */
:root {
    --accent: #1c6e5c;
    --ink: #16181b;
    --ink-soft: #565c63;
    --line: #e7e5e0;
    --bg: #ffffff;
    --bg-soft: #f7f6f3;
    --radius: 10px;
    --shadow: 0 1px 2px rgba(20,20,20,.04), 0 8px 24px rgba(20,20,20,.06);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* Colorblind-safe status colors -- same basic palette used in the admin panel. */
    --basic-green: #16a34a;
    --basic-red: #dc2626;
}

.alert { padding: 14px 18px; border-radius: var(--radius); font-size: 14px; margin-bottom: 20px; }
.alert.success { background: color-mix(in srgb, var(--basic-green) 12%, white); color: #0f5c2e; border: 1px solid color-mix(in srgb, var(--basic-green) 35%, white); }
.alert.error { background: color-mix(in srgb, var(--basic-red) 10%, white); color: #8a1c1c; border: 1px solid color-mix(in srgb, var(--basic-red) 35%, white); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* Skip link -- hidden off-screen until keyboard-focused (WCAG 2.4.1). */
.skip-link {
    position: absolute; top: -40px; left: 0; z-index: 100;
    background: var(--ink); color: var(--bg) !important;
    padding: 10px 18px; border-radius: 0 0 var(--radius) 0;
    font-size: 14px; font-weight: 700;
    transition: top .15s ease;
}
.skip-link:focus { top: 0; }

/* Visually hidden but still announced by screen readers -- for a page's H1
   when the visible content below already communicates the same title, so
   the page keeps a real H1 for a11y/SEO without a redundant on-screen line. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Header -- dark glass bar, brand accent reserved for the CTA + logo dot so it
   reads as a premium hospitality nav rather than a plain content-site bar. */
.site-header {
    border-bottom: none;
    position: sticky; top: 0; z-index: 20;
    background: rgba(76,99,116,.5);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0,0,0,.15);
}
.site-header .row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 24px; max-width: 1120px; margin: 0 auto;
}
.logo { font-size: 20px; font-weight: 700; letter-spacing: .04em; display: flex; align-items: center; color: #fff; flex-shrink: 0; }
.logo .accent-dot { color: var(--accent); }
.logo-img { height: 42px; width: auto; }
nav.main-nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px 22px; font-size: 13px; }
nav.main-nav a { color: rgba(255,255,255,.72); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; transition: color .15s ease; white-space: nowrap; }
nav.main-nav a:hover, nav.main-nav a.active { color: #fff; }
.nav-cta {
    background: var(--accent); color: #fff !important; padding: 10px 20px;
    border-radius: 999px; font-size: 14px; font-weight: 700; letter-spacing: .02em;
    transition: transform .15s ease, filter .15s ease; display: inline-block; white-space: nowrap;
}
.nav-cta:hover { filter: brightness(1.12); transform: translateY(-1px); }
.lang-toggle {
    font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.7);
    border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 6px 12px;
    transition: border-color .15s ease, color .15s ease; white-space: nowrap;
}
.lang-toggle:hover { border-color: #fff; color: #fff; }

/* Nav groups -- consolidates lifestyle/market-FAQ pages ("The Resort",
   "Owners & Buyers", "Miami Beach Guide") behind a dropdown instead of every
   page sitting at the top level (was ~15 links wide). Hover/focus-within
   covers mouse and keyboard; .open (toggled by nav-toggle.js) covers touch
   devices at desktop width, where hover never fires. */
.nav-group { position: relative; }
.nav-group-toggle {
    background: transparent; border: none; padding: 0; margin: 0; font: inherit;
    color: rgba(255,255,255,.72); text-transform: uppercase; letter-spacing: .05em;
    font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 4px;
}
.nav-group-toggle::after { content: '▾'; font-size: 9px; }
.nav-group-toggle:hover, .nav-group.active .nav-group-toggle { color: #fff; }
.nav-group-menu {
    display: none; flex-direction: column; gap: 2px;
    position: absolute; top: calc(100% + 14px); left: 0; min-width: 190px; z-index: 30;
    background: rgba(12,21,40,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-radius: 10px; padding: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.nav-group:hover .nav-group-menu, .nav-group:focus-within .nav-group-menu, .nav-group.open .nav-group-menu { display: flex; }
.nav-group-menu a { padding: 8px 12px; border-radius: 6px; }
.nav-group-menu a:hover, .nav-group-menu a.active { background: rgba(255,255,255,.1); }

/* Mobile menu toggle -- hidden on desktop, where nav.main-nav renders inline. */
.nav-toggle {
    display: none; flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; width: 42px; height: 42px; padding: 0; margin-left: auto;
    background: transparent; border: 1px solid rgba(255,255,255,.35); border-radius: 8px;
    cursor: pointer; flex-shrink: 0;
}
.nav-toggle-bar { display: block; width: 20px; height: 2px; background: #fff; border-radius: 1px; }

/* Below ~860px the expanded nav (9 links + lang toggle + phone) no longer
   fits beside the logo without squeezing it. Collapse it behind the
   hamburger toggle instead of stacking/wrapping every link under the logo --
   wrapping ~250px of nav text above the fold pushed all real page content
   (hero, listings) below the initial mobile viewport entirely. */
@media (max-width: 860px) {
    .site-header .row { flex-wrap: wrap; }
    .nav-toggle { display: flex; }
    nav.main-nav {
        display: none; width: 100%; flex-direction: column; align-items: flex-start;
        gap: 16px; padding-top: 16px; margin-top: 14px; border-top: 1px solid rgba(255,255,255,.15);
    }
    nav.main-nav.nav-open { display: flex; }
    /* On mobile the whole nav is already a vertical overlay -- no need for a
       hover/tap dropdown, just show each group's links inline under its label. */
    .nav-group-toggle { pointer-events: none; }
    .nav-group-toggle::after { display: none; }
    .nav-group-menu {
        display: flex; position: static; background: transparent; box-shadow: none;
        backdrop-filter: none; padding: 4px 0 4px 16px;
    }
}

/* Hero */
.hero {
    padding: 100px 24px 76px; text-align: center;
    background:
        radial-gradient(ellipse 900px 500px at 50% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent),
        var(--bg-soft);
    border-bottom: 1px solid var(--line);
    position: relative;
}
.hero h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 700; letter-spacing: -.02em; margin: 0 0 16px; max-width: 780px; margin-left: auto; margin-right: auto; }
.hero p { font-size: 18px; color: var(--ink-soft); max-width: 560px; margin: 0 auto 32px; }

/* Photo hero, both brands (see index.php for which photo each gets) -- the
   brand intro (title/tagline) and the lead-gen search merged into one card
   floating over a full-bleed photo, translucent so the photo shows through. */
.hero--photo {
    min-height: 560px; display: flex; align-items: center; justify-content: center;
    background: transparent;
    padding-top: 48px; padding-bottom: 48px;
}
.hero--tight { min-height: 0; padding-top: 40px; padding-bottom: 32px; }
/* Photo layer is separate from the dark-overlay layer so it alone can fade
   out at the bottom edge, revealing the page's own persistent background
   through the (transparent) section instead of cutting hard into it. */
.hero--photo::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background-image: var(--hero-photo);
    background-size: cover; background-position: center; background-color: var(--bg-soft);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 75%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 75%, transparent 100%);
}
.hero--photo::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    /* David, 2026-07-16: "banner [hero darkening overlay] should be 10% more
       transparent" -- both stops reduced by .1 (10 percentage points). */
    background: linear-gradient(180deg, rgba(10,10,10,0), rgba(10,10,10,.2));
}
.hero--photo .hero-panel {
    position: relative; z-index: 2;
    background: rgba(255,255,255,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    padding: 32px 40px; border-radius: 20px; box-shadow: 0 12px 36px rgba(20,20,20,.22);
    border: 1px solid rgba(255,255,255,.5); max-width: 920px;
}
.hero-panel--wide { max-width: 1160px; }
.hero--photo h1, .hero--photo p { margin-left: 0; margin-right: 0; }

.hero-divider { border-top: 1px solid rgba(20,20,20,.12); margin: 20px 0; }
.hero-positioning { text-align: left; max-width: 920px; }
.hero-eyebrow {
    margin: 0 0 10px !important; max-width: none !important;
    color: var(--color-action) !important; font-family: var(--font-body);
    font-size: 12px !important; font-weight: 800; letter-spacing: .12em;
    line-height: 1.3; text-transform: uppercase;
}
.hero-positioning h1 {
    max-width: 860px; margin: 0 0 14px; font-size: clamp(38px, 5vw, 66px);
    line-height: 1.02; letter-spacing: -.035em;
}
.hero-panel .hero-positioning-sub {
    max-width: 850px; margin: 0 0 18px; color: var(--color-text);
    font-size: clamp(16px, 1.6vw, 20px); line-height: 1.55;
}
.hero-proof {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0;
    list-style: none;
}
.hero-proof li {
    display: inline-flex; align-items: center; min-height: 34px; padding: 7px 13px;
    border: 1px solid color-mix(in srgb, var(--color-action) 25%, var(--color-border));
    border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-surface) 86%, transparent);
    color: var(--color-text); font-size: 13px; font-weight: 700;
}
.hero-proof li::before {
    content: ''; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%;
    background: var(--color-action); flex: 0 0 auto;
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hero-secondary-cta {
    background: rgba(255,255,255,.72); color: var(--color-text);
    border-color: color-mix(in srgb, var(--color-text) 20%, transparent);
}
.hero-secondary-cta:hover { background: #fff; }

/* XLS homepage: Buy/Sell/Rent/List/Relocate pathway cards -- XLS covers all
   five, so its hero leads into this grid instead of Roney's rental-only lead
   form. Same glass-card treatment as the rest of .photo-bg-page for legibility
   against the hero photo. */
.xls-path-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px; margin: 0; padding: 0; list-style: none;
}
.xls-path-card {
    display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit;
    background: rgba(255,255,255,.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    padding: 20px 22px; border-radius: 16px; border: 1px solid rgba(255,255,255,.5);
    box-shadow: 0 8px 24px rgba(20,20,20,.12);
    transition: transform .15s ease, box-shadow .15s ease;
}
.xls-path-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(20,20,20,.2); }
.xls-path-kicker {
    font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--color-action);
}
.xls-path-card strong { font-size: 17px; line-height: 1.3; }
.xls-path-card > span:not(.xls-path-kicker) { color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.xls-path-card b { margin-top: auto; padding-top: 4px; font-size: 14px; font-weight: 700; color: var(--accent); }

.lead-heading { margin: 0 0 4px; font-size: 19px; text-align: left; }
.hero-panel .lead-sub { margin: 0 0 16px; color: var(--ink-soft); font-size: 14px; text-align: left; }

/* Lead-gen fields, Airbnb-search-bar-inspired: one flexible row that only
   wraps when the viewport is too narrow, instead of always stacking. */
.lead-fields { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 0; align-items: end; }
.lead-fields .field { margin: 0; flex: 1 1 100px; }
.lead-field-name { flex: 2 1 160px; max-width: none; }
.field-stepper { flex-basis: 118px; min-width: 108px; }
.lead-fields label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); font-weight: 700; margin-bottom: 5px; text-shadow: 0 1px 2px rgba(255,255,255,.5); white-space: nowrap; }
.lead-fields input, .lead-fields select {
    width: 100%; padding: 9px 11px; border: 1px solid rgba(255,255,255,.7); border-radius: 8px;
    font-size: 14px; font-family: var(--font); background: rgba(255,255,255,.82);
}
.lead-fields .lead-submit { flex: 1 1 100%; margin-top: 4px; }
@media (min-width: 860px) { .lead-fields .lead-submit { flex: 0 0 auto; margin-top: 0; } }
@media (max-width: 639px) {
    .hero--photo .hero-panel { padding: 24px 20px; }
    .hero-positioning h1 { font-size: clamp(34px, 11vw, 48px); }
    .hero-actions .btn { width: 100%; text-align: center; }
    .hero-proof li { width: 100%; }
}

/* Guest/kid/bedroom/bed counters as a tap-friendly +/- stepper instead of the
   native number-input spinner (its tiny up/down arrows are hard to hit). */
.stepper {
    display: flex; align-items: stretch; border: 1px solid rgba(255,255,255,.7);
    border-radius: 8px; background: rgba(255,255,255,.82); overflow: hidden;
}
.stepper-btn {
    flex: 0 0 30px; border: none; background: transparent; color: var(--ink);
    font-size: 18px; line-height: 1; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background-color .15s ease;
}
.stepper-btn:hover { background: rgba(0,0,0,.08); }
.stepper-btn:active { background: rgba(0,0,0,.14); }
.stepper-value {
    flex: 1; min-width: 0; border: none; background: transparent; text-align: center;
    font-size: 13px; font-family: var(--font); padding: 9px 0; color: var(--ink); cursor: default;
    white-space: nowrap;
}
.stepper-value::placeholder { color: var(--ink-soft); }

/* Persistent site background: a full-bleed photo that stays fixed as the
   page scrolls, so the immersive feel continues past the hero instead of
   cutting to flat white. The hero's own (sharper, brand-specific) photo
   sits on top while it's in view; this one shows through everywhere else --
   in the gaps around the glass panels below, not painted over their content. */
.photo-bg-page {
    background-size: cover; background-position: center top; background-attachment: fixed;
    background-color: var(--bg-soft);
}
.photo-bg-page section.block { padding-top: 32px; }
.photo-bg-page section.block > h2, .photo-bg-page section.block > .lede {
    text-shadow: 0 1px 3px rgba(255,255,255,.8);
}
/* html-prefixed to match (and, being later in the cascade, win the tie
   against) themes.css's "html[data-theme] .filter-bar" -- both resolve to
   the same class-count specificity, and without this prefix the theme
   rule's extra "html" element selector would outrank this one despite an
   identical class count, the same latent bug pattern that broke the
   accordion detail row above. */
html .photo-bg-page .filter-bar {
    background: rgba(247,246,243,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.photo-bg-page .view-toggle { background: rgba(255,255,255,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* Table view header: legibly translucent on every photo-background page,
   since it's the map to the columns, not a row of scannable data. */
.photo-bg-page .listing-table th {
    background: rgba(247,246,243,.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.photo-bg-page .listing-table td, .photo-bg-page .listing-table th { text-shadow: 0 1px 3px rgba(255,255,255,.75); }

/* Default row treatment: solid-enough glass so content is readable at a
   glance, no hover required. Uniform across every page using this table
   (listings.php and index.php both carry .photo-bg-page) -- a separate
   near-invisible-until-hover ".photo-bg-home" variant used to exist here
   for the homepage only, but left its Featured Listings table illegible
   at rest (and had no equivalent on touch devices, which have no hover),
   so it was removed in favor of this single shared treatment. */
.photo-bg-page .listing-table tbody tr {
    background: rgba(255,255,255,.82); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    transition: background-color .18s ease;
}
.photo-bg-page .listing-table tbody tr:hover { background: rgba(255,255,255,.96); }
/* Must match/outrank the "tbody tr" rule above on specificity, not just
   source order -- ".listing-detail-row" alone is a lower-specificity
   selector (0,2,0) than ".listing-table tbody tr" (0,2,2), so without this
   the expanded detail row silently inherited the plain row's background
   instead of its own regardless of source order. */
.photo-bg-page .listing-table tbody tr.listing-detail-row { background: rgba(255,255,255,.96); }
.lead-submit { width: 100%; }
@media (min-width: 640px) { .lead-submit { width: auto; padding-left: 40px; padding-right: 40px; } }
.btn {
    display: inline-block; background: var(--accent); color: #fff; padding: 13px 28px;
    border-radius: 999px; font-weight: 600; font-size: 15px; border: none; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--line); }

/* Sections */
section.block { padding: 64px 24px; }
.block h2 { font-size: 28px; font-weight: 700; margin: 0 0 8px; letter-spacing: -.01em; }
.block .lede { color: var(--ink-soft); margin: 0 0 36px; font-size: 16px; }

/* Listing grid + cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.card {
    border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
    background: #fff; transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card .photo { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--bg-soft), #ece9e3); display: flex; align-items: center; justify-content: center; color: var(--ink-soft); font-size: 13px; width: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .photo { transform: scale(1.05); }
.card .body { padding: 18px 20px 22px; }
.card .unit-title { font-weight: 700; font-size: 17px; margin: 0 0 4px; }
/* xls-only (market-wide, many different buildings -- David, 2026-07-16:
   "MLS properties show unit number but no Address"); roney's single-building
   scope keeps unit-number-only, address would be redundant there. */
.card .unit-address, .listing-table .unit-address { color: var(--ink-soft); font-size: 13px; display: block; margin: 0 0 2px; }
/* Some xls listings (standalone houses, not condo units) have no real unit
   number at all -- mlsUnitNumber() returns '' rather than showing a bare
   "Unit" label with nothing after it. The address becomes the title instead. */
.card .unit-address-title { color: var(--ink); font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.card .unit-meta { color: var(--ink-soft); font-size: 14px; margin: 0 0 12px; }
.card .price { font-weight: 700; font-size: 18px; margin: 0 0 14px; }
.card .price small { font-weight: 500; color: var(--ink-soft); font-size: 13px; }

.empty-state { text-align: center; padding: 64px 24px; color: var(--ink-soft); }

/* Unit photo slider */
.slider-viewport { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4/3; background: var(--bg-soft); touch-action: pan-y; }
.slider-track { display: flex; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.slide { flex: 0 0 100%; height: 100%; }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%;
    border: none; background: rgba(20,20,20,.4); color: #fff; font-size: 15px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s ease, background-color .2s ease;
}
.slider-viewport:hover .slider-arrow, .slider-arrow:focus-visible { opacity: 1; }
.slider-arrow:hover { background: rgba(20,20,20,.6); }
.slider-arrow.prev { left: 14px; }
.slider-arrow.next { right: 14px; }
.slider-counter {
    position: absolute; bottom: 14px; right: 14px; background: rgba(20,20,20,.5); color: #fff;
    font-size: 12px; padding: 4px 10px; border-radius: 999px; pointer-events: none;
}
.slider-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; }
.slider-thumb {
    width: 84px; height: 64px; object-fit: cover; border-radius: 6px; cursor: pointer; opacity: .55;
    flex-shrink: 0; transition: opacity .2s ease, outline-color .2s ease; outline: 2px solid transparent; outline-offset: 2px;
}
.slider-thumb:hover { opacity: .85; }
.slider-thumb.active { opacity: 1; outline-color: var(--accent); }

/* Standalone Gallery lightbox (gallery.php) -- full-screen overlay, not the
   inline embedded slider above. Reuses that slider's arrow/counter/thumb
   look so the two feel like one visual language. */
.gallery-lightbox {
    position: fixed; inset: 0; z-index: 200; background: rgba(10,10,10,.94);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    padding: 24px;
}
.gallery-lightbox[hidden] { display: none; }
.gallery-lightbox-stage { position: relative; width: 100%; max-width: 1100px; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.gallery-lightbox-stage img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 6px; -webkit-user-drag: none; }
.gallery-lightbox-close {
    position: absolute; top: 18px; right: 22px; background: none; border: none;
    color: #fff; font-size: 34px; line-height: 1; cursor: pointer; z-index: 1;
}
.gallery-lightbox-close:hover { color: var(--accent); }
.gallery-lightbox-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%;
    border: none; background: rgba(255,255,255,.12); color: #fff; font-size: 16px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background-color .2s ease; z-index: 1;
}
.gallery-lightbox-arrow:hover, .gallery-lightbox-arrow:focus-visible { background: rgba(255,255,255,.25); }
.gallery-lightbox-arrow.prev { left: 18px; }
.gallery-lightbox-arrow.next { right: 18px; }
.gallery-lightbox-meta { color: #ddd; font-size: 14px; display: flex; align-items: center; gap: 10px; }
.gallery-lightbox-counter { background: rgba(255,255,255,.14); padding: 3px 10px; border-radius: 999px; font-size: 12px; }
.gallery-lightbox-thumbs { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; padding-bottom: 4px; }
.gallery-lightbox-thumbs img {
    width: 76px; height: 56px; object-fit: cover; border-radius: 6px; cursor: pointer; opacity: .5;
    flex-shrink: 0; transition: opacity .2s ease, outline-color .2s ease; outline: 2px solid transparent; outline-offset: 2px;
}
.gallery-lightbox-thumbs img:hover { opacity: .8; }
.gallery-lightbox-thumbs img.active { opacity: 1; outline-color: var(--accent); }
@media (max-width: 640px) {
    .gallery-lightbox-arrow { width: 40px; height: 40px; }
    .gallery-lightbox-thumbs { display: none; }
}

/* Unit video tour */
.video-embed { max-width: 640px; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Unit detail */
.unit-hero { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 48px 24px; }
.unit-hero .specs { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 18px; }
.spec { font-size: 14px; color: var(--ink-soft); }
.spec strong { display: block; color: var(--ink); font-size: 18px; font-weight: 700; }

.two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

.disclaimer { font-size: 13px; color: var(--ink-soft); border-top: 1px solid var(--line); margin-top: 24px; padding-top: 16px; }

/* Calculator */
.calc-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: var(--bg-soft); position: sticky; top: 90px; }
.calc-box h3 { margin: 0 0 16px; font-size: 18px; }

/* Unit detail page redesign (unit.php only -- .unit-hero/.calc-box/.two-col/
   .slider-viewport/.slider-thumbs above are shared with mls-property.php, so
   every rule here is scoped through a unit.php-only class rather than
   editing those base rules). Breakpoint (899px) matches the "~900px" desktop
   threshold called out for the primary grid and the mobile action bar alike,
   so both switch behavior together. */

/* Compact summary bar -- replaces the old full-padding .unit-hero look with
   a tighter bar carrying price + availability, without touching the base
   .unit-hero rule mls-property.php also relies on. */
.unit-hero.unit-summary { padding: 22px 24px 26px; }
/* Shared by unit.php and mls-property.php (both use .unit-hero.unit-summary) --
   back link + count, plus Previous/Next within the reconstructed search. */
.unit-nav-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.unit-back-link { display: inline-block; color: var(--ink-soft); font-size: 14px; }
.unit-prev-next { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.unit-prev-next-link { color: var(--ink); font-weight: 600; text-decoration: none; }
.unit-prev-next-link:hover { color: var(--accent); }
.unit-prev-next-link.is-disabled { color: var(--ink-soft); opacity: .4; pointer-events: none; }
.unit-prev-next-count { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.unit-summary-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
.unit-summary-heading h1 { margin: 0 0 4px; font-size: clamp(22px, 3vw, 30px); }
.unit-summary-heading .unit-address { margin: 0; color: var(--ink-soft); font-size: 14px; }
.unit-summary-price-block { flex-shrink: 0; text-align: right; }
.unit-price { font-size: 22px; font-weight: 700; white-space: nowrap; }
.unit-price span { font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.unit-availability {
    display: inline-flex; align-items: center; margin-top: 6px; padding: 4px 11px;
    border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.unit-availability.is-available { background: color-mix(in srgb, var(--basic-green) 12%, white); color: #0f5c2e; }
.unit-availability.is-unavailable { background: color-mix(in srgb, var(--basic-red) 10%, white); color: #8a1c1c; }
.unit-hero.unit-summary .specs { margin-top: 14px; }
@media (max-width: 639px) { .unit-summary-price-block { text-align: left; } }

/* Primary grid: bounded-height media pane (left) + sticky quote box (right).
   Collapses to a single column below 899px, where source order already puts
   media before the quote box -- matching the required mobile order without
   any CSS `order` trick. */
.unit-primary-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 28px; align-items: start; padding-top: 24px; padding-bottom: 8px; }
.unit-primary-grid.no-media { grid-template-columns: minmax(0, 480px); }
/* min-width:0 on both the track and the grid items -- without it, a grid
   item's default min-width:auto sizes it to its content's min-content width
   (here, the calc-box's side-by-side date inputs), which is wider than a
   375px viewport and forces the whole page to scroll horizontally. */
.unit-media, .unit-quote { min-width: 0; }
@media (max-width: 899px) { .unit-primary-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* Sticky is a desktop-only affordance per spec -- .calc-box's own base rule
   (shared with mls-property.php) stays sticky unconditionally, so this only
   overrides it back to static when the .unit-quote modifier is also present,
   i.e. unit.php's own quote box, never mls-property.php's. */
@media (max-width: 899px) { .unit-quote.calc-box { position: static; top: auto; } }

/* Media pane: photo/video toggle + bounded-height gallery. Only the
   .slider-viewport height is overridden here (via the .unit-media ancestor),
   not its base aspect-ratio:4/3 rule, which mls-property.php still uses. */
.unit-media { display: flex; flex-direction: column; gap: 10px; }
.media-toggle { display: inline-flex; gap: 6px; }
.media-toggle-btn {
    padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
    color: var(--ink-soft); font-size: 13px; font-weight: 600; font-family: var(--font); cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.media-toggle-btn.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.unit-media .slider-viewport { aspect-ratio: unset; height: clamp(320px, 46vw, 600px); }
.unit-video-pane { position: relative; height: clamp(320px, 46vw, 600px); border-radius: var(--radius); overflow: hidden; background: #000; display: none; }
.unit-video-pane.is-active { display: block; }
.unit-video-pane iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Reduced preview strip (hard-capped at 6 <img> tags in unit.php, see
   $previewThumbs) -- large screens only; the full gallery stays reachable via
   PhotoSlider's arrows/swipe/keyboard nav either way, since those iterate the
   real photo count via #sliderTrack, not this strip. */
@media (max-width: 899px) { .unit-media #sliderThumbs { display: none; } }

/* Highlights row + the matching Amenities list further down -- both draw
   from the same grounded $unit columns (balcony, washer_dryer, floor), just
   in two spots: a glanceable strip here, a fuller list in .unit-information. */
.unit-highlights { padding-top: 6px; padding-bottom: 6px; }
.unit-highlights-list { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 0; padding: 0; list-style: none; }
.unit-highlights-list li {
    padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--bg-soft); color: var(--ink); font-size: 13px; font-weight: 600;
}

/* Overview/Amenities/Lease Terms as simple stacked, server-rendered sections
   (no JS-gated tab content) -- every section's full text is always present
   in the raw HTML. */
.unit-information { padding-top: 12px; padding-bottom: 16px; }
.unit-info-section { margin-bottom: 40px; }
.unit-info-section:last-child { margin-bottom: 0; }
.unit-info-section h2 { margin: 0 0 12px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.unit-info-section > p { margin: 0 0 12px; color: var(--ink-soft); font-size: 16px; line-height: 1.7; }
.unit-info-section > p:last-child { margin-bottom: 0; }
.unit-info-section .term-line { color: var(--ink); }
.unit-info-section .term-line strong { color: var(--ink); }

/* Mobile sticky bottom action bar (Check Dates / Call / WhatsApp). The
   spacer reserves the same height in normal flow so the fixed bar never
   overlaps page content -- zero height on desktop, where the bar itself
   stays display:none. */
.unit-mobile-actionbar-spacer { display: none; }
.unit-mobile-actionbar { display: none; }
@media (max-width: 899px) {
    .unit-mobile-actionbar-spacer { display: block; height: 64px; }
    .unit-mobile-actionbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
        gap: 8px; height: 64px; padding: 8px 12px; box-sizing: border-box;
        background: rgba(255,255,255,.97); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
        border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(20,20,20,.1);
    }
    .unit-mobile-action {
        flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
        border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft);
        color: var(--ink); font-size: 13px; font-weight: 700; text-align: center; cursor: pointer;
        padding: 0 6px;
    }
    .unit-mobile-action.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
}
.calc-row { display: flex; gap: 12px; margin-bottom: 14px; }
.field { flex: 1; }
.field label { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }
.field input, .field select, .field textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
    font-size: 14px; font-family: var(--font); background: #fff;
}
.field textarea { resize: vertical; }
.calc-result { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.calc-result .total { font-size: 26px; font-weight: 700; }
.calc-result .line { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-soft); margin: 6px 0; }
.notice { background: #fff4e0; border: 1px solid #f0ddb0; color: #7a5c00; padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-top: 12px; }
.event-badge { display: inline-block; background: var(--accent); color: #fff; font-size: 12px; padding: 3px 10px; border-radius: 999px; margin: 2px 4px 2px 0; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 24px; }
.contact-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; text-align: center; }
.contact-card .label { color: var(--ink-soft); font-size: 13px; margin-bottom: 6px; }
.contact-card .value { font-weight: 700; font-size: 17px; }

/* List Your Property */
.section-subhead { font-size: 20px; font-weight: 700; margin: 0 0 20px; }
.benefit-grid, .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 24px; }
.benefit-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.benefit-card .title { font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.benefit-card .desc { color: var(--ink-soft); font-size: 14px; margin: 0; }
.step-num {
    width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; margin-bottom: 12px;
}
.step-title { font-weight: 700; margin-bottom: 6px; }
.step-desc { color: var(--ink-soft); font-size: 14px; margin: 0; }
.form-card { max-width: 640px; margin: 56px auto 0; padding: 32px; }
.form-card h3 { margin: 0 0 8px; font-size: 20px; }
.form-card .lede { margin: 0 0 20px; }
.form-card .btn { width: 100%; }
/* contact.php nests its phone/WhatsApp tiles inside the same card as the form
   (previously a separate section below it) -- space them off the button. */
#contact-form .contact-grid { margin-top: 28px; }

/* Static content pages (Amenities, Pools & Beach, Dining, Fitness, Gallery) --
   same persistent-photo-background + glass-card language as the homepage. */
.photo-bg-page .glass-card {
    background: rgba(255,255,255,.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    padding: 28px 32px; border-radius: 18px; box-shadow: 0 10px 30px rgba(20,20,20,.16);
    border: 1px solid rgba(255,255,255,.5); margin-bottom: 20px;
}
.glass-card > h3 { margin: 0 0 8px; font-size: 19px; }
.glass-card > p { color: var(--ink-soft); line-height: 1.7; margin: 0; }

/* Homepage amenities-detail cards -- glass-card as a clickable link through
   to the relevant amenity page, with the same hover lift as .card. */
a.glass-card.amenity-card { display: block; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
a.glass-card.amenity-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(20,20,20,.2); }

.content-section { margin-bottom: 24px; }
.content-section:last-child { margin-bottom: 0; }
.content-section h3, .content-section h4 { margin: 0 0 8px; font-size: 17px; }
.content-section p { color: var(--ink-soft); line-height: 1.7; margin: 0; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 12px; }
.gallery-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); transition: transform .2s ease; }
.gallery-grid a:hover img { transform: scale(1.03); }

/* Footer */
footer.site-footer {
    border-top: none; padding: 36px 24px 22px;
    background: rgba(12,21,40,.94); color: rgba(255,255,255,.72); font-size: 14px;
}
.footer-grid {
    display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between;
    max-width: 1120px; margin: 0 auto; text-align: left;
}
.footer-col { flex: 1 1 220px; }
/* David, 2026-07-16: the operating-brokerage identity (always "XLS Realty",
   shared by both brands -- see Brand::CONTACT['brokerage_name']) shows as an
   actual logo now, centered above the office/phone lines, rather than plain
   text. */
.footer-col-brand { text-align: center; }
.footer-brand-logo { height: 44px; width: auto; margin: 0 auto 10px; }
.footer-brand { color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.footer-line { margin-top: 2px; color: rgba(255,255,255,.72); }
.footer-line a { color: inherit; }
/* margin:auto genuinely centers this item regardless of sibling count --
   .footer-grid's justify-content:space-between alone only centers it when
   there are exactly 3 columns (Roney, which also has .footer-social); xls
   has no social column, so with only 2 children space-between pushed this
   one to the far right instead of the middle (David, 2026-07-16). */
.footer-col-center { flex: 0 1 auto; text-align: center; margin: 0 auto; }
.footer-cross-brand img { height: 40px; width: auto; opacity: .9; transition: opacity .15s ease; vertical-align: middle; }
.footer-cross-brand img:hover { opacity: 1; }
.footer-cross-brand-text { color: rgba(255,255,255,.8); text-decoration: underline; }
.footer-social { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex: 1 1 220px; }
.footer-social img { width: 36px; height: 36px; border-radius: 8px; opacity: .88; transition: opacity .15s ease, transform .15s ease; }
.footer-social a:hover img { opacity: 1; transform: translateY(-2px); }
.footer-bottom {
    max-width: 1120px; margin: 22px auto 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14);
    text-align: center; font-size: 13px; color: rgba(255,255,255,.55);
}
.footer-bottom a { color: rgba(255,255,255,.75); text-decoration: underline; }

/* Filters bar */
.filters { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.filters select { padding: 9px 14px; border-radius: 8px; border: 1px solid var(--line); font-family: var(--font); font-size: 14px; background: #fff; }

.filter-bar {
    display: flex; flex-wrap: wrap; gap: 16px; align-items: end;
    background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 20px; margin-bottom: 20px;
}
.filter-bar .field { margin: 0; min-width: 130px; flex: 1; }
.filter-bar label { display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.filter-bar input, .filter-bar select {
    width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
    font-size: 14px; font-family: var(--font); background: #fff;
}
/* Heading and selected-count status line both live inside .filter-bar now (one
   consolidated box instead of three stacked ones) -- flex-basis:100% forces
   each onto its own full-width row above/below the wrapped filter fields
   rather than sitting inline with them per .filter-bar's own align-items:end. */
.filter-bar-heading { flex: 1 1 100%; margin: 0 0 4px; }
.filter-bar-heading h2 { margin: 0 0 4px; }
.filter-bar-heading .lede { margin: 0; }
.filter-bar #selectedCount { flex: 1 1 100%; margin: 4px 0 0; color: var(--ink-soft); font-size: 14px; }

.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin-bottom: 24px; }
.view-toggle a { padding: 7px 18px; border-radius: 999px; font-size: 14px; color: var(--ink-soft); }
.view-toggle a.active { background: var(--ink); color: #fff; }

/* MLS browse map view (partials/mls_browse_content.php) -- a Leaflet map
   with height:0 renders nothing, so this needs a real, explicit height. */
.mls-map { height: 600px; width: 100%; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-soft); }
.mls-map-status { display: flex; align-items: center; justify-content: center; height: 100%; margin: 0; padding: 24px; text-align: center; color: var(--ink-soft); font-size: 14px; }
.mls-map-popup { min-width: 140px; }
.mls-map-popup .unit { margin: 0 0 4px; font-size: 14px; }
.mls-map-popup .price { margin: 0 0 8px; font-size: 13px; color: var(--ink-soft); }
.mls-map-popup a { color: var(--accent); font-weight: 600; font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 639px) {
    .mls-map { height: 380px; }
}

.pagination { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 32px 0 8px; }
.pagination-link { padding: 9px 18px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; color: var(--ink-soft); text-decoration: none; background: #fff; transition: border-color .15s ease, color .15s ease; }
.pagination-link:hover { border-color: var(--accent); color: var(--accent); }
.pagination-link.disabled { opacity: .4; pointer-events: none; }
.pagination-status { font-size: 14px; color: var(--ink-soft); }

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
/* table-layout: fixed (driven by each table's own <colgroup>) makes width:100%
   a hard cap instead of a soft target -- with the previous auto layout +
   white-space:nowrap, columns sized to their widest unwrapped content and
   routinely exceeded the container, forcing .table-scroll's horizontal
   scrollbar on essentially every normal desktop width ("zoomed in" look). */
.listing-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; }
.listing-table th, .listing-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.listing-table th { background: var(--bg-soft); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); }
.listing-table tbody tr { cursor: pointer; }
.listing-table tbody tr:hover { background: var(--bg-soft); }
.listing-table a { font-weight: 600; }
.listing-table input[type="checkbox"] { cursor: pointer; width: 16px; height: 16px; }

/* Filter bar action row: Filter submit + Clear (X) + Copy Link, grouped like the legacy site */
.filter-actions { display: flex; gap: 8px; flex: 0 0 auto; min-width: 0; }
.btn-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
    border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink-soft);
    font-size: 16px; line-height: 1; cursor: pointer; text-decoration: none; flex-shrink: 0;
    transition: border-color .15s ease, color .15s ease;
}
.btn-icon:hover { border-color: var(--accent); color: var(--accent); }
.btn-icon.copied { border-color: var(--accent); color: var(--accent); background: var(--bg-soft); }
#selectedCount { margin: 0 0 14px; }
.share-url-box {
    display: block; width: 100%; max-width: 480px; margin: -8px 0 20px; padding: 9px 12px;
    border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-family: var(--font);
    color: var(--ink-soft); background: var(--bg-soft);
}
.share-url-box[hidden] { display: none; }

/* Accordion expand/collapse rows */
.expand-toggle {
    width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: #fff;
    color: var(--ink-soft); font-size: 16px; line-height: 1; cursor: pointer; display: flex;
    align-items: center; justify-content: center; padding: 0; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.listing-row:hover .expand-toggle, .listing-row.expanded .expand-toggle { background: var(--accent); border-color: var(--accent); color: #fff; }
.listing-row.expanded { background: var(--bg-soft); }
/* No hover treatment for the expanded detail block itself -- it's static
   content (cursor: default), not a clickable row, and forcing it transparent
   on hover made photo/description text illegible against the page background. */
.listing-detail-row { cursor: default; }
.listing-detail-row td { padding: 0; border-bottom: 1px solid var(--line); }
.listing-detail { display: flex; gap: 24px; padding: 20px 16px; align-items: flex-start; }
.listing-detail-photo { display: block; flex: 0 0 280px; transition: opacity .15s ease; }
.listing-detail-photo:hover { opacity: .85; }
.listing-detail-photo img, .listing-detail-photo .photo {
    width: 280px; height: 210px; object-fit: cover; border-radius: var(--radius);
    background: linear-gradient(135deg, var(--bg-soft), #ece9e3);
}
.listing-detail-photo .photo { display: flex; align-items: center; justify-content: center; color: var(--ink-soft); font-size: 13px; text-align: center; padding: 12px; }
.listing-detail-info { flex: 1; min-width: 260px; }
.listing-detail-info .term-line { margin: 0 0 8px; font-size: 14px; color: var(--ink-soft); }
.listing-detail-info .detail-desc { margin: 0 0 16px; font-size: 14px; color: var(--ink-soft); line-height: 1.6; white-space: normal; }
.listing-detail-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.detail-icon-link { font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* Below ~640px the fixed 280px photo + 260px-min info column (540px+ before
   even counting gap/padding) overflowed every phone width, forcing the whole
   expanded row into .table-scroll's horizontal scrollbar with description
   text clipped at the viewport edge. Stack photo above info instead, both
   sized to the available width. */
@media (max-width: 639px) {
    /* table-layout:fixed clamps a cell's rendered box to its <colgroup>
       column width as part of the browser's fixed-layout algorithm, NOT the
       normal CSS cascade -- a plain `width` override (even !important) on
       the <td> is silently ignored (verified: stays pinned to column 1's
       32px), because that clamp lives outside the box the cascade controls.
       `min-width` isn't part of that algorithm and applies normally, so it's
       the only property that actually widens the cell here. display:block
       additionally detaches it from column-based layout, and position:sticky
       against .table-scroll's own scroll container pins it to the visible
       viewport rather than wherever the table happens to be scrolled to. */
    .listing-detail-row td {
        display: block; position: sticky; left: 0;
        min-width: calc(100vw - 34px); width: calc(100vw - 34px); max-width: 100%;
    }
    .listing-detail { flex-direction: column; gap: 14px; padding: 16px 12px; }
    .listing-detail-photo { flex-basis: auto; width: 100%; }
    .listing-detail-photo img, .listing-detail-photo .photo { width: 100%; height: auto; aspect-ratio: 4 / 3; }
    .listing-detail-info { min-width: 0; }
}