/*
 * properties-redesign.css
 * ------------------------------------------------------------------
 * Scoped, presentation-only redesign for /properties ONLY.
 * Every selector is nested under `.properties-redesigned` so the
 * stylesheet has zero effect on any other page even if loaded globally.
 *
 * Fonts (Fraunces + Inter) are imported but only applied inside
 * `.properties-redesigned` — other pages keep their existing serif.
 * ------------------------------------------------------------------
 */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap');

.properties-redesigned {
    --pr-cream: #FBF4ED;
    --pr-cream-2: #F4E9DD;
    --pr-card: #FFFFFF;
    --pr-ink: #2D3A2A;
    --pr-ink-soft: #5E6857;
    --pr-ink-faint: #8B9180;
    --pr-terracotta: #B23A1A;
    --pr-terracotta-dark: #8F2C0E;
    --pr-sage: #7C8A6B;
    --pr-gold: #C8861E;
    --pr-border: #EADFD0;
    --pr-border-strong: #DCCDB8;
    --pr-shadow-sm: 0 1px 2px rgba(45,58,42,.06);
    --pr-shadow-md: 0 6px 22px rgba(45,58,42,.10);
    --pr-shadow-lg: 0 16px 40px rgba(45,58,42,.16);
    --pr-radius: 16px;
    --pr-radius-sm: 10px;

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--pr-cream);
    color: var(--pr-ink);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

.properties-redesigned h1,
.properties-redesigned h2,
.properties-redesigned h3,
.properties-redesigned .pr-serif {
    font-family: 'Fraunces', 'Georgia', serif;
    font-weight: 600;
    letter-spacing: -.01em;
}

.properties-redesigned img { display: block; max-width: 100%; }
.properties-redesigned a { color: inherit; text-decoration: none; }

/* ---------- TITLE BAND REMOVED [owner-iter 2026-05-23] ----------
   Owner asked for the breadcrumb + H1 + tagline block to be deleted
   entirely; page content now sits flush directly under the site header.
   Rules removed: .pr-titleband, .pr-titleband-inner, .pr-crumbs,
   .pr-crumbs a:hover, .pr-titleband h1, .pr-titleband p.pr-sub. The
   mobile override that set .pr-titleband-inner padding + .pr-titleband
   h1 font-size was also removed below. */

/* ACTIVE FILTER CHIPS REMOVED [owner-iter 2026-05-23] — owner found them
   confusing/redundant; sidebar pill state already shows active filters. */

/* ---------- TOOLBAR ----------
   [owner-iter] Tightened top padding to bring grid up under title band. */
.properties-redesigned .pr-toolbar {
    max-width: 1320px;
    margin: 0 auto;
    padding: 10px 24px 0;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.properties-redesigned .pr-result-count {
    font-size: 15px;
    font-weight: 600;
    color: var(--pr-ink);
}
.properties-redesigned .pr-result-count span { color: var(--pr-ink-faint); font-weight: 500; }
.properties-redesigned .pr-toolbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}
.properties-redesigned .pr-toolbar .pr-select-wrap { position: relative; }
.properties-redesigned .pr-toolbar select.pr-sort,
.properties-redesigned .pr-toolbar-btn {
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    border: 1px solid var(--pr-border-strong);
    border-radius: 999px;
    padding: 10px 38px 10px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pr-ink);
    font-family: inherit;
    cursor: pointer;
}
.properties-redesigned .pr-toolbar-btn {
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.properties-redesigned .pr-toolbar-btn svg { width: 15px; height: 15px; }
.properties-redesigned .pr-toolbar .pr-select-wrap .pr-caret {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--pr-ink-soft);
    pointer-events: none;
}
.properties-redesigned .pr-filters-mobile-btn { display: none; }

/* ---------- LAYOUT ----------
   [owner-iter] Reduced top padding so sidebar + grid butt up against toolbar. */
