/* ============================================================
   Urban Realities - Design System
   Archetype: Editorial Luxury (warm cream, variable serif display,
   film grain, machined double-bezel enclosures)
   Loaded LAST so it wins over style.css / responsive.css / layout.css.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

/* ---------- Tokens ---------- */
:root {
    --ur-cream: #FDFBF7;
    --ur-cream-2: #F6F2EA;
    --ur-espresso: #1C1917;
    --ur-ink: #2B2724;
    --ur-muted: #7A7269;
    --ur-hairline: rgba(28, 25, 23, .08);
    --ur-hairline-2: rgba(28, 25, 23, .05);
    --ur-sage: #6B7F6E;
    --ur-brand: #ff5a5f;
    --ur-brand-deep: #E14E52;

    /* Radii - deliberately restrained. Large containers get a soft corner,
       small controls stay close to square. Only true pills use 999px. */
    --ur-r-lg: 1rem;
    --ur-r-md: .75rem;
    --ur-r-sm: .5rem;
    --ur-bezel: .3rem;

    --ur-ease: cubic-bezier(.32, .72, 0, 1);
    --ur-ease-soft: cubic-bezier(.22, 1, .36, 1);

    --ur-shadow-ambient: 0 24px 60px -20px rgba(28, 25, 23, .12), 0 8px 20px -12px rgba(28, 25, 23, .08);
    --ur-shadow-lift: 0 20px 42px -20px rgba(28, 25, 23, .18), 0 6px 14px -8px rgba(28, 25, 23, .08);
    --ur-inner-hi: inset 0 1px 1px rgba(255, 255, 255, .9);
}

