.pd-ssr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
}

.pd-ssr-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}

/* CREA Rules 6(a)(iii): DDF photos arrive pre-watermarked with the REALTOR(R)
   logo in the top-left pixels, so any object-fit crop must anchor there or the
   watermark is cropped off. Applies to every surface showing a listing photo. */
.pd-ssr-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: top left;
    display: block;
}

.pd-ssr-card h3 {
    font-size: 1rem;
    margin: 0.75rem 1rem 0.25rem;
    line-height: 1.3;
}

.pd-ssr-price {
    font-weight: 600;
    margin: 0 1rem;
}

.pd-ssr-meta,
.pd-ssr-neighborhood {
    margin: 0.25rem 1rem;
    color: #6b7280;
    font-size: 0.875rem;
}

.pd-ssr-card > *:last-child {
    margin-bottom: 1rem;
}

.pd-ssr-empty,
.pd-ssr-error {
    padding: 1rem;
    color: #6b7280;
}

.pd-ssr-error {
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
}

.pd-ssr-card-link {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    height: 100%;
}

.pd-ssr-card-link:hover h3 {
    text-decoration: underline;
}

.pd-ssr-detail-page {
    max-width: 960px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.pd-ssr-detail-hero {
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
    object-position: top left;
    border-radius: 8px;
    display: block;
    margin-bottom: 1.5rem;
}

.pd-ssr-detail-card h1 {
    margin: 0 0 0.5rem;
}

.pd-ssr-gallery-wrap {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.pd-ssr-gallery {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.pd-ssr-gallery::-webkit-scrollbar { display: none; }

.pd-ssr-gallery img {
    flex: 0 0 100%;
    width: 100%;
    height: clamp(280px, 56vw, 560px);
    object-fit: cover;
    object-position: top left;
    scroll-snap-align: start;
    display: block;
}

.pd-ssr-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
    transition: background 0.15s ease;
}

.pd-ssr-gallery-nav:hover { background: rgba(0, 0, 0, 0.8); }
.pd-ssr-gallery-nav:disabled { opacity: 0.35; cursor: default; }
.pd-ssr-gallery-nav.prev { left: 12px; }
.pd-ssr-gallery-nav.next { right: 12px; }

.pd-ssr-gallery-counter {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    z-index: 2;
}

.pd-ssr-map {
    width: 100%;
    border-radius: 8px;
    display: block;
}

img.pd-ssr-placeholder {
    object-fit: contain !important;
    background: #f3f4f6;
}

.pd-ssr-search-page {
    max-width: 1100px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.pd-ssr-search-title {
    margin: 0 0 0.75rem;
    color: #111827;
    font-weight: 600;
    line-height: 1.2;
}

.pd-ssr-tablist {
    display: flex;
    gap: 0.25rem;
    margin-bottom: -1px;
}

.pd-ssr-tab {
    appearance: none;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border: 1px solid #e5e7eb;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: #f3f4f6;
    color: #6b7280;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
}

.pd-ssr-tab.is-active {
    background: #fafafa;
    color: #111827;
}

.pd-ssr-tab[hidden] {
    display: none;
}

/* Square off the form's top-left corner so it joins the active tab cleanly. */
.pd-ssr-search-tabs .pd-ssr-search-form {
    border-top-left-radius: 0;
}

.pd-ssr-suggest-anchor {
    position: relative;
}

.pd-ssr-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin: 2px 0 0;
    padding: 0;
    max-height: 18rem;
    overflow-y: auto;
    list-style: none;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.pd-ssr-suggest-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pd-ssr-suggest-item:hover,
.pd-ssr-suggest-item.is-active {
    background: #f3f4f6;
}

/* MLS hit offered inside the ADDRESS dropdown — visually separated from the
   address matches below it so the two kinds of row don't read as one list. */
.pd-ssr-suggest-item.pd-ssr-suggest-id {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    border-bottom: 1px solid #e5e7eb;
}

.pd-ssr-suggest-tag {
    flex: 0 0 auto;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: #111827;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* "No listing found with that ID" — a message, not a pickable option. */
.pd-ssr-suggest-item.pd-ssr-suggest-empty,
.pd-ssr-suggest-item.pd-ssr-suggest-empty:hover {
    cursor: default;
    color: #6b7280;
    background: transparent;
}

.pd-ssr-search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: end;
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fafafa;
}

.pd-ssr-search-form .pd-ssr-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
    flex: 1 1 160px;
    min-width: 0;
}

.pd-ssr-search-form .pd-ssr-price-range {
    flex: 2 1 240px;
}

.pd-ssr-search-form .pd-ssr-pill-field {
    flex: 0 0 auto;
}

.pd-ssr-search-form:has(.pd-ssr-pill-field) .pd-ssr-search-submit {
    margin-left: 0;
}

.pd-ssr-row-break {
    flex-basis: 100%;
    width: 100%;
    height: 0;
    margin: 0;
}

.pd-ssr-search-form .pd-ssr-field > span {
    color: #374151;
    font-weight: 500;
}

.pd-ssr-search-form input,
.pd-ssr-search-form select {
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font: inherit;
    line-height: 1.3;
    box-sizing: border-box;
}

/* Fixed (locked) province/city value shown in place of a dropdown. */
.pd-ssr-search-form .pd-ssr-locked-value {
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f3f4f6;
    color: #374151;
    font: inherit;
    line-height: 1.3;
    box-sizing: border-box;
}

.pd-ssr-search-form .pd-ssr-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.pd-ssr-search-form .pd-ssr-pill {
    position: relative;
    cursor: pointer;
}

.pd-ssr-search-form .pd-ssr-pill input[type="radio"],
.pd-ssr-search-form .pd-ssr-pill input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.pd-ssr-search-form .pd-ssr-pill > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #fff;
    color: #374151;
    font-size: 0.875rem;
    line-height: 1;
    user-select: none;
    transition: background-color .15s, border-color .15s, color .15s;
}

.pd-ssr-search-form .pd-ssr-pill:hover > span {
    border-color: #9ca3af;
}

.pd-ssr-search-form .pd-ssr-pill input[type="radio"]:checked + span,
.pd-ssr-search-form .pd-ssr-pill input[type="checkbox"]:checked + span {
    background: #111827;
    border-color: #111827;
    color: #fff;
}

.pd-ssr-search-form .pd-ssr-pill input[type="radio"]:focus-visible + span,
.pd-ssr-search-form .pd-ssr-pill input[type="checkbox"]:focus-visible + span {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.pd-ssr-more-filters {
    flex-basis: 100%;
    width: 100%;
    margin: 0;
    border-top: 1px solid #e5e7eb;
    padding-top: 0.75rem;
}

.pd-ssr-more-filters > summary {
    cursor: pointer;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 500;
    user-select: none;
    list-style: revert;
    padding: 0.25rem 0;
}

.pd-ssr-more-filters > summary:hover {
    color: #111827;
}

.pd-ssr-more-filters[open] > summary {
    margin-bottom: 0.75rem;
}

.pd-ssr-more-filters-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: end;
}

.pd-ssr-more-filters-grid > .pd-ssr-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
    flex: 1 1 160px;
    min-width: 0;
}