.properties-redesigned .pr-layout {
    max-width: 1320px;
    margin: 0 auto;
    padding: 10px 24px 60px;
    display: grid;
    grid-template-columns: 272px 1fr;
    gap: 28px;
    align-items: start;
}

/* ---------- ACTION BAR (above the results grid) [owner-iter 2026-05-23] ----------
   Show Map + Sort dropdown BOTH on the RIGHT, grouped together (owner iter).
   padding-top adds breathing room beneath the site header (owner: "push it
   down a bit") — no title band any longer, so this is the first content
   below the global nav. */
.properties-redesigned .pr-action-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 20px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.properties-redesigned .pr-action-bar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
/* Sort dropdown lives in the action bar now — match toolbar pill styling. */
.properties-redesigned .pr-action-bar .property-sort-form label { display: none; }
.properties-redesigned .pr-action-bar .property-sort-form select.form-select {
    background-color: #fff;
    border: 1px solid var(--pr-border-strong);
    border-radius: 999px;
    padding: 8px 32px 8px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pr-ink);
    font-family: inherit;
    min-width: 180px;
    cursor: pointer;
}
.properties-redesigned .pr-map-toggle {
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    border: 1px solid var(--pr-border-strong);
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pr-ink);
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.properties-redesigned .pr-map-toggle svg { width: 16px; height: 16px; }
.properties-redesigned .pr-map-toggle:hover {
    border-color: var(--pr-terracotta);
    color: var(--pr-terracotta);
}
.properties-redesigned .pr-map-toggle.is-active {
    background: var(--pr-ink);
    border-color: var(--pr-ink);
    color: #fff;
}

/* ---------- MAP PANEL (wraps existing _map partial) [owner-iter] ---------- */
.properties-redesigned .pr-map-panel {
    margin-bottom: 18px;
    border-radius: var(--pr-radius);
    overflow: hidden;
}
.properties-redesigned .pr-map-panel[hidden] { display: none !important; }
.properties-redesigned .pr-map-panel .properties-map {
    margin-bottom: 0 !important;
}

/* ---------- FILTER PILL BUTTONS (Bedrooms / Bathrooms) [owner-iter] ---------- */
.properties-redesigned .pr-filter-shell .pr-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.properties-redesigned .pr-filter-shell .pr-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pr-border-strong);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pr-ink-soft);
    background: #fff;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
    margin: 0;
    line-height: 1.2;
    user-select: none;
    /* Anchor variant [owner-iter 2026-05-23]: pills are now <a> tags. */
    text-decoration: none;
}
.properties-redesigned .pr-filter-shell .pr-pill:hover,
.properties-redesigned .pr-filter-shell .pr-pill:focus {
    border-color: var(--pr-terracotta);
    color: var(--pr-terracotta);
    text-decoration: none;
}
.properties-redesigned .pr-filter-shell .pr-pill.is-selected {
    background: var(--pr-terracotta);
    border-color: var(--pr-terracotta);
    color: #fff;
}
.properties-redesigned .pr-filter-shell .pr-pill.is-selected:hover,
.properties-redesigned .pr-filter-shell .pr-pill.is-selected:focus {
    color: #fff;
}
.properties-redesigned .pr-filter-shell .pr-pill:focus-visible {
    outline: 2px solid rgba(178, 58, 26, 0.35);
    outline-offset: 2px;
}

/* ---------- PRICE RANGE SLIDER [owner-iter] ---------- */
.properties-redesigned .pr-filter-shell .pr-range { margin-top: 4px; }
.properties-redesigned .pr-filter-shell .pr-range input[type=range] {
    width: 100%;
    accent-color: var(--pr-terracotta);
    height: 4px;
    cursor: pointer;
}
.properties-redesigned .pr-filter-shell .pr-range-vals {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pr-ink-soft);
    margin-top: 6px;
}