/* ---------- Base ---------- */
body,
.body,
p,
span,
li,
td,
th,
label,
input,
select,
textarea,
button,
.btn {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

body {
    background-color: var(--ur-cream);
    color: var(--ur-ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5,
.breadcrumb_title,
.main-title h2,
.fp_price {
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    color: var(--ur-espresso);
    letter-spacing: -.015em;
}

h1, h2, .breadcrumb_title, .main-title h2 {
    font-weight: 400;
    line-height: 1.06;
}

/* Macro typography */
.main-title h2 {
    font-size: clamp(2rem, 3.6vw, 3.25rem);
    margin-bottom: .35rem;
}

.main-title p {
    color: var(--ur-muted);
    font-size: 1rem;
}

.breadcrumb_title {
    font-size: clamp(2rem, 3.6vw, 3rem);
}

/* ---------- Film grain (fixed, GPU-cheap, never on scrollers) ---------- */
.ur-grain {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Macro whitespace ---------- */
.our-listing,
.feature-property,
.property-city,
.our-testimonials,
.ur_postit,
.property-search {
    padding-top: clamp(4.5rem, 8vw, 9rem) !important;
    padding-bottom: clamp(4.5rem, 8vw, 9rem) !important;
}

/* ---------- Eyebrow tag ---------- */
.ur-eyebrow {
    display: inline-block;
    border-radius: 999px;
    padding: .3rem .8rem;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-weight: 500;
    color: var(--ur-muted);
    background: rgba(28, 25, 23, .04);
    border: 1px solid var(--ur-hairline-2);
    margin-bottom: 1rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ---------- Double-bezel enclosure ---------- */
.ur-shell {
    background: rgba(28, 25, 23, .04);
    border: 1px solid var(--ur-hairline-2);
    border-radius: var(--ur-r-lg);
    padding: var(--ur-bezel);
    transition: box-shadow .7s var(--ur-ease), transform .7s var(--ur-ease);
}

.ur-core {
    background: #fff;
    border-radius: calc(var(--ur-r-lg) - var(--ur-bezel));
    box-shadow: var(--ur-inner-hi);
    overflow: hidden;
}

.ur-shell:hover {
    box-shadow: var(--ur-shadow-lift);
    transform: translateY(-3px);
}

/* ---------- Property cards as machined hardware ---------- */
.feat_property {
    background: rgba(28, 25, 23, .035);
    border: 1px solid var(--ur-hairline-2);
    border-radius: var(--ur-r-lg) !important;
    padding: var(--ur-bezel);
    box-shadow: none;
    transition: transform .7s var(--ur-ease), box-shadow .7s var(--ur-ease);
}

    .feat_property:hover {
        transform: translateY(-4px);
        box-shadow: var(--ur-shadow-lift);
    }

    .feat_property .thumb {
        border-radius: calc(var(--ur-r-lg) - var(--ur-bezel)) !important;
        overflow: hidden;
    }

    /* Listing cards: .feat_property's own tint composites to within ~2% of the
       .bgc-f7 section behind it, so the cards merged into the page. White gives
       them a real edge. .list is the horizontal listing card - the home rails are
       .home3 and set their own ground at page level, so they are untouched. */
    .feat_property.list {
        background: #fff;
        /* the shared hairline is rgba(...,.05) and disappears against cream-2 -
           same .14 tone the home rail cards use, so the two read as one family */
        border: 1px solid rgba(28, 25, 23, .14);
    }

    .feat_property .details {
        background: transparent;
        border-radius: calc(var(--ur-r-lg) - var(--ur-bezel));
    }

    .feat_property .thumb img,
    .feat_property .property-img {
        transition: transform 1.1s var(--ur-ease);
        will-change: transform;
    }

    .feat_property:hover .thumb img {
        transform: scale(1.04);
    }

.fp_price {
    font-size: 1.5rem !important;
    font-weight: 500;
    color: var(--ur-espresso) !important;
}

    .fp_price small {
        font-family: 'Plus Jakarta Sans', sans-serif;
        color: var(--ur-muted);
        font-weight: 400;
    }

/* ---------- Buttons: island pill + button-in-button ---------- */
.btn-thm,
.btn.btn-thm {
    background: var(--ur-espresso) !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: .85rem 1.6rem !important;
    font-weight: 500;
    letter-spacing: .01em;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset;
    transition: transform .5s var(--ur-ease), background-color .5s var(--ur-ease), box-shadow .5s var(--ur-ease);
}

    /* style.css hovers .btn-thm to red text on a white ground. This overrode the
       background to brand red but not the colour, so the label went red-on-red and
       vanished - every primary button on the site. Keep the label white. */
    .btn-thm:hover {
        background: var(--ur-brand) !important;
        color: #fff !important;
        box-shadow: var(--ur-shadow-ambient);
        transform: translateY(-1px);
    }

    .btn-thm:active {
        transform: scale(.98);
    }

.btn-light,
.btn.btn-light {
    background: transparent !important;
    border: 1px solid var(--ur-hairline) !important;
    border-radius: 999px !important;
    padding: .85rem 1.6rem !important;
    color: var(--ur-ink) !important;
    transition: border-color .5s var(--ur-ease), background-color .5s var(--ur-ease);
}

    .btn-light:hover {
        border-color: var(--ur-espresso) !important;
        background: rgba(28, 25, 23, .03) !important;
    }

/* Nested trailing icon: <a class="ur-cta"><span>Label</span><i class="ur-cta__ico">↗</i></a> */
.ur-cta {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    background: var(--ur-espresso);
    color: #fff !important;
    border-radius: 999px;
    padding: .5rem .5rem .5rem 1.5rem;
    font-weight: 500;
    transition: transform .5s var(--ur-ease), background-color .5s var(--ur-ease);
}

    .ur-cta:hover {
        background: var(--ur-brand);
        transform: translateY(-1px);
    }

    .ur-cta:active {
        transform: scale(.98);
    }

.ur-cta__ico {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-size: .85rem;
    transition: transform .5s var(--ur-ease), background-color .5s var(--ur-ease);
}

.ur-cta:hover .ur-cta__ico {
    transform: translate(3px, -1px) scale(1.05);
    background: rgba(255, 255, 255, .22);
}

/* ---------- Inputs ---------- */
.form-control,
.bootstrap-select .dropdown-toggle,
.bootstrap-select > .dropdown-toggle.btn-light {
    border-radius: var(--ur-r-sm) !important;
    border: 1px solid var(--ur-hairline) !important;
    background: #fff !important;
    box-shadow: var(--ur-inner-hi) !important;
    transition: border-color .5s var(--ur-ease), box-shadow .5s var(--ur-ease);
}

    .form-control:focus,
    .bootstrap-select .dropdown-toggle:focus {
        border-color: var(--ur-espresso) !important;
        box-shadow: 0 0 0 4px rgba(28, 25, 23, .06) !important;
        outline: 0 !important;
    }

/* Open menu. bootstrap-select leaves the list at the inherited 16px while the
   closed toggle reads 13px, so the options jumped a size on open. Match the
   toggle and tighten the rows to suit the smaller text. */
.bootstrap-select .dropdown-menu {
    font-size: 13px;
}

    .bootstrap-select .dropdown-menu li a,
    .bootstrap-select .dropdown-menu .dropdown-item {
        padding: .32rem 1.1rem;
        font-size: 13px;
        line-height: 1.5;
    }

        .bootstrap-select .dropdown-menu li a .text,
        .bootstrap-select .dropdown-menu .dropdown-item .text {
            font-size: 13px;
            line-height: 1.5;
        }

    /* Group headers inside a grouped select */
    .bootstrap-select .dropdown-menu .dropdown-header {
        font-size: 10px;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

/* ---------- Filter panel as an enclosure ---------- */
.sidebar_listing_list {
    background: rgba(28, 25, 23, .035) !important;
    border: 1px solid var(--ur-hairline-2);
    border-radius: var(--ur-r-lg) !important;
    padding: var(--ur-bezel) !important;
    box-shadow: none !important;
}

.sidebar_advanced_search_widget {
    background: #fff;
    border-radius: calc(var(--ur-r-lg) - var(--ur-bezel));
    box-shadow: var(--ur-inner-hi);
    padding: 1.5rem !important;
}

/* ---------- Scroll reveal ---------- */
.ur-reveal {
    opacity: 0;
    transform: translateY(2.5rem);
    filter: blur(6px);
    transition: opacity .9s var(--ur-ease-soft), transform .9s var(--ur-ease-soft), filter .9s var(--ur-ease-soft);
    will-change: transform, opacity;
}

    /* Settle on none, not translateY(0)/blur(0): an identity transform or filter
       still creates a stacking context, which trapped every positioned descendant
       of a revealed element - dropdown menus painted under the cards next to them.
       Both still animate, since none interpolates as the identity. */
    .ur-reveal.is-in {
        opacity: 1;
        transform: none;
        filter: none;
        will-change: auto;
    }

    .ur-reveal[data-d="1"] { transition-delay: .08s; }
    .ur-reveal[data-d="2"] { transition-delay: .16s; }
    .ur-reveal[data-d="3"] { transition-delay: .24s; }
    .ur-reveal[data-d="4"] { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
    .ur-reveal {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

/* ---------- Section surfaces ---------- */
.bgc-f7 {
    background-color: var(--ur-cream-2) !important;
}

.bg-white {
    background-color: var(--ur-cream) !important;
}

/* ---------- Mobile ---------- */
@media only screen and (max-width: 767px) {
    :root {
        --ur-r-lg: .875rem;
        --ur-bezel: .25rem;
    }

    .our-listing,
    .feature-property,
    .property-city,
    .our-testimonials,
    .ur_postit,
    .property-search {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    .ur-cta {
        padding-left: 1.15rem;
    }
}

/* Listing pages open with their own page-title block, so the macro 8vw top padding
   (123px at 1536) just pushed everything down. Cut it right back, but not to 0 -
   at 0 the eyebrow chip sits 2px under the fixed navbar. Keep padding-bottom.
   Must sit after the mobile group above to win at both breakpoints (equal
   specificity, so document order decides). */
.our-listing {
    padding-top: clamp(1.75rem, 3vw, 3rem) !important;
}

/* ============================================================
   Compact card scale
   The rails and cards read too large at wide viewports. This
   narrows the home rails and tightens the card type/padding
   everywhere. Loaded last, but partial <style> blocks sit in
   <body>, so sizing overrides need !important to win.
   ============================================================ */

/* Home rails: stop the carousel sprawling to 1600px */
.ur_cards_sec.maxw1600,
section.feature-property.maxw1600 {
    max-width: 1280px !important;
}

/* Card body: tighter padding */
.ur-rcard .tc_content,
.ur-pgcard .tc_content,
.feat_property .details .tc_content {
    padding: 1rem 1.15rem .3rem !important;
}

.ur-rcard .fp_footer,
.ur-pgcard .fp_footer,
.feat_property .details .fp_footer {
    padding: .55rem 1.15rem .9rem !important;
}

/* Price: was reading as a headline */
.ur_amount {
    font-size: clamp(1.05rem, 1.35vw, 1.3rem) !important;
}

.fp_price {
    font-size: 1.15rem !important;
}

    .fp_price small,
    .ur_per {
        font-size: 10.5px !important;
    }

/* Title */
.ur-rcard .tc_content h4 a,
.ur-pgcard .tc_content h4 a,
.feat_property .tc_content h4 {
    font-size: clamp(.95rem, 1.15vw, 1.08rem) !important;
    line-height: 1.3 !important;
}

/* Photo: cap the panel so cards stay short */
.ur-rcard .feat_property.list .thumb .property-img,
.ur-pgcard .feat_property.list .thumb .property-img {
    height: 100% !important;
    min-height: 168px !important;
    max-height: 208px !important;
}

/* Specs / chips: quieter and tighter */
.ur_spec_v,
.ur_chip_v {
    font-size: .9rem !important;
}

.ur_sharing_chip {
    padding: 3px 9px !important;
    font-size: 11px !important;
}

.ur_transit_pill {
    padding: 5px 10px !important;
    font-size: 10.5px !important;
}

/* Avatar */
.feat_property .fp_footer .fp_meta img {
    width: 32px !important;
    height: 32px !important;
}

@media only screen and (max-width: 767px) {
    .ur-rcard .feat_property.list .thumb .property-img,
    .ur-pgcard .feat_property.list .thumb .property-img {
        min-height: 158px !important;
        max-height: none !important;
    }

    .ur-rcard .tc_content,
    .ur-pgcard .tc_content,
    .feat_property .details .tc_content {
        padding: .9rem 1rem .3rem !important;
    }

    /* The footer had no mobile counterpart, so it kept the desktop 1.15rem
       inline padding while .tc_content above dropped to 1rem - card body and
       footer then sat on different left edges once the theme switched the card
       to its stacked grid layout below 768px. */
    .ur-rcard .fp_footer,
    .ur-pgcard .fp_footer,
    .feat_property .details .fp_footer {
        padding: .5rem 1rem .9rem !important;
    }
}

/* ============================================================
   Home rails: equal-height cards
   Owl sizes item WIDTHS but never heights, so cards ended up
   ragged whenever a title wrapped, an image had a different
   aspect ratio, or a spec was missing. Flex the stage and pin
   every variable-height part.
   ============================================================ */

.feature_property_home3_slider .owl-stage {
    display: flex;
    align-items: stretch;
}

.feature_property_home3_slider .owl-item {
    display: flex;
    flex: 0 0 auto;      /* keep owl's inline width as the base size */
    height: auto;
}

    .feature_property_home3_slider .owl-item > .item {
        display: flex;
        width: 100%;
    }

.feature_property_home3_slider .feat_property.home3 {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* Stroke belongs on the card, not the photo. Beats .feat_property.home3{border:none} in style.css */
    border: 1px solid rgba(28, 25, 23, .14);
    padding: 0;
}

    /* Photo box is fixed so aspect ratio can't change card height */
    .feature_property_home3_slider .feat_property.home3 .thumb {
        position: relative;
        flex: 0 0 auto;
        height: 200px;
        overflow: hidden;
        margin: 0;
        border-radius: 0 !important;
    }

        .feature_property_home3_slider .feat_property.home3 .thumb > img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover;
        }

    /* Body fills the rest */
    .feature_property_home3_slider .feat_property.home3 .details {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
    }

        .feature_property_home3_slider .feat_property.home3 .tc_content {
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
        }

    /* Property-type kicker: reserve the line even when empty */
    .feature_property_home3_slider .feat_property.home3 .tc_content > p.text-thm {
        min-height: 1.2em;
        margin-bottom: .35rem;
    }

    /* Title: always two lines tall, clamped so long names can't push down */
    .feature_property_home3_slider .feat_property.home3 .tc_content h4 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 2.6em;
        margin-bottom: .4rem;
    }

    /* Locality line: reserve it too */
    .feature_property_home3_slider .feat_property.home3 .tc_content > p:not(.text-thm) {
        min-height: 1.4em;
        margin-bottom: .5rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* Specs row pinned to the bottom, single line, fixed height */
    .feature_property_home3_slider .feat_property.home3 .prop_details {
        margin-top: auto !important;
        min-height: 2.1em;
        overflow: hidden;
        white-space: nowrap;
    }

/* ---- Home rails: price leads, everything else steps down ----
   Price sits first in the body, so it has to carry the hierarchy.
   Was 18.4px price against 17.3px title and 16px specs - nothing led. */
.feature_property_home3_slider .feat_property.home3 .fp_price {
    font-size: 1.6rem !important;
    font-weight: 500;
    display: block;
    margin-bottom: .35rem;
}

    .feature_property_home3_slider .feat_property.home3 .fp_price small {
        font-size: 11.5px !important;
    }

.feature_property_home3_slider .feat_property.home3 .tc_content > p.text-thm {
    font-size: 12px !important;
}

.feature_property_home3_slider .feat_property.home3 .tc_content h4 {
    font-size: 15.5px !important;
}

.feature_property_home3_slider .feat_property.home3 .tc_content > p:not(.text-thm) {
    font-size: 12.5px !important;
}

.feature_property_home3_slider .feat_property.home3 .prop_details li,
.feature_property_home3_slider .feat_property.home3 .prop_details li a,
.feature_property_home3_slider .feat_property.home3 .prop_details li span {
    font-size: 13px !important;
}

@media only screen and (max-width: 767px) {
    .feature_property_home3_slider .feat_property.home3 .thumb {
        height: 180px;
    }
}

/* ============================================================
   Home rails: stop the hover shadow hitting the clip edge
   The theme sets .owl-stage-outer { overflow: visible } for this
   slider, so the clipper is .ovh (overflow:hidden) on the rail's
   container-fluid - a big hover shadow got sliced against it and
   drew a hard section boundary.
   1. Give the clip box vertical breathing room (padding out,
      margin back in, so layout does not move).
   2. Keep the card's own hover shadow tight enough to sit well
      inside that room.
   ============================================================ */

.ur_cards_sec > .container-fluid.ovh {
    padding-top: 30px;
    padding-bottom: 30px;
    margin-top: -30px;
    margin-bottom: -30px;
}

.feature_property_home3_slider .feat_property.home3 {
    transition: transform .6s var(--ur-ease), box-shadow .6s var(--ur-ease), border-color .6s var(--ur-ease);
}

    .feature_property_home3_slider .feat_property.home3:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 22px -12px rgba(28, 25, 23, .22);
        border-color: rgba(28, 25, 23, .22);
    }

@media only screen and (max-width: 767px) {
    .ur_cards_sec > .container-fluid.ovh {
        padding-top: 20px;
        padding-bottom: 20px;
        margin-top: -20px;
        margin-bottom: -20px;
    }
}

/* ============================================================
   Home rails: carousel arrows
   The theme parks them at left/right -25px, i.e. OUTSIDE the
   carousel box - and .ovh on the rail container clips exactly
   there, so they were invisible at the section edges. Pull them
   inside and centre them on the 200px photo band so they sit
   over imagery rather than text.
   ============================================================ */

.feature_property_home3_slider.owl-carousel.owl-theme .owl-nav {
    margin: 0;
}

.feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-prev,
.feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-next {
    position: absolute;
    top: 105px;
    z-index: 6;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background-color: #fff !important;
    border: 1px solid var(--ur-hairline) !important;
    box-shadow: 0 8px 20px -8px rgba(28, 25, 23, .30) !important;
    color: var(--ur-espresso) !important;
    opacity: 1 !important;
    transform: translateY(-50%);
    transition: transform .5s var(--ur-ease), background-color .5s var(--ur-ease), box-shadow .5s var(--ur-ease), color .5s var(--ur-ease);
}

.feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-prev {
    left: 12px !important;
    right: auto !important;
}

.feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-next {
    right: 12px !important;
    left: auto !important;
}

    .feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-prev:hover,
    .feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-next:hover {
        background-color: var(--ur-espresso) !important;
        border-color: var(--ur-espresso) !important;
        color: #fff !important;
        transform: translateY(-50%) scale(1.06);
        box-shadow: 0 12px 26px -10px rgba(28, 25, 23, .45) !important;
    }

    .feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-prev:active,
    .feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-next:active {
        transform: translateY(-50%) scale(.96);
    }

    /* owl greys out and disables the button at either end */
    .feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-prev.disabled,
    .feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-next.disabled {
        opacity: 0 !important;
        pointer-events: none;
    }

    .feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-prev span,
    .feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-next span {
        display: inline-flex;
        line-height: 1;
        font-size: 15px;
    }

@media only screen and (max-width: 767px) {
    .feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-prev,
    .feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-next {
        top: 95px;
        width: 38px !important;
        height: 38px !important;
    }

    .feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-prev {
        left: 8px !important;
    }

    .feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-next {
        right: 8px !important;
    }
}

/* ==========================================================================
   SCROLLBARS
   A 10px gutter with the thumb inset 2px by a transparent border and clipped to
   its content box, so it reads as a 6px rounded pill in the channel rather than
   a slab wedged against the edge.

   The thumb is the brand red, opaque on purpose, over a gutter tinted with the
   same red. The gutter sits outside the body box so it paints the ROOT
   background, never the section beside it - a translucent thumb looked fine
   over cream and then vanished into the cream band the gutter cuts down the
   dark hero. Opaque red on a blush channel reads the same the whole way down.

   The standard scrollbar-width / scrollbar-color pair is fenced behind a
   feature query on purpose: Chrome 121+ drops ::-webkit-scrollbar entirely for
   any scroller that sets them, which would throw away the pill above. Only
   engines with no WebKit pseudo-elements (Firefox) match the query, and both
   properties inherit, so declaring them on html covers nested scrollers too.
   ========================================================================== */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background-color: rgba(255, 90, 95, .12);
}

::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background-color: var(--ur-brand);
    background-clip: content-box;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--ur-brand-deep);
    }

    ::-webkit-scrollbar-thumb:active {
        background-color: #c53f43;
    }

::-webkit-scrollbar-corner {
    background-color: transparent;
}

::-webkit-scrollbar-button {
    display: none;
}

@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: thin;
        scrollbar-color: var(--ur-brand) rgba(255, 90, 95, .12);
    }
}


/* ==========================================================================
   NEUTRALISE THE THEME'S body_overlay
   script.js binds .filter_open_btn and does $("body").addClass("body_overlay"),
   and style.css then applies to <body>:
       position: fixed;  transform: translate(0, 0);  width: 100%;
   Our Show Filter button still carries .filter_open_btn, so that fires alongside
   toggleFilters(). Both declarations are destructive here:
     - position:fixed on <body> takes the page out of flow, so it stops
       scrolling and the scrollbar disappears entirely.
     - transform on <body> makes it the containing block for every
       position:fixed descendant, so the filter sheet resolved bottom:0 against
       the full document height and landed thousands of pixels off-screen, and
       the mobile nav overlay did the same - it opened as an empty cream panel
       with its centred content far below the viewport.
   The theme only removes the class on .filter_closed_btn, which our redesigned
   sheet does not use, so it stuck until a reload. script.js is vendor and not
   ours to edit, so the class is defanged here instead - this works no matter
   when the theme adds it. Our own .ur-sheet-scrim does the dimming.
   ========================================================================== */

body.body_overlay {
    position: static;
    transform: none;
    width: auto;
}

    body.body_overlay:before {
        content: none;
    }

/* ==========================================================================
   MOBILE FILTER BUTTON
   style.css pins #main2 .filter_open_btn out of flow - position:absolute,
   right:0, top:5px, width:170px, height:50px - with the icon as a separate
   absolutely positioned 48px red block. #main2 is static and collapses to
   zero height, so the button resolved against a far-up positioned ancestor
   and painted straight over the page heading. Put it back in flow as a pill
   sized like the sort control it sits above.
   ========================================================================== */
@media only screen and (max-width: 991px) {
    /* The button now lives inside .ur-toolbar so it sits inline with Sort.
       Two equal halves; the results count is dropped here because the page meta
       line directly above already states it ("5 stays available"), and keeping
       it forced the row to wrap. Two-class selectors so these win over the
       per-page <style> blocks without editing all three listing views. */
    .ur-toolbar .ur-toolbar__count {
        display: none;
    }

    .ur-toolbar #main2.db-991 {
        display: block !important;
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
    }

    .ur-toolbar .ur-toolbar__sort {
        flex: 1 1 0;
        min-width: 0;
        margin-left: 0;
        gap: 0;
    }

        /* No room for the label beside the pill, and it squeezed the select down
           to 53px - too narrow to read its own value. The select shows the
           active sort ("Newest"), so it carries the meaning on its own. */
        .ur-toolbar .ur-toolbar__label {
            display: none;
        }

        /* bootstrap-select ships its own high-specificity width rules, so grow
           it with flex instead of fighting that cascade. */
        .ur-toolbar .ur-toolbar__sort .bootstrap-select {
            flex: 1 1 auto;
            min-width: 0;
        }

            .ur-toolbar .ur-toolbar__sort .bootstrap-select > .dropdown-toggle {
                width: 100%;
            }

    /* Both controls fill their half and match heights, so the bar reads as one
       pair. Stretch rather than a hardcoded height, so the pill tracks whatever
       height the sort control resolves to. */
    .ur-toolbar #main2.db-991 {
        align-self: stretch;
    }

        .ur-toolbar #main2 .filter_open_btn {
            width: 100%;
            height: 100%;
        }

    #main2 {
        display: flex;
        margin: -.35rem 0 1.1rem;
    }

    #main2 .filter_open_btn {
        position: static;
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        width: auto;
        height: auto;
        justify-content: center;
        padding: .72rem 1.1rem;
        border-radius: 999px;
        background-color: var(--ur-espresso);
        box-shadow: none;
        overflow: visible;
        font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: .1em;
        text-transform: uppercase;
        text-align: left;
        color: #fff;
    }

    #open2.flaticon-filter-results-button:before,
    #open2.flaticon-close:before {
        position: static;
        width: auto;
        background-color: transparent;
        font-size: .95rem;
        line-height: 1;
    }
}