/* Radius / "search near me" control */
.pd-ssr-near-me[hidden] { display: none; }

.pd-ssr-near-me-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.pd-ssr-near-me-btn {
    padding: 0.5rem 0.9rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s, border-color .15s, color .15s;
}

.pd-ssr-near-me-btn:hover { border-color: #9ca3af; }
.pd-ssr-near-me-btn[aria-pressed="true"] {
    background: #111827;
    border-color: #111827;
    color: #fff;
}
.pd-ssr-near-me-btn:disabled { opacity: 0.6; cursor: default; }

/* Agent / brokerage MLS ID pair — two equal-width inputs sharing one row. */
.pd-ssr-mls-ids-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.pd-ssr-mls-input {
    flex: 1 1 8rem;
    min-width: 0;
    padding: 0.5rem 0.65rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    font-size: 0.875rem;
}

.pd-ssr-mls-input::placeholder { color: #9ca3af; }
.pd-ssr-mls-input:focus { outline: none; border-color: #6b7280; }

.pd-ssr-near-me-msg {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    color: #6b7280;
}

.pd-ssr-search-submit {
    padding: 0.6rem 1.25rem;
    border: 0;
    border-radius: 6px;
    background: #111827;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    align-self: end;
    height: fit-content;
    flex: 0 0 auto;
}

.pd-ssr-search-submit:hover {
    background: #1f2937;
}

/* Price range slider */
.pd-ssr-search-form .pd-ssr-price-range {
    grid-column: span 2;
    --pd-lo: 0%;
    --pd-hi: 100%;
}

.pd-ssr-price-range .pd-ssr-field-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    color: #374151;
    font-weight: 500;
    font-size: 0.875rem;
}

.pd-ssr-price-values {
    color: #111827;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
}

.pd-ssr-price-track {
    position: relative;
    height: 40px;
    margin-top: 6px;
    padding: 0 12px;
}

.pd-ssr-price-track::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 12px;
    right: 12px;
    height: 4px;
    background: #e5e7eb;
    border-radius: 999px;
    transform: translateY(-50%);
}

.pd-ssr-price-track::after {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(12px + (100% - 24px) * var(--pd-lo) / 100);
    right: calc(12px + (100% - 24px) * (100 - var(--pd-hi)) / 100);
    height: 4px;
    background: #111827;
    border-radius: 999px;
    transform: translateY(-50%);
    pointer-events: none;
}

.pd-ssr-price-track input[type="range"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    z-index: 2;
}

/* The thumb the user grabbed last sits on top so it can be moved off an end. */
.pd-ssr-price-track input[type="range"].is-active { z-index: 3; }

.pd-ssr-price-track input[type="range"]:focus { outline: none; }

.pd-ssr-price-track input[type="range"]::-webkit-slider-runnable-track {
    background: transparent;
    border: 0;
    height: 40px;
}

.pd-ssr-price-track input[type="range"]::-moz-range-track {
    background: transparent;
    border: 0;
    height: 40px;
}

.pd-ssr-price-track input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #111827;
    cursor: grab;
    margin-top: 9px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s ease;
}

.pd-ssr-price-track input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
.pd-ssr-price-track input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.18); }

.pd-ssr-price-track input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #111827;
    cursor: grab;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s ease;
}

.pd-ssr-price-track input[type="range"]::-moz-range-thumb:hover { transform: scale(1.12); }
.pd-ssr-price-track input[type="range"]::-moz-range-thumb:active { cursor: grabbing; transform: scale(1.18); }

/* Button position modifiers */
.pd-ssr-search-form.pd-ssr-btn-right .pd-ssr-search-submit {
    margin-left: auto;
}

.pd-ssr-search-form.pd-ssr-btn-left .pd-ssr-search-submit {
    margin-right: auto;
}

.pd-ssr-search-form.pd-ssr-btn-full .pd-ssr-search-submit {
    flex: 1 1 100%;
    width: 100%;
}

.pd-ssr-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0 1rem;
    font-size: 0.95rem;
}