/* ---------- FILTER SIDEBAR (restyle existing form) ----------
   [owner-iter 2026-05-23] margin-top equalises the sidebar top edge with
   the first row of property cards. The right column's .pr-action-bar
   pushes the .pr-results grid down by (padding-top 20px + button row ~40px
   + margin-bottom 14px) ≈ 74px. Mirror that offset here so the sidebar
   header sits flush with the top of the first card. */
.properties-redesigned .pr-filter-shell {
    position: sticky;
    top: 24px;
    margin-top: 74px;
    background: #fff;
    border: 1px solid var(--pr-border);
    border-radius: var(--pr-radius);
    padding: 4px 0;
    box-shadow: var(--pr-shadow-sm);
    max-height: calc(100vh - 48px);
    overflow: auto;
}
@media (max-width: 767.98px) {
    /* Mobile: sidebar becomes a slide-in sheet; reset the desktop offset. */
    .properties-redesigned .pr-filter-shell { margin-top: 0; }
}
.properties-redesigned .pr-filter-shell .property-filter-sidebar {
    /* neutralize legacy aside box look — we're providing the shell ourselves */
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
    margin: 0;
}
.properties-redesigned .pr-filter-shell .filter-form { padding: 0; }
.properties-redesigned .pr-filter-shell .filter-title {
    font-family: 'Fraunces', 'Georgia', serif;
    font-size: 16px;
    color: var(--pr-ink);
    margin: 0;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--pr-border);
}
.properties-redesigned .pr-filter-shell .filter-group {
    padding: 16px 18px;
    border-bottom: 1px solid var(--pr-border);
    margin: 0;
}
.properties-redesigned .pr-filter-shell .filter-group:last-of-type { border-bottom: none; }
.properties-redesigned .pr-filter-shell .filter-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pr-ink-faint);
    margin-bottom: 8px;
}
.properties-redesigned .pr-filter-shell .form-control,
.properties-redesigned .pr-filter-shell .form-select {
    border: 1px solid var(--pr-border-strong);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--pr-ink);
    background-color: #fff;
    font-family: inherit;
    width: 100%;
    line-height: 1.4;
    box-shadow: none;
}
.properties-redesigned .pr-filter-shell .form-control:focus,
.properties-redesigned .pr-filter-shell .form-select:focus {
    border-color: var(--pr-terracotta);
    box-shadow: 0 0 0 3px rgba(178, 58, 26, 0.12);
    outline: none;
}
.properties-redesigned .pr-filter-shell .form-check {
    padding: 5px 0;
    padding-left: 1.7em;
    margin-bottom: 0;
}
.properties-redesigned .pr-filter-shell .form-check-input {
    width: 17px;
    height: 17px;
    accent-color: var(--pr-terracotta);
    border: 1px solid var(--pr-border-strong);
    margin-left: -1.7em;
}
.properties-redesigned .pr-filter-shell .form-check-input:checked {
    background-color: var(--pr-terracotta);
    border-color: var(--pr-terracotta);
}
.properties-redesigned .pr-filter-shell .form-check-label {
    font-size: 13.5px;
    color: var(--pr-ink);
    cursor: pointer;
}
.properties-redesigned .pr-filter-shell .filter-actions {
    padding: 16px 18px;
    border-top: 1px solid var(--pr-border);
    position: sticky;
    bottom: 0;
    background: #fff;
}
.properties-redesigned .pr-filter-shell .btn-primary {
    width: 100%;
    background: var(--pr-terracotta);
    border-color: var(--pr-terracotta);
    color: #fff;
    border-radius: var(--pr-radius-sm);
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
}
.properties-redesigned .pr-filter-shell .btn-primary:hover,
.properties-redesigned .pr-filter-shell .btn-primary:focus {
    background: var(--pr-terracotta-dark);
    border-color: var(--pr-terracotta-dark);
}
.properties-redesigned .pr-filter-shell .btn-link {
    color: var(--pr-terracotta);
    font-weight: 600;
}

/* Sort dropdown override (existing form-select) */
.properties-redesigned .property-sort-form .form-select {
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    border: 1px solid var(--pr-border-strong);
    border-radius: 999px;
    padding: 10px 38px 10px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pr-ink);
    font-family: inherit;
    /* keep native chevron via background image */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6857' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px 14px;
}
.properties-redesigned .property-sort-form label {
    color: var(--pr-ink-soft) !important;
    font-weight: 600;
    font-size: 13px;
}

/* ---------- RESULTS GRID ---------- */
.properties-redesigned .pr-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

/* ---------- NEW PROPERTY CARD ---------- */
.properties-redesigned .pr-card {
    background: var(--pr-card);
    border: 1px solid var(--pr-border);
    border-radius: var(--pr-radius);
    overflow: hidden;
    box-shadow: var(--pr-shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}
.properties-redesigned .pr-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pr-shadow-lg);
}
.properties-redesigned .pr-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--pr-cream-2);
}
.properties-redesigned .pr-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.properties-redesigned .pr-card:hover .pr-photo img { transform: scale(1.04); }
.properties-redesigned .pr-badge-row {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
    z-index: 2;
}
.properties-redesigned .pr-tag {
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(4px);
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--pr-ink);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: var(--pr-shadow-sm);
    pointer-events: auto;
}
.properties-redesigned .pr-tag.pr-verified { color: var(--pr-terracotta); }
.properties-redesigned .pr-tag svg { width: 12px; height: 12px; }
.properties-redesigned .pr-fav {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(255,255,255,.94) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--pr-shadow-sm);
    border: 0 !important;
    color: var(--pr-ink-soft);
    pointer-events: auto;
    cursor: pointer;
    padding: 0;
}
.properties-redesigned .pr-fav i { font-size: 16px; color: var(--pr-ink-soft); }
.properties-redesigned .pr-fav.is-favorite,
.properties-redesigned .pr-fav.favorited,
.properties-redesigned .pr-fav.active {
    color: var(--pr-terracotta);
}
.properties-redesigned .pr-fav.is-favorite i,
.properties-redesigned .pr-fav.favorited i,
.properties-redesigned .pr-fav.active i {
    color: var(--pr-terracotta);
}
.properties-redesigned .pr-card-body {
    padding: 15px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.properties-redesigned .pr-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pr-sage);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    width: 100%;
}
.properties-redesigned .pr-eyebrow-loc {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
.properties-redesigned .pr-eyebrow i { font-size: 11px; }
.properties-redesigned .pr-card h3 {
    font-size: 17px;
    line-height: 1.28;
    margin: 7px 0 6px;
    color: var(--pr-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 44px;
}
.properties-redesigned .pr-card h3 a { color: inherit; }
.properties-redesigned .pr-rating {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--pr-ink-soft);
}
.properties-redesigned .pr-rating i.fa-star { color: var(--pr-gold); font-size: 13px; }
.properties-redesigned .pr-rating strong { color: var(--pr-ink); font-weight: 700; }
.properties-redesigned .pr-rating.pr-rating-new { color: var(--pr-terracotta); }
.properties-redesigned .pr-rating.pr-rating-new strong { color: var(--pr-terracotta); }
.properties-redesigned .pr-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 11px 0 0;
    font-size: 12.5px;
    color: var(--pr-ink-soft);
}
.properties-redesigned .pr-specs span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.properties-redesigned .pr-specs i {
    font-size: 12px;
    color: var(--pr-ink-faint);
    width: 14px;
    text-align: center;
}
.properties-redesigned .pr-card-foot {
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid var(--pr-border);
}
.properties-redesigned .pr-price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.properties-redesigned .pr-price-row .pr-amt {
    font-family: 'Fraunces', serif;
    font-size: 23px;
    font-weight: 600;
    color: var(--pr-ink);
}
.properties-redesigned .pr-price-row .pr-per {
    font-size: 13px;
    color: var(--pr-ink-soft);
}
.properties-redesigned .pr-total {
    font-size: 12px;
    color: var(--pr-ink-faint);
    margin-top: 2px;
}
.properties-redesigned .pr-total strong {
    color: var(--pr-ink-soft);
    font-weight: 600;
}
.properties-redesigned .pr-btn-view {
    margin-top: 12px;
    width: 100%;
    background: var(--pr-terracotta);
    color: #fff;
    border-radius: var(--pr-radius-sm);
    padding: 11px;
    font-size: 13.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-decoration: none;
    border: 0;
    font-family: inherit;
    transition: background .15s ease;
}
.properties-redesigned .pr-btn-view:hover { background: var(--pr-terracotta-dark); color: #fff; }
.properties-redesigned .pr-btn-view i { font-size: 12px; }

/* Empty state */
.properties-redesigned .pr-empty {
    grid-column: 1 / -1;
    background: #fff;
    border: 1px solid var(--pr-border);
    border-radius: var(--pr-radius);
    padding: 36px;
    text-align: center;
    color: var(--pr-ink-soft);
}
.properties-redesigned .pr-empty a {
    color: var(--pr-terracotta);
    font-weight: 600;
    text-decoration: underline;
}

/* Pagination */
.properties-redesigned .pagination {
    --bs-pagination-color: var(--pr-ink);
    --bs-pagination-active-bg: var(--pr-terracotta);
    --bs-pagination-active-border-color: var(--pr-terracotta);
    --bs-pagination-hover-color: var(--pr-terracotta);
    --bs-pagination-focus-color: var(--pr-terracotta);
    --bs-pagination-border-color: var(--pr-border-strong);
}

/* Map widget — soften the existing Leaflet container */
.properties-redesigned .properties-map {
    border: 1px solid var(--pr-border) !important;
    border-radius: var(--pr-radius) !important;
    box-shadow: var(--pr-shadow-sm);
    margin-bottom: 22px !important;
}

/* Hide the legacy property-sort-bar wrapper styles applied by porperty-list.css */
.properties-redesigned .property-sort-bar {
    display: none; /* replaced by .pr-toolbar above the layout */
}

/* ---------- MOBILE FILTER SHEET ---------- */
.properties-redesigned .pr-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(45,58,42,.45);
    z-index: 1040;
}
.properties-redesigned .pr-scrim.is-open { display: block; }
.properties-redesigned .pr-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    background: #fff;
    border-radius: 18px 18px 0 0;
    max-height: 88vh;
    overflow: auto;
    transform: translateY(100%);
    transition: transform .26s ease;
    display: none;
}
.properties-redesigned .pr-sheet.is-open { transform: translateY(0); display: block; }
.properties-redesigned .pr-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--pr-border);
    position: sticky;
    top: 0;
    background: #fff;
}
.properties-redesigned .pr-sheet-head h2 { font-size: 18px; margin: 0; }
.properties-redesigned .pr-sheet-close {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--pr-cream-2);
    border: 0;
    font-size: 18px;
    cursor: pointer;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1080px) {
    .properties-redesigned .pr-results { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
    .properties-redesigned .pr-layout {
        grid-template-columns: 1fr;
        padding: 14px 16px 50px;
    }
    /* MOBILE OFF-CANVAS FILTER SHEET [owner-iter 2026-05-25].
       The shell is the slide-in panel itself (right edge). It MUST be a fixed,
       positioned layer with a z-index ABOVE the scrim so its inputs are
       tappable. Previously the shell was position:static (display none→block),
       so the fixed .pr-scrim (z-index 1040) painted on top of it and
       intercepted every tap — date inputs could not be focused. */
    .properties-redesigned .pr-filter-shell {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: 88%;
        max-width: 360px;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: -8px 0 30px rgba(0, 0, 0, .2);
        max-height: none;
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 16px;
        z-index: 1050;               /* ABOVE .pr-scrim (1040) */
        transform: translateX(100%); /* parked off-screen to the right */
        transition: transform .25s ease;
        /* keep it laid out (so transform animates) but non-interactive when closed */
        visibility: hidden;
    }
    .properties-redesigned .pr-filter-shell.is-sheet-active {
        transform: translateX(0);
        visibility: visible;
    }
    /* The sidebar inside the shell is the actual form — make sure no inherited
       rule keeps it hidden once the sheet is open. */
    .properties-redesigned .pr-filter-shell.is-sheet-active .property-filter-sidebar {
        display: block;
    }
    .properties-redesigned .pr-toolbar { padding-left: 16px; padding-right: 16px; }
    .properties-redesigned .pr-filters-mobile-btn { display: inline-flex; }
}
@media (max-width: 560px) {
    .properties-redesigned .pr-results { grid-template-columns: 1fr; }
    .properties-redesigned .pr-toolbar { padding-top: 14px; }
}

/* ---------- MAKE SURE LEGACY OUTER SCAFFOLDING DOESN'T DOUBLE-WRAP ---------- */
.properties-redesigned .property-listscr {
    background: transparent;
    padding: 0;
}
.properties-redesigned .property-listscr > .container { max-width: none; padding: 0; }
.properties-redesigned .property-listscr > .container > .row { margin: 0; }

/* ---------- DATE INPUTS IN FILTER SIDEBAR ---------- */
/* [owner-iter 2026-05-23] Visible check-in/check-out date pickers. */
.properties-redesigned .pr-filter-shell .pr-date-row {
    /* [owner-iter 2026-05-23] Stack vertically so MM/DD/YYYY fits without clipping
       the year's last digit on the narrow sidebar. */
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.properties-redesigned .pr-filter-shell .pr-date-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    /* [owner-iter 2026-05-23] Allow grid cell to shrink below the native
       date-input intrinsic width — without this, the second column overflows
       the ~240px sidebar because date inputs have a hardcoded min-width. */
    min-width: 0;
}
.properties-redesigned .pr-filter-shell .pr-date-cap {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pr-ink-faint);
}
.properties-redesigned .pr-filter-shell .pr-date-field input[type="date"] {
    border: 1px solid var(--pr-border-strong);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--pr-ink);
    background: #fff;
    font-family: inherit;
    /* [owner-iter 2026-05-23] width:100% + box-sizing:border-box guarantee the
       input fills (not exceeds) its grid column on narrow sidebars. */
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}
.properties-redesigned .pr-filter-shell .pr-date-field input[type="date"]:focus {
    outline: none;
    border-color: var(--pr-terracotta);
    box-shadow: 0 0 0 3px rgba(178, 58, 26, 0.15);
}
/* [owner-iter 2026-05-23] On truly narrow sidebars (≤320px) stack the two
   date pickers vertically instead of side-by-side. */