.pd-ssr-pager a,
.pd-ssr-pager span {
    padding: 0.5rem 0.875rem;
    border-radius: 6px;
}

.pd-ssr-pager a {
    color: #111827;
    text-decoration: none;
    border: 1px solid #d1d5db;
    background: #fff;
}

.pd-ssr-pager a:hover {
    background: #f3f4f6;
}

.pd-ssr-pager .is-disabled {
    color: #9ca3af;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    cursor: default;
}

.pd-ssr-pager-current {
    font-weight: 600;
}

/* ── Agent roster ────────────────────────────────────────────────────── */
.pd-ssr-agent-search {
    margin: 0 0 2rem;
}

.pd-ssr-agent-search-title {
    margin: 0 0 .5rem;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    color: #111827;
}

.pd-ssr-agent-search-sub {
    margin: 0 0 1.5rem;
    max-width: 60ch;
    color: #6b7280;
    line-height: 1.5;
}

.pd-ssr-agent-search-bar {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}

.pd-ssr-agent-search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 9999px;
    appearance: none;
}

.pd-ssr-agent-search-input:focus {
    outline: none;
    border-color: #111827;
}

.pd-ssr-agent-search-submit {
    flex: 0 0 auto;
    padding: 1rem 2.5rem;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    background: #111827;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: background .15s ease;
}

.pd-ssr-agent-search-submit:hover {
    background: #000;
}

.pd-ssr-agent-search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1rem;
}

.pd-ssr-agent-search-select {
    padding: .65rem 1.25rem;
    font-size: .95rem;
    font-weight: 600;
    color: #111827;
    background: #f3f4f6;
    border: 1px solid transparent;
    border-radius: 9999px;
    cursor: pointer;
}

.pd-ssr-agent-search-select:focus {
    outline: none;
    border-color: #111827;
}

.pd-ssr-agents-noresults {
    margin: 1.5rem 0;
    color: #6b7280;
}

/* Agent search typeahead dropdown */
.pd-ssr-agent-suggest {
    border-radius: 12px;
    overflow: hidden;
}

.pd-ssr-agent-suggest .pd-ssr-suggest-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    white-space: normal;
    padding: 0.6rem 1rem;
}

.pd-ssr-suggest-name {
    font-weight: 600;
    color: #111827;
}

.pd-ssr-suggest-meta {
    font-size: 0.8rem;
    color: #6b7280;
}

.pd-ssr-suggest-empty {
    color: #6b7280;
    cursor: default;
}

.pd-ssr-suggest-empty:hover {
    background: transparent;
}

@media (max-width: 560px) {
    .pd-ssr-agent-search-bar { flex-direction: column; }
    .pd-ssr-agent-search-submit { padding: 1rem; }
}

.pd-ssr-agents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.pd-ssr-agent-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease;
}

.pd-ssr-agent-card:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    transform: translateY(-2px);
}

/* `display: flex` above outranks the UA [hidden] rule, so the JS filter's
   card.hidden = true wouldn't hide cards without this. */
.pd-ssr-agent-card[hidden] { display: none; }

/* The profile link wraps the photo + name; action rows sit outside it. */
.pd-ssr-agent-link {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.pd-ssr-agent-card-body { flex: 1 1 auto; }

.pd-ssr-agent-photo {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover;
    background: #f3f4f6;
}

/* Agents with no headshot get assets/agent-placeholder.svg — an opaque square
   silhouette. `cover` (inherited above) crops it to the card without letterbox
   bars; the flat background just matches the SVG so there's no edge flash. */
.pd-ssr-agent-photo--empty {
    background: #e5e7eb;
}

.pd-ssr-agent-card-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Neutralize theme heading/paragraph margins so the flex `gap` controls spacing. */
.pd-ssr-agent-card-body > * { margin: 0; }

/* ── Contact (phone / sms / email) row ── */
/* Flex row; each action grows equally so the buttons share the row width
   with the 8px gap between them. The row's horizontal margin matches the
   Learn More button below so they line up. */
.pd-ssr-agent-contact {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0 !important;
    padding: 0 16px 12px !important;
    box-sizing: border-box;
}

.pd-ssr-agent-action {
    flex: 1 1 0 !important;
    min-width: 0;
    width: auto;
    box-sizing: border-box;
    /* !important: some themes force `a { display: inline-block }`, which
       collapses the flex centering and shoves the icon into a corner. */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px;
    min-width: 0;
    padding: 0;
    line-height: 1;
    color: #111827;
    background: #f3f4f6;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.pd-ssr-agent-action:hover {
    background: #111827;
    color: #fff;
}

/* Lock icon size + centering against theme overrides. */
.pd-ssr-agent-action svg {
    width: 18px;
    height: 18px;
    display: block !important;
    flex: 0 0 auto;
    margin: 0;
}

/* ── Full-width "Learn more" button below contact row ── */
.pd-ssr-agent-learn-more {
    display: block;
    box-sizing: border-box;
    width: calc(100% - 32px);
    margin: 0 16px 12px;
    height: 40px;
    padding: 0 16px;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    color: #111827;
    background: #f3f4f6;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    transition: background .15s ease, color .15s ease;
}

.pd-ssr-agent-learn-more:hover {
    background: #111827;
    color: #fff;
}

/* ── Socials row ── */
.pd-ssr-agent-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 16px 16px;
    margin-top: auto;
}