@media (max-width: 320px) {
    .properties-redesigned .pr-filter-shell .pr-date-row {
        grid-template-columns: 1fr;
    }
}

/* ---------- LIVE QUOTE BREAKDOWN ON CARDS ---------- */
/* [owner-iter 2026-05-23] Per-card price breakdown when dates picked.
   Hostaway live quote: nightly × N + cleaning + OTA + taxes = total.
   Rendered by _property-card-new.blade.php only when $quotes[$property->id]
   is populated (PropertyController::index, 15min cache per id+dates+guests). */
.properties-redesigned .pr-card-quote-breakdown {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--pr-border);
}
.properties-redesigned .pr-quote-nightly {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 22px;
    color: var(--pr-ink);
    line-height: 1.1;
    margin-bottom: 8px;
}
.properties-redesigned .pr-quote-nightly span {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    color: var(--pr-ink-soft);
    font-weight: 400;
}
.properties-redesigned .pr-quote-rows {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}
.properties-redesigned .pr-quote-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    color: var(--pr-ink-soft);
    margin: 0;
}
.properties-redesigned .pr-quote-row dt {
    margin: 0;
    font-weight: 400;
}
.properties-redesigned .pr-quote-row dd {
    margin: 0;
    font-weight: 500;
    color: var(--pr-ink);
}
.properties-redesigned .pr-quote-total {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--pr-border);
    font-size: 14px;
}
.properties-redesigned .pr-quote-total dt {
    font-weight: 600;
    color: var(--pr-ink);
}
.properties-redesigned .pr-quote-total dd {
    font-weight: 700;
    font-size: 15px;
}