.pd-ssr-agent-social {
    flex: 0 0 auto;
    box-sizing: border-box;
    /* !important: see .pd-ssr-agent-action — guard the flex centering against
       themes that override `a` display. */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px;
    height: 34px;
    min-width: 0;          /* override themes that force a min-width on links */
    padding: 0;            /* override theme link/button padding */
    line-height: 1;
    color: #6b7280;
    background: #f3f4f6;
    border: 0;             /* kill the theme's circle outline */
    border-radius: 50%;
    box-shadow: none;
    text-decoration: none;
    transition: color .15s ease, background .15s ease;
}

.pd-ssr-agent-social:hover {
    color: #fff;
    background: #111827;
}

/* Lock icon size so themes can't scale the inline SVG. */
.pd-ssr-agent-social svg {
    width: 22px;
    height: 22px;
    display: block !important;
    flex: 0 0 auto;
    margin: 0;
}

.pd-ssr-agent-card .pd-ssr-agent-name {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.3;
    color: #111827;
}

.pd-ssr-agent-card .pd-ssr-agent-city {
    margin: 0;
    color: #6b7280;
    font-size: .9rem;
}

.pd-ssr-agent-card .pd-ssr-agent-bio {
    margin: 0;
    color: #4b5563;
    font-size: .9rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Detail */
.pd-ssr-agent-detail {
    max-width: 880px;
    margin: 2rem auto;
}

.pd-ssr-agent-detail-header {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.pd-ssr-agent-detail-photo {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    flex: 0 0 auto;
}

.pd-ssr-agent-detail-name {
    margin: 0 0 4px;
    font-size: 1.75rem;
    line-height: 1.2;
}

.pd-ssr-agent-detail-title,
.pd-ssr-agent-detail-brokerage,
.pd-ssr-agent-detail-city {
    color: #6b7280;
    margin-bottom: 2px;
}

.pd-ssr-agent-contact {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    color: #374151;
}

.pd-ssr-agent-contact a { color: inherit; text-decoration: none; }
.pd-ssr-agent-contact a:hover { text-decoration: underline; }

.pd-ssr-agent-bio-full { line-height: 1.6; color: #1f2937; margin-bottom: 1.5rem; }

.pd-ssr-agent-socials {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.pd-ssr-agent-socials a {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    color: #111827;
    text-decoration: none;
    font-size: .9rem;
}

.pd-ssr-agent-socials a:hover { background: #f3f4f6; }

.pd-ssr-agent-communities ul,
.pd-ssr-agent-recognitions ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: .5rem 0 1.5rem;
}

.pd-ssr-agent-communities li {
    background: #f3f4f6;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: .9rem;
    color: #374151;
}

.pd-ssr-agent-recognitions li {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fafafa;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-size: .9rem;
}

.pd-ssr-agent-recognitions img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex: 0 0 auto;
}

/* Stack recognition name + description when a description is present. */
.pd-ssr-recognition-text {
    display: flex;
    flex-direction: column;
}

.pd-ssr-recognition-name { font-weight: 600; color: #374151; }

.pd-ssr-recognition-desc {
    color: #6b7280;
    font-size: .85rem;
    line-height: 1.35;
}

/* Market focus (primary / secondary). */
.pd-ssr-agent-market-types ul {
    list-style: none;
    padding: 0;
    margin: .5rem 0 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pd-ssr-agent-market-types li {
    background: #f3f4f6;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: .9rem;
    color: #374151;
}

.pd-ssr-market-label {
    font-weight: 600;
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: .06em;
    color: #6b7280;
    margin-right: 4px;
}

@media (max-width: 600px) {
    .pd-ssr-agent-detail-header { flex-direction: column; }
    .pd-ssr-agent-detail-photo  { width: 100%; height: auto; max-height: 360px; }
}

/* ── Search results map (Leaflet/OSM) ───────────────────────────── */
.pd-ssr-map-wrap {
    width: 100%;
    margin: 1.5rem 0;
    border-radius: 8px;
    overflow: hidden;
    background: #f3f4f6;
    z-index: 0;
}

/* Leaflet sets its own font; keep popups consistent with the cards. */
.pd-ssr-map-popup {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 140px;
}
.pd-ssr-map-popup-address {
    font-size: .9rem;
    color: #111827;
}
.pd-ssr-map-popup-price {
    font-weight: 600;
    color: #111827;
}
.pd-ssr-map-popup-link {
    margin-top: 4px;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
}

/* ==========================================================================
   Envision rentals — matched to the LIVE Envision rentals UI.

   Values below were read as computed styles off the live page the site
   actually embeds (portal.getaptly.com/search/<id>/, the iframe on
   envisionyxe.com/rentals/), not estimated from a screenshot:

     family      Roboto            text       rgb(29,56,67)   muted rgb(136,136,136)
     grid        3 cols, gap 15px  container  padding 5px 20px 20px
     card        255x320, radius 12px, border 1px #ddd
     photo       253x193  (aspect 1.311)      body padding 15px 10px
     price       16px/22.4px w700  "/mo"      14px/19.6px w400 #888
     available   14px/19.6px w400, <strong> w700
     address     14px/19.6px w400  specs      14px/19.6px w400
     Apply       60x28, 14px/16.1px w500, #00a1ff, radius 4px
     Details     60x28, 14px/16.1px w400, #000 on #fff, radius 4px
     status pill 96x24, 13px/14.95px w500, #00a1ff, radius 25px
     filter pill h45px, 16px/22.4px w400, border 1px #ddd, radius 4px
     result head 16px/18.4px w400, count + sort value in w700, pad 10px 20px

   Scope discipline unchanged: every rule is prefixed .pd-ssr-rentals so the
   shared DDF/Evrylist card styles are untouched.
   ========================================================================== */

.pd-ssr-rentals {
    --pd-env-text:    #1d3843;
    --pd-env-muted:   #888888;
    --pd-env-line:    #dddddd;
    --pd-env-blue:    #00a1ff;
    --pd-env-blue-dk: #0089db;
    --pd-env-surface: #ffffff;
    --pd-env-bg:      #ffffff;
    --pd-env-split-h: 996px;

    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 18.4px;
    /* The host theme may set a lighter body weight (this one uses 300); the
       live rentals UI is 400 throughout, so it is pinned rather than inherited. */
    font-weight: 400;
    color: var(--pd-env-text);

    /* Layout here must respond to the width this block is GIVEN, not the
       browser width. An Elementor widget can sit in a 625px column on a 1440px
       screen, where viewport media queries are useless. */
    container-type: inline-size;
    container-name: pdenv;
}

.pd-ssr-rentals h1 { font-family: inherit; font-weight: 700; }

/**
 * The SSR rentals route renders its own <main>, and most themes box that into
 * their content column — on envisionyxe.com hello-elementor caps it at
 * max-width:1100px with margin:32px 170px. The live rentals page doesn't live
 * in that column: its Elementor section runs near full width, giving the
 * embedded app 1354px at a 1440 viewport. Boxed into 1100px our map came out
 * 449px wide against live's 590px, with 170px of dead space either side —
 * which reads as "padding around the map" even though the panel itself has none.
 *
 * clamp(16px, 3vw, 48px) reproduces live's gutter: at 1440 it resolves to
 * 43.2px a side, leaving 1353.6px — live measures 1354px.
 *
 * Applied only when the "Full width layout" setting is on, via the
 * .pd-env-fullwidth class that EnvisionPage::render_shell() adds to its own
 * <main>. Nothing else in the plugin emits that element or that class, so no
 * other route, no Elementor widget and no theme markup is reachable from here.
 * element + two classes also outranks the theme rule being overridden.
 */
/**
 * Clearance for a site header that overlays the page. assets/envision-layout.js
 * measures the header's real extent and sets --pd-env-header-clear; with no
 * header found, or no JavaScript, this resolves to 0px and nothing changes.
 * Applies whether or not full-width is on, since the overlap is independent of
 * page width.
 */
main.pd-ssr-rentals {
    padding-top: var(--pd-env-header-clear, 0px);
}

main.pd-ssr-rentals.pd-env-fullwidth {
    max-width: none;
    width: auto;
    margin-inline: 0;
    padding-inline: clamp(16px, 3vw, 48px);
    box-sizing: border-box;
}

/**
 * The live rentals page shows no page heading — its content sits directly under
 * the site header. Ours printed an <h1>Rentals</h1> that overlapped the Envision
 * logo on production (h1 [43,40,1397,88] against logo [45,20,296,120]).
 *
 * Hidden visually rather than removed: the page keeps a top-level heading for
 * assistive tech and the document outline, which matters more on a standalone
 * SSR page than it did inside live's iframe.
 */
main.pd-ssr-rentals > h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Filter row ─────────────────────────────────────────────────────────── */
.pd-ssr-rentals .pd-env-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 0 0 12px;
}
.pd-ssr-rentals .pd-env-search {
    flex: 1 1 300px;
    display: flex;
    align-items: center;
    min-width: 0;
    height: 45px;
    box-sizing: border-box;
    background: var(--pd-env-surface);
    border: 1px solid var(--pd-env-line);
    border-radius: 4px;
}
/* height:100% so the whole 45px shell is the hit area. Without it the input's
   own box was only 15px tall — it looked tappable but most of the control
   wasn't, which matters most at phone width. */
.pd-ssr-rentals .pd-env-search input {
    flex: 1 1 auto;
    align-self: stretch;
    height: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 0;
    outline: none;
    background: transparent;
    font: 400 16px/22.4px inherit;
    font-family: inherit;
    color: inherit;
    padding: 0 0 0 15px;
}
.pd-ssr-rentals .pd-env-search input::placeholder { color: var(--pd-env-muted); }
.pd-ssr-rentals .pd-env-search-btn {
    flex: none;
    align-self: stretch;
    min-width: 44px;
    border: 0;
    background: transparent;
    color: var(--pd-env-muted);
    padding: 0 14px;
    cursor: pointer;
    line-height: 0;
}
.pd-ssr-rentals .pd-env-search-btn:hover { color: var(--pd-env-text); }

.pd-ssr-rentals .pd-env-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 45px;
    box-sizing: border-box;
    padding: 0 34px 0 15px;
    background: var(--pd-env-surface);
    border: 1px solid var(--pd-env-line);
    border-radius: 4px;
    cursor: pointer;
}
.pd-ssr-rentals .pd-env-pill select {
    appearance: none;
    -webkit-appearance: none;
    align-self: stretch;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    font: 400 16px/22.4px Roboto, sans-serif;
    color: inherit;
    padding: 0;
    cursor: pointer;
    max-width: 130px;
}
.pd-ssr-rentals .pd-env-pill-sep { color: var(--pd-env-muted); font-size: 14px; }
.pd-ssr-rentals .pd-env-pill .pd-env-icon-chevron {
    position: absolute;
    right: 12px;
    width: 16px;
    height: 16px;
    color: var(--pd-env-text);
    pointer-events: none;
}
.pd-ssr-rentals .pd-env-apply-filters {
    height: 45px;
    padding: 0 18px;
    border: 0;
    border-radius: 4px;
    background: var(--pd-env-blue);
    color: #fff;
    font: 500 14px/16.1px Roboto, sans-serif;
    cursor: pointer;
}

/* ── Split: map pane left, results pane scrolling on its own ────────────── */
/**
 * Panel proportions taken from live measured INSIDE its iframe on the real
 * page — 1354x734, map pane 554x714 (ratio 0.775), results 785 wide.
 *
 * An earlier reading of 1425x1014 was wrong: it came from loading the Aptly app
 * standalone in a 1440x1100 window, where it stretched to fill the viewport. On
 * envisionyxe.com the app is embedded in an 800px-tall iframe, so the panel is
 * 734px — not 1014. Building the aspect-ratio from the standalone figure made
 * our panel 963px tall against live's 734px: the same shape, 229px too big,
 * which is exactly the elongation that kept being reported.
 *
 * Columns follow live too: 554/1354 = 40.9% for the map, 785/1354 = 58% for the
 * results.
 */
.pd-ssr-rentals .pd-env-split {
    display: grid;
    grid-template-columns: 42% 58%;
    aspect-ratio: 1354 / 734;
    max-height: var(--pd-env-split-h, 800px);
    min-height: 480px;
    border-top: 1px solid var(--pd-env-line);
    background: var(--pd-env-surface);
    /* The PANEL is square on live: its wrapper computes radius 0 with overflow
       hidden. The rounding lives on the map itself — see .pd-env-mappane. */
    overflow: hidden;
}
/**
 * Live insets the map inside its pane and rounds it. Measured inside the real
 * iframe: the pane is 569x734 while the map is 554x714, and the rounding comes
 * from a wrapper (div.sc-kMlDmt) computing border-radius:20px with
 * overflow:hidden — the square Google tiles are CLIPPED by that parent, which
 * is why checking border-radius on the map element alone reported 0px.
 *
 * Reproduced: 7px horizontal / 10px vertical inset turns 42% of 1354 (568.7)
 * into 554.7 wide and 734 into 714 tall, matching live.
 */
.pd-ssr-rentals .pd-env-mappane {
    position: relative;
    height: 100%;
    min-width: 0;
    padding: 10px 7px;
    box-sizing: border-box;
}
.pd-ssr-rentals .pd-env-mappane .pd-ssr-map-wrap {
    height: 100%;
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: none;
}
.pd-ssr-rentals .pd-env-listpane {
    min-width: 0;
    /* Nearest container for the card grid. Unnamed @container rules below
       resolve to this when the split is present, and fall back to the
       .pd-ssr-rentals wrapper when a widget renders the grid without a map. */
    container-type: inline-size;
    container-name: pdenvlist;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--pd-env-surface);
}
@container pdenv (max-width: 860px) {
    .pd-ssr-rentals .pd-env-split { grid-template-columns: 1fr; aspect-ratio: auto; max-height: none; min-height: 0; height: auto; }
    .pd-ssr-rentals .pd-env-mappane { height: 320px; }
    .pd-ssr-rentals .pd-env-listpane { max-height: 70vh; border-top: 1px solid var(--pd-env-line); }
}
/**
 * Fallback for engines without container queries (pre-Chrome 105 / Safari 16 /
 * Firefox 110). Those never match the @container rules above, so both the split
 * stacking AND the column count are restated against the VIEWPORT here. Without
 * the column rules the grid would fall back to its one-column base at every
 * width — usable, but a single 1400px-wide card is not a reasonable desktop
 * layout. Viewport width is a decent proxy when the block is the page's main
 * content; a narrow embed on a wide screen is the case it cannot get right,
 * which is exactly why container queries are the primary path.
 */
@supports not (container-type: inline-size) {
    @media (max-width: 1100px) {
        .pd-ssr-rentals .pd-env-split { grid-template-columns: 1fr; aspect-ratio: auto; max-height: none; min-height: 0; height: auto; }
        .pd-ssr-rentals .pd-env-mappane { height: 320px; }
        .pd-ssr-rentals .pd-env-listpane { max-height: 70vh; }
    }
    /**
     * auto-fill is the right tool here: unlike a viewport media query it sizes
     * against the grid's OWN width, so a narrow widget on a wide screen still
     * gets sensible columns. Counting columns by viewport instead reproduced
     * the exact 98px-card cramping this layout was fixed for (a 625px widget
     * container on a 1440px screen would be told to draw three columns).
     *
     * It cannot hit exactly three columns at both 598px and 795px the way the
     * container queries do, so old browsers get two where new ones get three.
     * Conservative and usable, which is what a fallback should be.
     */
    .pd-ssr-rentals .pd-env-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* ── Results header ─────────────────────────────────────────────────────── */
/* Live renders this as one 38px row: "22 Results   Sort By: Availability".
   Ours wrapped to 54px because the <select>'s intrinsic width (set by its
   longest option, "Price (low to high)") squeezed the label until "Sort By:"
   broke across two lines. nowrap on the labels plus a shrinkable select keeps
   it on one line. */
.pd-ssr-rentals .pd-env-resulthead {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 20px;
    padding: 10px 20px;
    font: 400 16px/18.4px Roboto, sans-serif;
    color: var(--pd-env-text);
}
.pd-ssr-rentals .pd-env-resultcount { font-weight: 700; white-space: nowrap; flex: none; }
.pd-ssr-rentals .pd-env-sort {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
    min-width: 0;
}
.pd-ssr-rentals .pd-env-sort > span { font-weight: 400; white-space: nowrap; flex: none; }
.pd-ssr-rentals .pd-env-sort select {
    appearance: none;
    -webkit-appearance: none;
    min-width: 0;
    max-width: 100%;
    text-overflow: ellipsis;
    min-height: 28px;
    border: 0;
    background: transparent;
    font: 700 16px/18.4px Roboto, sans-serif;
    color: var(--pd-env-text);
    cursor: pointer;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.pd-ssr-rentals .pd-env-grid {
    display: grid;
    /* Column COUNT is explicit per container width rather than derived from a
       minmax() floor. A floor can only satisfy one target: 215px gives the live
       pane (835px) its three columns but leaves a 638px pane — what a default
       WordPress content column provides — with only two. Counting columns
       against the container gives three in both, and still steps down on
       genuinely narrow embeds instead of crushing cards. */
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
    padding: 5px 20px 20px;
}
/* ~172px cards — comfortably above the ~150px the actions row needs. */
@container (min-width: 400px) {
    .pd-ssr-rentals .pd-env-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 600px pane -> 176px cards; 638px (bare WP theme) -> 189px; 835px (live) -> 255px. */
@container (min-width: 600px) {
    .pd-ssr-rentals .pd-env-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (max-width: 280px) {
    .pd-ssr-rentals .pd-env-grid { padding: 5px 10px 10px; }
}

.pd-ssr-rentals .pd-env-card {
    display: flex;
    flex-direction: column;
    background: var(--pd-env-surface);
    border: 1px solid var(--pd-env-line);
    border-radius: 12px;
    overflow: hidden;
}
.pd-ssr-rentals .pd-env-card-photo {
    position: relative;
    display: block;
    aspect-ratio: 253 / 193;
    overflow: hidden;
    text-decoration: none;
    background: #e9ecee;
}
.pd-ssr-rentals .pd-env-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pd-ssr-rentals .pd-env-badge {
    position: absolute;
    top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 10px;
    font: 500 13px/14.95px Roboto, sans-serif;
}
.pd-ssr-rentals .pd-env-badge-photos {
    left: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border-radius: 4px;
}
.pd-ssr-rentals .pd-env-badge-photos .pd-env-icon { width: 13px; height: 13px; color: #fff; }
.pd-ssr-rentals .pd-env-badge-pets {
    right: 10px;
    background: var(--pd-env-blue);
    color: #fff;
    border-radius: 25px;
}
.pd-ssr-rentals .pd-env-card-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 5px 10px;
    min-height: 32px;
    color: #fff;
    font: 400 16px/22.4px Roboto, sans-serif;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
    box-sizing: border-box;

    /* Two lines maximum, ellipsised. A long address used to wrap to three
       lines and climb into the badge row at the top of the photo; the
       max-height is a hard stop that keeps it clear of the badges (top 10px +
       24px tall) no matter what the font or text does. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: calc(100% - 44px);
}

.pd-ssr-rentals .pd-env-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 15px 10px;
    font: 400 14px/19.6px Roboto, sans-serif;
}
.pd-ssr-rentals .pd-env-card-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    /* At the live card width (255px) price and availability sit on one line,
       as they do on the real site. In a narrower container they wrap instead
       of clipping. */
    flex-wrap: wrap;
    gap: 2px 8px;
}
.pd-ssr-rentals .pd-env-price { font: 700 16px/22.4px Roboto, sans-serif; }
.pd-ssr-rentals .pd-env-per { font: 400 14px/19.6px Roboto, sans-serif; color: var(--pd-env-muted); }
.pd-ssr-rentals .pd-env-avail { font: 400 14px/19.6px Roboto, sans-serif; white-space: nowrap; }
.pd-ssr-rentals .pd-env-avail strong { font-weight: 700; }

.pd-ssr-rentals .pd-env-addr {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    min-width: 0;
    font: 400 14px/19.6px Roboto, sans-serif;
}
/* Was `white-space: nowrap` + ellipsis, which cut mid-word ("367 Sh..."). Two
   lines, clamped, so breaks land between words. */
.pd-ssr-rentals .pd-env-addr {
    align-items: flex-start;
}
.pd-ssr-rentals .pd-env-addr .pd-env-icon { margin-top: 2px; }
.pd-ssr-rentals .pd-env-addr span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.pd-ssr-rentals .pd-env-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font: 400 14px/19.6px Roboto, sans-serif;
}
.pd-ssr-rentals .pd-env-specs li { display: inline-flex; align-items: center; gap: 5px; }
.pd-ssr-rentals .pd-env-icon { width: 15px; height: 15px; flex: none; color: var(--pd-env-text); }

.pd-ssr-rentals .pd-env-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Wrapping is the safety net: if a card is ever narrower than
       Apply + Details + gap, they stack instead of overlapping. */
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 2px;
}
.pd-ssr-rentals .pd-env-btn-apply,
.pd-ssr-rentals .pd-env-btn-details {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    max-width: 100%;
    height: 28px;
    padding: 1px 6px;
    border-radius: 4px;
    text-decoration: none;
    box-sizing: border-box;
}
.pd-ssr-rentals .pd-env-btn-apply {
    background: var(--pd-env-blue);
    color: #fff;
    font: 500 14px/16.1px Roboto, sans-serif;
}
.pd-ssr-rentals .pd-env-btn-apply:hover { background: var(--pd-env-blue-dk); color: #fff; }
.pd-ssr-rentals .pd-env-btn-details {
    background: var(--pd-env-surface);
    color: #000;
    font: 400 14px/16.1px Roboto, sans-serif;
}
.pd-ssr-rentals .pd-env-btn-details:hover { text-decoration: underline; }

/* ── Map markers (rentals only) ─────────────────────────────────────────── */
.pd-ssr-rentals .pd-env-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 4px;
    background: #000;
    color: #fff;
    font: 500 12px/1 Roboto, sans-serif;
    white-space: nowrap;
}
.pd-ssr-rentals .pd-env-cluster {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(69, 104, 220, 0.75);
    color: #fff;
    font: 500 14px/1 Roboto, sans-serif;
    box-shadow: 0 0 0 6px rgba(69, 104, 220, 0.25);
}

/* Popup extras. search-map.js emits these only for points carrying image/meta,
   which today is Envision alone — but scoping them here means they can never
   restyle another source's popup if one ever supplies those keys. Leaflet
   renders popups inside the map container, which sits inside .pd-ssr-rentals,
   so the scope resolves. */
.pd-ssr-rentals .pd-ssr-map-popup-thumb {
    width: 100%;
    max-width: 180px;
    height: 110px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 4px;
    display: block;
}
.pd-ssr-rentals .pd-ssr-map-popup-meta {
    font-size: .8rem;
    color: #6b7280;
}

/* ── Result states: copy and behaviour unchanged, restyled only ─────────── */
.pd-ssr-rentals .pd-ssr-stale {
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: 4px;
    color: #92400e;
    font: 400 14px/19.6px Roboto, sans-serif;
}
.pd-ssr-rentals .pd-ssr-empty {
    padding: 28px 20px;
    text-align: center;
    color: var(--pd-env-muted);
    font: 400 16px/22.4px Roboto, sans-serif;
}

/* ── Detail view — same design language as the cards ────────────────────── */
.pd-ssr-rentals .pd-ssr-rental-detail {
    max-width: 860px;
    margin: 0 auto;
    border: 0;
    padding: 0;
    font: 400 14px/19.6px Roboto, sans-serif;
}
.pd-ssr-rentals .pd-ssr-rental-detail .pd-ssr-gallery-wrap,
.pd-ssr-rentals .pd-ssr-rental-detail .pd-ssr-detail-hero {
    border-radius: 12px;
    overflow: hidden;
}
.pd-ssr-rentals .pd-ssr-rental-detail h1 {
    font: 700 24px/31px Roboto, sans-serif;
    color: var(--pd-env-text);
    margin: 18px 0 10px;
}
.pd-ssr-rentals .pd-env-detail-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--pd-env-line);
}
.pd-ssr-rentals .pd-env-detail-row .pd-env-price { font: 700 22px/30px Roboto, sans-serif; }
.pd-ssr-rentals .pd-env-detail-row .pd-env-per { font: 400 16px/22.4px Roboto, sans-serif; }
.pd-ssr-rentals .pd-env-detail-row .pd-env-avail { font: 400 16px/22.4px Roboto, sans-serif; }
.pd-ssr-rentals .pd-ssr-rental-detail .pd-env-addr {
    margin: 12px 0 0;
    font: 400 16px/22.4px Roboto, sans-serif;
}
.pd-ssr-rentals .pd-env-specs-lg {
    gap: 8px 22px;
    margin: 12px 0 0;
    font: 400 16px/22.4px Roboto, sans-serif;
}
.pd-ssr-rentals .pd-env-specs-lg .pd-env-icon { width: 17px; height: 17px; }
.pd-ssr-rentals .pd-env-spec-pets {
    height: 24px;
    padding: 0 10px;
    border-radius: 25px;
    background: var(--pd-env-blue);
    color: #fff;
    font: 500 13px/14.95px Roboto, sans-serif;
}
.pd-ssr-rentals .pd-ssr-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 24px;
    margin: 22px 0;
    padding: 18px;
    background: #f7f8f9;
    border: 1px solid var(--pd-env-line);
    border-radius: 12px;
}
.pd-ssr-rentals .pd-ssr-facts dt {
    margin: 0;
    font: 400 14px/19.6px Roboto, sans-serif;
    color: var(--pd-env-muted);
}
.pd-ssr-rentals .pd-ssr-facts dd { margin: 0; font: 500 14px/19.6px Roboto, sans-serif; }
.pd-ssr-rentals .pd-ssr-description { font: 400 16px/26px Roboto, sans-serif; }
.pd-ssr-rentals .pd-ssr-description p { margin: 0 0 16px; }
.pd-ssr-rentals .pd-env-desc-h {
    margin: 26px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--pd-env-line);
    font: 700 18px/24px Roboto, sans-serif;
    color: var(--pd-env-text);
}
.pd-ssr-rentals .pd-env-desc-list {
    margin: 0 0 18px;
    padding-left: 22px;
    list-style: disc;
}
.pd-ssr-rentals .pd-env-desc-list li {
    margin: 0 0 8px;
    font: 400 16px/26px Roboto, sans-serif;
}
.pd-ssr-rentals .pd-env-desc-list li strong { font-weight: 700; }
.pd-ssr-rentals .pd-ssr-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; }
.pd-ssr-rentals .pd-ssr-actions a {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 22px;
    border-radius: 4px;
    font: 500 14px/16.1px Roboto, sans-serif;
    text-decoration: none;
}
.pd-ssr-rentals .pd-ssr-apply { background: var(--pd-env-blue); color: #fff; }
.pd-ssr-rentals .pd-ssr-apply:hover { background: var(--pd-env-blue-dk); color: #fff; }
.pd-ssr-rentals .pd-ssr-tour,
.pd-ssr-rentals .pd-ssr-back {
    background: var(--pd-env-surface);
    color: var(--pd-env-text);
    border: 1px solid var(--pd-env-line);
}
.pd-ssr-rentals .pd-ssr-tour:hover,
.pd-ssr-rentals .pd-ssr-back:hover { background: #f7f8f9; }

.pd-ssr-rentals .pd-ssr-pager { font: 400 14px/19.6px Roboto, sans-serif; padding: 0 20px 18px; }