/* [owner-iter 2026-05-23] Defensive: ensure Amenities Hot Tub checkbox + label
   are always visible regardless of cascade quirks. Owner reported the label
   appearing blank after picking dates. */
.properties-redesigned .pr-filter-shell .filter-amenities {
    display: block !important;
    min-height: 32px;
}
.properties-redesigned .pr-filter-shell .filter-amenities .form-check {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding-left: 0;
    visibility: visible !important;
    opacity: 1 !important;
}
.properties-redesigned .pr-filter-shell .filter-amenities .form-check-input {
    margin: 0;
    width: 17px;
    height: 17px;
    accent-color: var(--pr-terracotta);
    flex-shrink: 0;
    visibility: visible !important;
    opacity: 1 !important;
}
.properties-redesigned .pr-filter-shell .filter-amenities .form-check-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--pr-ink) !important;
    cursor: pointer;
    visibility: visible !important;
    opacity: 1 !important;
}

/* [owner-iter 2026-05-25] Favorites heart now lives in the card-body eyebrow row
   (off the photo), small and background-free per owner — the white circle over
   the image read as distracting. Force static layout + transparent bg to beat
   legacy favorites.css (which absolute-pins .favorite-btn over the photo). */
.properties-redesigned .pr-card .pr-fav,
.properties-redesigned .pr-card .pr-fav.favorite-btn,
.properties-redesigned .pr-card .pr-fav.fav-toggle {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    width: 22px !important;
    height: 22px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    z-index: auto !important;
    flex-shrink: 0;
}
.properties-redesigned .pr-card .pr-fav i {
    font-size: 14px !important;
    color: var(--pr-ink-faint);
}
.properties-redesigned .pr-card .pr-fav:hover i { color: var(--pr-terracotta); }
.properties-redesigned .pr-card .pr-fav.is-favorite i,
.properties-redesigned .pr-card .pr-fav.favorited i,
.properties-redesigned .pr-card .pr-fav.active i { color: var(--pr-terracotta) !important; }

/* [owner-iter 2026-05-25] Single inline range calendar (hotel-datepicker) in the
   filters sidebar — replaces the two native date inputs. The picker's base width
   is a fixed 260px; force it to fill the sidebar column / mobile sheet instead. */
.properties-redesigned .pr-daterange-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--pr-border-strong);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--pr-ink);
    background: #fff;
    font-family: inherit;
    cursor: pointer;
    margin-bottom: 10px;
}
.properties-redesigned .pr-daterange-input::placeholder { color: var(--pr-ink-faint); }
.properties-redesigned .pr-daterange-input:focus {
    outline: none;
    border-color: var(--pr-terracotta);
    box-shadow: 0 0 0 3px rgba(178, 58, 26, 0.12);
}
/* Dropdown calendar (opens on click). /front/css/datepicker.css sizes the picker
   to 530px (two months side-by-side) for the wide property-page layout — far too
   wide for this narrow filters sidebar. Scope a compact override here: 256px with
   the two months STACKED, so it fits both the desktop sidebar column and the
   mobile filter sheet without clipping. Scoped to #property-filter-sidebar so the
   property page's own wide picker is untouched. */
.properties-redesigned #property-filter-sidebar .datepicker {
    width: 256px !important;
    max-width: calc(100vw - 56px);
    z-index: 60;
}
.properties-redesigned #property-filter-sidebar .datepicker__months { display: block !important; }
/* Show ONE month in this compact picker. In two-month mode hotel-datepicker
   freezes the TOP month's next button (a collision guard so the two months
   can't overlap) — that's why only the bottom month moved. Hiding month-2 puts
   the picker into single-month mode (isSingleMonth()), so the one visible
   month's < and > both navigate freely. Range selection across months still
   works (pick check-in, page forward with >, pick check-out). */
.properties-redesigned #property-filter-sidebar .datepicker .datepicker__month--month2 { display: none !important; }
.properties-redesigned #property-filter-sidebar .datepicker__month {
    display: table !important;
    width: 100% !important;
    float: none !important;
    margin: 0 0 12px 0 !important;
    /* fixed layout forces the 7 day columns to divide the 256px evenly instead of
       honouring /front/css/datepicker.css's fixed ~65px cell widths (which made
       the table ~455px and clipped FRI/SAT). */
    table-layout: fixed !important;
}
.properties-redesigned #property-filter-sidebar .datepicker__month th,
.properties-redesigned #property-filter-sidebar .datepicker__month td,
.properties-redesigned #property-filter-sidebar .datepicker__month-day {
    width: auto !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Hide the vendor's center divider line. It's a 1px rule at left:50% that
   separates the TWO months in the side-by-side layout — but we show a single
   month, so it just bisects the calendar. */
.properties-redesigned #property-filter-sidebar .datepicker__months::before {
    display: none !important;
}

/* [owner-iter 2026-05-25] Keep Filters / Show map / Sort on ONE line on phones.
   They wrapped because the sort <select> has an inline min-width:180px (needs
   !important to override) plus the two buttons exceed the phone width. Make the
   row no-wrap, compact the buttons, and let the sort dropdown flex to fill the
   remaining space. */
@media (max-width: 575.98px) {
    .properties-redesigned .pr-action-bar {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 6px;
        padding-top: 16px;
    }
    .properties-redesigned .pr-action-bar .pr-filters-mobile-btn,
    .properties-redesigned .pr-action-bar .pr-map-toggle {
        flex: 0 0 auto;
        padding: 8px 9px;
        font-size: 12px;
        gap: 4px;
        white-space: nowrap;
    }
    .properties-redesigned .pr-action-bar .pr-filters-mobile-btn svg,
    .properties-redesigned .pr-action-bar .pr-map-toggle svg {
        width: 13px;
        height: 13px;
    }
    .properties-redesigned .pr-action-bar .property-sort-form {
        flex: 1 1 auto;
        min-width: 0;
    }
    .properties-redesigned .pr-action-bar .property-sort-form select.form-select {
        min-width: 0 !important;
        width: 100% !important;
        padding: 8px 24px 8px 9px;
        font-size: 12px;
    }
}

/* [owner-iter 2026-05-25] Make the drag/hover range preview clearly visible.
   After check-in is picked, hovering toward check-out highlights the in-between
   days — but the vendor default (rgb(151 134 103 / 20%)) is nearly invisible, so
   it didn't read as a selection. Paint the tentative + selected range in the
   site's terracotta with solid endpoints (scoped to the Stays filter calendar).
   On touch devices there's no hover, so this is naturally a desktop affordance. */
.properties-redesigned #property-filter-sidebar .datepicker__month-day--hovering,
.properties-redesigned #property-filter-sidebar .datepicker__month-day--selected {
    background-color: rgba(178, 58, 26, 0.22) !important;
    color: var(--pr-ink) !important;
}
.properties-redesigned #property-filter-sidebar .datepicker__month-day--first-day-selected,
.properties-redesigned #property-filter-sidebar .datepicker__month-day--last-day-selected {
    background-color: var(--pr-terracotta) !important;
    color: #fff !important;
}